chore: review icons & description

Author: zettca

apps/docs/src/globals.css renamed to apps/docs/src/app/globals.css

@@ -1,15 +1,15 @@
+import "nextra-theme-docs/style.css";
+import "./globals.css";
+
 import { type NextraMetadata } from "nextra";
 import { Layout, Navbar, ThemeSwitch } from "nextra-theme-docs";
 import { Head, Search } from "nextra/components";
 import { getPageMap } from "nextra/page-map";
 
-import "nextra-theme-docs/style.css";
-import "../globals.css";
-
+import { UIKitLogo } from "../assets/logos";
 import { Footer } from "../components/Footer";
-import { ThemeSwitcher } from "../components/home/ThemeSwitcher";
-import { UIKitLogo } from "../components/logo/uikit";
 import { Main } from "../components/Main";
+import { ThemeSwitcher } from "../components/ThemeSwitcher";
 
 const title = "UI Kit";
 const description = "UI Kit documentation site";

apps/docs/src/app/layout.tsx

@@ -0,0 +1,31 @@
+export const UIKitLogo = () => (
+  <svg width="100" viewBox="0 0 439 160" fill="light-dark(#333, #fff)">
+    <title>UI Kit Logo</title>
+    <path d="M0 12C0 5.37258 5.37258 0 12 0H165C171.627 0 177 5.37258 177 12V148C177 154.627 171.627 160 165 160H12C5.37258 160 0 154.627 0 148V12Z" />
+    <path
+      d="M82.2727 39.7273H105.966V95.6364C105.966 102.284 104.375 108.037 101.193 112.895C98.0398 117.724 93.6364 121.46 87.983 124.102C82.3295 126.716 75.767 128.023 68.2955 128.023C60.767 128.023 54.1761 126.716 48.5227 124.102C42.8693 121.46 38.4659 117.724 35.3125 112.895C32.1875 108.037 30.625 102.284 30.625 95.6364V39.7273H54.3182V93.5909C54.3182 96.2898 54.9148 98.7045 56.108 100.835C57.3011 102.937 58.9489 104.585 61.0511 105.778C63.1818 106.972 65.5966 107.568 68.2955 107.568C71.0227 107.568 73.4375 106.972 75.5398 105.778C77.642 104.585 79.2898 102.937 80.483 100.835C81.6761 98.7045 82.2727 96.2898 82.2727 93.5909V39.7273ZM140.92 39.7273V127H117.227V39.7273H140.92Z"
+      fill="light-dark(#fff, #333)"
+    />
+    <path d="M214.608 127V39.7273H230.418V79.8267H231.483L265.531 39.7273H284.835L251.085 78.8892L285.134 127H266.128L240.091 89.5852L230.418 101.006V127H214.608ZM311.629 39.7273V127H295.819V39.7273H311.629ZM324.913 52.9801V39.7273H394.544V52.9801H367.57V127H351.888V52.9801H324.913Z" />
+  </svg>
+);
+
+export const GitHubLogo = () => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="light-dark(#000, #fff)"
+  >
+    <title>GitHub Logo</title>
+    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+  </svg>
+);
+
+export const NpmLogo = () => (
+  <svg width="1em" height="1em" viewBox="0 0 256 256">
+    <title>NPM Logo</title>
+    <path d="M0 256V0h256v256z" fill="#C12127" />
+    <path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF" />
+  </svg>
+);

apps/docs/src/assets/logos.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { UIKitLogo } from "./logo/uikit";
+import { UIKitLogo } from "../assets/logos";
 
 const footerLinks = [
   {

apps/docs/src/components/Footer.tsx

@@ -3,7 +3,7 @@
 import { usePathname } from "next/navigation";
 import { HvSelect } from "@hitachivantara/uikit-react-core";
 
-import { useDocsTheme } from "../../hooks/useDocsTheme";
+import { useDocsTheme } from "../hooks/useDocsTheme";
 
 const themes = [
   { value: "pentahoPlus", label: "Pentaho+" },

apps/docs/src/components/home/ThemeSwitcher.tsx renamed to apps/docs/src/components/ThemeSwitcher.tsx

@@ -1,50 +1,53 @@
 "use client";
 
 import ReactMarkdown from "react-markdown";
-import { ArrowUpRight } from "@phosphor-icons/react";
 import { HvTypography } from "@hitachivantara/uikit-react-core";
 
-import { ComponentMeta } from "../../utils/component";
-import { GitHubLogo } from "../logo/gh";
-import { NpmLogo } from "../logo/npm";
+import { GitHubLogo, NpmLogo } from "../../assets/logos";
+import type { ComponentMeta } from "../../utils/component";
 import { AlignmentBadge } from "./AlignmentBadge";
 
 /**
  * The `Description` component displays metadata information
  * about the current component, including its name, description,
  * GitHub source link, and NPM package link.
  */
-export const Description = ({ meta }: { meta: ComponentMeta }) => {
+export function Description({ meta }: { meta: ComponentMeta }) {
+  const links = [
+    { logo: <GitHubLogo />, label: "Source Code", href: meta.source },
+    {
+      logo: <NpmLogo />,
+      label: `uikit-react-${meta.package}`,
+      href: `https://npm.im/@hitachivantara/uikit-react-${meta.package}`,
+    },
+  ];
+
   return (
     <>
-      <div className="flex flex-row gap-xs items-center">
+      <div className="flex gap-1 items-center">
         <HvTypography variant="title1">{meta.component}</HvTypography>
         <AlignmentBadge component={meta.component} />
       </div>
       <ReactMarkdown className="markdown">
         {meta.docgen?.description}
       </ReactMarkdown>
-      <div className="flex flex-row gap-md mt-md">
-        <div className="flex flex-row gap-xs items-center">
-          <GitHubLogo />
-          <HvTypography link component="a" href={meta.source} target="_blank">
-            Source Code
-          </HvTypography>
-          <ArrowUpRight />
-        </div>
-        <div className="flex flex-row gap-xs items-center">
-          <NpmLogo />
-          <HvTypography
-            link
-            component="a"
-            target="_blank"
-            href={`https://www.npmjs.com/package/@hitachivantara/uikit-react-${meta.package}`}
-          >
-            {`uikit-react-${meta.package}`}
-          </HvTypography>
-          <ArrowUpRight />
-        </div>
+      <div className="flex gap-sm mt-sm">
+        {links.map(({ logo, label, href }, i) => (
+          <div key={i} className="flex gap-xs items-center">
+            {logo}
+            <HvTypography
+              link
+              component="a"
+              href={href}
+              target="_blank"
+              className="flex items-center"
+            >
+              {label}
+              <div className="i-ph-arrow-up-right" />
+            </HvTypography>
+          </div>
+        ))}
       </div>
     </>
   );
-};
+}