Merge pull request #928 from jsonwebtoken/feature/skills-banner

Add a jwt-skills banner

Author: Sambego

package-lock.json

@@ -19,6 +19,7 @@ import { Button } from "react-aria-components";
 import { ArrowHeadIconComponent } from "@/features/common/assets/arrow-head-icon.component";
 import { Auth0DictionaryModel } from "@/features/localization/models/auth0-dictionary.model";
 import { Auth0CtaComponent } from "@/features/common/components/auth0-cta/auth0-cta.component";
+import { SkillsCtaComponent } from "./skills-cta.component";
 
 type AssetsComponentProps = {
   languageCode: string;
@@ -63,6 +64,10 @@ export const AssetsComponent: React.FC<AssetsComponentProps> = ({
         languageCode={languageCode}
         dictionary={auth0Dictionary.banner}
       />
+      <SkillsCtaComponent
+        languageCode={languageCode}
+        dictionary={jwtDictionary.skills}
+      />
     </div>
   );
 };

src/features/home/components/assets/assets.component.tsx

@@ -28,8 +28,7 @@
     width: calc(100% - 2rem);
     max-width: 1312px;
     margin: 0 auto;
-    grid-row-gap: unset;
-    row-gap: unset;
+    row-gap: 1rem;
   }
 
 }
@@ -52,6 +51,7 @@
   }
 }
 
+
 .assets__title {
   width: 100%;
   margin: 0;

src/features/home/components/assets/assets.module.scss

@@ -0,0 +1,49 @@
+import React from "react";
+import { JwtDictionaryModel } from "@/features/localization/models/jwt-dictionary.model";
+import { CardWithHeadlineComponent } from "@/features/common/components/card/card.component";
+import { CardToolbarComponent } from "@/features/common/components/card-toolbar/card-toolbar.component";
+import { CardToolbarCopyButtonComponent } from "@/features/common/components/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component";
+
+const COMMAND = "npx skills add jsonwebtoken/jwt-skills";
+const COMMAND_SPECIFIC = "npx skills add jsonwebtoken/jwt-skills -s jwt-decode";
+
+const labelStyle: React.CSSProperties = {
+  fontSize: "0.75rem",
+  lineHeight: "1.25rem",
+  opacity: 0.6,
+};
+
+interface Props {
+  languageCode: string;
+  dictionary: JwtDictionaryModel["skills"];
+}
+
+export const SkillsCardComponent: React.FC<Props> = ({ languageCode, dictionary }) => {
+  return (
+    <CardWithHeadlineComponent
+      sectionHeadline={null}
+      id="skills-card"
+      languageCode={languageCode}
+      title="Terminal"
+      compactTitle="Terminal"
+      hasHeaderIcon
+      options={null}
+      slots={{
+        toolbar: (
+          <CardToolbarComponent ariaLabel="Skills command toolbar">
+            <CardToolbarCopyButtonComponent
+              languageCode={languageCode}
+              value={COMMAND}
+            />
+          </CardToolbarComponent>
+        ),
+      }}
+      messages={null}
+    >
+      <p style={labelStyle}>{dictionary.installAllSkills}</p>
+      <code>{"$ " + COMMAND}</code>
+      <p style={{ ...labelStyle, marginTop: "0.75rem" }}>{dictionary.installSpecificSkill}</p>
+      <code>{"$ " + COMMAND_SPECIFIC}</code>
+    </CardWithHeadlineComponent>
+  );
+};

src/features/home/components/assets/skills-card.component.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styles from "./skills-cta.module.scss";
+import { clsx } from "clsx";
+import Link from "next/link";
+import { JwtDictionaryModel } from "@/features/localization/models/jwt-dictionary.model";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
+import { ArrowHeadIconComponent } from "@/features/common/assets/arrow-head-icon.component";
+import { SkillsCardComponent } from "./skills-card.component";
+
+interface SkillsCtaComponentProps {
+  languageCode: string;
+  dictionary: JwtDictionaryModel["skills"];
+}
+
+export const SkillsCtaComponent: React.FC<SkillsCtaComponentProps> = ({
+  languageCode,
+  dictionary,
+}) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.left}>
+        <h4
+          className={clsx(
+            styles.title,
+            getLocalizedSecondaryFont(languageCode),
+          )}
+        >
+          {dictionary.title}
+        </h4>
+        <div className={styles.content}>
+          <p className={styles.description}>{dictionary.description}</p>
+          <Link
+            className={styles.link}
+            href={dictionary.ctaButton.path}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {dictionary.ctaButton.label}
+            <ArrowHeadIconComponent />
+          </Link>
+        </div>
+      </div>
+      <div className={styles.right}>
+        <SkillsCardComponent languageCode={languageCode} dictionary={dictionary} />
+      </div>
+    </div>
+  );
+};