Merge pull request #18 from xandemon/feat/uiEnhance

Enhance UI to be more pleasing and more smooth with the UX
xandemon · Dec 1, 2024 · c043311 · c043311
2 parents a28423a + 437f961
commit c043311
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 90 deletions.
diff --git a/docs/src/components/Container.astro b/docs/src/components/Container.astro
@@ -6,7 +6,7 @@ const { className } = Astro.props;
 
 <div
   class={cn(
-    "container flex items-center justify-center w-full py-3",
+    "container flex items-center justify-center w-full pb-5",
     className
   )}
 >

diff --git a/docs/src/components/HeroSection.astro b/docs/src/components/HeroSection.astro
@@ -38,5 +38,6 @@ import { publicBaseUrl } from "@/config";
   <img
     src={`${publicBaseUrl}/hero-image.png`}
     class="rounded-lg w-full h-[350px] max-w-[45%] object-cover shadow-lg shadow-zinc-950"
+    alt="Developer Icons Hero Image"
   />
 </div>
diff --git a/docs/src/components/Navbar.astro b/docs/src/components/Navbar.astro
@@ -3,42 +3,69 @@ import { GitHubDark, NPM } from "developer-icons";
 import Container from "./Container.astro";
 import { publicBaseUrl } from "@/config";
 import { DisclaimerAlert } from "./disclaimerAlert";
+import { cn } from "@/lib/utils";
 
 const url = Astro.url;
+
+const navLinks = [
+  { title: "Home", href: `/` },
+  { title: "Icons", href: `/icons/All` },
+  { title: "Docs", href: `/docs` },
+];
+
+const matchSamePage = (href: string) => {
+  if (href === "/") return url.pathname === `${publicBaseUrl}/`;
+  const baseLink = href.replace(/^(\/[^/]*).*/g, "$1");
+  return url.pathname.startsWith(publicBaseUrl + baseLink);
+};
 ---
 
-<div class="navbar bg-zinc-900">
-  <Container className="justify-between">
-    <a href={publicBaseUrl} class="flex items-center gap-2">
-      <img src={`${publicBaseUrl}/favicon.svg`} width="30" height="30" />
-      <span class="font-semibold text-lg">Developer Icons</span>
-    </a>
-    <nav
-      class="flex items-center justify-end gap-6 font-medium [&>a:hover]:text-sky-500"
+<div
+  class="navbar flex items-center justify-between py-3 px-8 bg-zinc-900 sticky top-0"
+>
+  <a href={publicBaseUrl} class="flex items-center gap-2">
+    <img
+      src={`${publicBaseUrl}/favicon.svg`}
+      width="30"
+      height="30"
+      alt="Developer Icons Logo"
+    />
+    <span class="font-semibold text-lg">Developer Icons</span>
+  </a>
+  <nav class="flex items-center justify-end gap-6 font-medium">
+    <DisclaimerAlert client:load url={url} />
+
+    <span class="w-[1px] h-4 bg-zinc-700"></span>
+
+    {
+      navLinks.map((link, index) => (
+        <a
+          href={publicBaseUrl + link.href}
+          class={cn(
+            "hover:text-sky-200",
+            matchSamePage(link.href) && "text-sky-500"
+          )}
+        >
+          {link.title}
+        </a>
+      ))
+    }
+
+    <span class="w-[1px] h-4 bg-zinc-700"></span>
+
+    <a
+      href="https://github.com/xandemon/developer-icons"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <GitHubDark size={20} className="github" /></a
+    >
+    <a
+      href="https://www.npmjs.com/package/developer-icons"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <NPM size={20} /></a
     >
-      <DisclaimerAlert client:load url={url} />
-
-      <span class="w-[1px] h-4 bg-zinc-700"></span>
-
-      <a href={`${publicBaseUrl}/icons/All`}>Icons</a>
-      <a href={`${publicBaseUrl}/docs`}>Docs</a>
-
-      <span class="w-[1px] h-4 bg-zinc-700"></span>
-
-      <a
-        href="https://github.com/xandemon/developer-icons"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <GitHubDark size={20} className="github" /></a
-      >
-      <a
-        href="https://www.npmjs.com/package/developer-icons"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <NPM size={20} /></a
-      >
-    </nav>
-  </Container>
+  </nav>
 </div>
diff --git a/docs/src/components/iconsList.tsx b/docs/src/components/iconsList.tsx
@@ -20,28 +20,30 @@ export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
   );
 
   return (
-    <section className="w-full flex flex-col gap-3">
-      <div className="relative w-full">
-        <SearchIcon
-          className="absolute top-1/2 left-3 -translate-y-1/2"
-          size={16}
-        />
-        <input
-          type="text"
-          placeholder="Search developer icons"
-          className="w-full p-2 px-5 pl-10 rounded-xl bg-transparent border border-zinc-800 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.currentTarget.value)}
-        />
-        {!!searchQuery && (
-          <X
-            className="absolute top-1/2 right-3 -translate-y-1/2 text-zinc-500 hover:text-zinc-400 cursor-pointer"
+    <section className="relative w-full flex flex-col h-full max-h-full overflow-scroll">
+      <div className="sticky top-0 bg-zinc-900 pb-3">
+        <div className="relative top-0 w-full">
+          <SearchIcon
+            className="absolute top-1/2 left-3 -translate-y-1/2"
             size={16}
-            onClick={() => setSearchQuery("")}
           />
-        )}
+          <input
+            type="text"
+            placeholder="Search developer icons"
+            className="w-full p-2 px-5 pl-10 rounded-xl bg-transparent border border-zinc-800 placeholder:text-zinc-500 focus:outline-none focus:border-zinc-600"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          />
+          {!!searchQuery && (
+            <X
+              className="absolute top-1/2 right-3 -translate-y-1/2 text-zinc-500 hover:text-zinc-400 cursor-pointer"
+              size={16}
+              onClick={() => setSearchQuery("")}
+            />
+          )}
+        </div>
       </div>
-      <div className="grid grid-cols-auto-fit gap-4 overflow-auto pr-1">
+      <div className="grid grid-cols-auto-fit gap-4 pr-1">
         {filteredIcons.map((icon, index) => (
           <IconCard key={index} icon={icon} />
         ))}

diff --git a/docs/src/components/ui/iconCard.tsx b/docs/src/components/ui/iconCard.tsx
@@ -33,7 +33,7 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
   };
 
   return (
-    <div className="w-full max-w-64 h-44 border border-zinc-800 rounded-xl flex flex-col items-center justify-center gap-2">
+    <div className="w-full h-44 border border-zinc-800 rounded-xl flex flex-col items-center justify-center gap-2">
       <DynamicIcon size={50} />
       <p className="font-semibold">{icon.name}</p>
       <div className="flex items-center gap-1 flex-wrap ">
@@ -53,18 +53,18 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
       <div className="flex items-center justify-center gap-3 text-zinc-400">
         <Copy
           size={18}
-          className="hover:text-zinc-300 cursor-pointer"
+          className="hover:text-yellow-300 cursor-pointer"
           onClick={() => copyComponent(icon.name)}
         />
         <Loader loading={downloadLoading} className="w-[18px] h-[18px]">
           <Download
             size={18}
-            className="hover:text-zinc-300 cursor-pointer"
+            className="hover:text-blue-300 cursor-pointer"
             onClick={() => downloadIcon(icon.path)}
           />
         </Loader>
         <a href={icon.url} target="_blank" rel="noreferrer">
-          <Copyright size={18} className="hover:text-zinc-300 cursor-pointer" />
+          <Copyright size={18} className="hover:text-rose-300 cursor-pointer" />
         </a>
       </div>
     </div>

diff --git a/docs/src/layouts/DocsLayout.astro b/docs/src/layouts/DocsLayout.astro
@@ -6,6 +6,7 @@ import { publicBaseUrl } from "@/config";
 import "@fontsource-variable/noto-sans";
 import "../styles/globals.css";
 import "../styles/docs.css";
+import { Button } from "@/components/ui/button";
 
 interface Props {
   title: string;
@@ -61,28 +62,31 @@ flattenedDocs.sort((a, b) => a.frontmatter.order - b.frontmatter.order);
   </head>
   <body class="text-zinc-300 bg-zinc-900 min-h-screen">
     <Navbar />
-    <Container className="items-stretch justify-start min-h-[calc(100vh-78px)]">
+    <Container
+      className="items-stretch justify-start h-[calc(100vh-80px)] pb-0 relative overflow-scroll"
+    >
       <aside
-        class="w-1/5 min-w-[20%] flex flex-col items-start justify-start gap-3 p-4 border-r border-zinc-800"
+        class="w-full max-w-[250px] h-full min-h-full border border-zinc-800 rounded-xl flex flex-col gap-2 text-zinc-400 p-3 sticky top-0"
       >
         {
           flattenedDocs.map((doc) => (
-            <a
-              href={doc.url}
-              class={cn(
-                "w-full rounded-lg hover:bg-zinc-800 px-4 py-2 cursor-pointer font-medium",
-                {
-                  "bg-sky-700 bg-opacity-90 hover:bg-sky-700 hover:bg-opacity-90 text-zinc-300":
-                    props.frontmatter.title === doc.frontmatter.title,
-                }
-              )}
-            >
-              {doc.frontmatter.title}
+            <a href={doc.url}>
+              <Button
+                className={cn(
+                  `w-full rounded-lg px-4 py-2 cursor-pointer justify-start`,
+                  {
+                    "bg-transparent text-zinc-400 hover:bg-zinc-800":
+                      props.frontmatter.title !== doc.frontmatter.title,
+                  }
+                )}
+              >
+                {doc.frontmatter.title}
+              </Button>
             </a>
           ))
         }
       </aside>
-      <div class="flex flex-col gap-4 p-6"><slot /></div>
+      <div class="flex flex-col gap-4 p-6 pt-2 h-full"><slot /></div>
     </Container>
   </body>
 </html>
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -45,9 +45,9 @@ const measurementId = import.meta.env.PUBLIC_GA_MEASUREMENT_ID;
       gtag("config", measurementId);
     </script>
   </head>
-  <body class="text-zinc-300 bg-zinc-900 min-h-screen">
+  <body class="text-zinc-300 bg-zinc-900">
     <Navbar />
-    <Container>
+    <Container className="items-start h-[calc(100vh-60px)]">
       <slot />
     </Container>
   </body>

diff --git a/docs/src/pages/icons/[category].astro b/docs/src/pages/icons/[category].astro
@@ -5,6 +5,7 @@ import { categoriesData, iconsData } from "../../../../lib/iconsData";
 import type { Category as CategoryType } from "../../../../lib/iconsData";
 import { cn } from "@/lib/utils";
 import { publicBaseUrl } from "@/config";
+import { Button } from "@/components/ui/button";
 
 export function getStaticPaths() {
   return ["All", ...categoriesData].map((category) => ({
@@ -32,25 +33,28 @@ const filteredIconsData =
 ---
 
 <Layout title="Icons | Developer Icons">
-  <main class="w-full h-[calc(100vh-78px)] flex gap-4">
+  <main class="w-full flex gap-4 h-full">
     <aside
-      class="w-1/4 h-full border border-zinc-800 rounded-xl flex flex-col gap-2 text-zinc-400 p-3 sticky top-0"
+      class="w-1/4 max-w-[250px] h-full min-h-full border border-zinc-800 rounded-xl flex flex-col gap-2 text-zinc-400 p-3 sticky top-0"
     >
       {
         ["All", ...categoriesData].map((item) => (
           <a
             href={`${publicBaseUrl}/icons/${item.replace("DevOps & AI/ML", "DevOps").replaceAll(" ", "-")}`}
-            class={cn(
-              `w-full rounded-lg hover:bg-zinc-800 px-4 py-2 cursor-pointer`,
-              {
-                "bg-sky-700 bg-opacity-90 hover:bg-sky-700 hover:bg-opacity-90 text-zinc-200":
-                  item
-                    .replace("DevOps & AI/ML", "DevOps")
-                    .replaceAll(" ", "-") === category,
-              }
-            )}
           >
-            {item}
+            <Button
+              className={cn(
+                `w-full rounded-lg px-4 py-2 cursor-pointer justify-start`,
+                {
+                  "bg-transparent text-zinc-400 hover:bg-zinc-800":
+                    item
+                      .replace("DevOps & AI/ML", "DevOps")
+                      .replaceAll(" ", "-") !== category,
+                }
+              )}
+            >
+              {item}
+            </Button>
           </a>
         ))
       }

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -6,7 +6,9 @@ import { InstallCmd } from "@/components/ui/installCmd";
 ---
 
 <Layout title="Developer Icons by xandemon">
-  <main class="w-full px-12 flex flex-col justify-between gap-6">
+  <main
+    class="w-full px-12 flex flex-col justify-between gap-[2vh] 2xl:max-w-[1536px]"
+  >
     <HeroSection />
 
     <FeatureSection />

diff --git a/docs/src/styles/docs.css b/docs/src/styles/docs.css
@@ -58,6 +58,7 @@ p {
 }
 
 pre {
+  overflow-x: visible !important;
   margin: 4px 0;
   padding: 8px 12px;
   border-radius: 8px;

diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.mjs
@@ -9,9 +9,7 @@ export default {
     container: {
       center: true,
       padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
+      screens:{}
     },
     extend: {
       fontFamily: {
@@ -32,7 +30,7 @@ export default {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       gridTemplateColumns: {
-        "auto-fit": "repeat(auto-fit, minmax(200px, 1fr))",
+        "auto-fit": "repeat(auto-fit, minmax(230px, 1fr))",
       },
     },
   },