Add a jwt-skills banner

Author: Sambego

package-lock.json

@@ -0,0 +1,51 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=eAMi
+-----END PGP PUBLIC KEY BLOCK-----

public.key

@@ -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>
+  );
+};