From 437f961d6dea12fe7966c78a4bc5a343403149f5 Mon Sep 17 00:00:00 2001 From: xandemon Date: Sun, 1 Dec 2024 09:26:17 +0545 Subject: [PATCH] :zap: improvement: ui enhance --- docs/src/components/Container.astro | 2 +- docs/src/components/HeroSection.astro | 1 + docs/src/components/Navbar.astro | 93 +++++++++++++++++---------- docs/src/components/iconsList.tsx | 40 ++++++------ docs/src/components/ui/iconCard.tsx | 8 +-- docs/src/layouts/DocsLayout.astro | 32 +++++---- docs/src/layouts/Layout.astro | 4 +- docs/src/pages/icons/[category].astro | 28 ++++---- docs/src/pages/index.astro | 4 +- docs/src/styles/docs.css | 1 + docs/tailwind.config.mjs | 6 +- 11 files changed, 129 insertions(+), 90 deletions(-) diff --git a/docs/src/components/Container.astro b/docs/src/components/Container.astro index fff28bb..c28c811 100644 --- a/docs/src/components/Container.astro +++ b/docs/src/components/Container.astro @@ -6,7 +6,7 @@ const { className } = Astro.props;
diff --git a/docs/src/components/HeroSection.astro b/docs/src/components/HeroSection.astro index 473c081..c7d6f2f 100644 --- a/docs/src/components/HeroSection.astro +++ b/docs/src/components/HeroSection.astro @@ -38,5 +38,6 @@ import { publicBaseUrl } from "@/config"; Developer Icons Hero Image
diff --git a/docs/src/components/Navbar.astro b/docs/src/components/Navbar.astro index bb67abb..de9f054 100644 --- 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); +}; --- -
- - - - Developer Icons - -
diff --git a/docs/src/components/iconsList.tsx b/docs/src/components/iconsList.tsx index b4930c4..2dbd677 100644 --- a/docs/src/components/iconsList.tsx +++ b/docs/src/components/iconsList.tsx @@ -20,28 +20,30 @@ export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => { ); return ( -
-
- - setSearchQuery(e.currentTarget.value)} - /> - {!!searchQuery && ( - +
+
+ setSearchQuery("")} /> - )} + setSearchQuery(e.currentTarget.value)} + /> + {!!searchQuery && ( + setSearchQuery("")} + /> + )} +
-
+
{filteredIcons.map((icon, index) => ( ))} diff --git a/docs/src/components/ui/iconCard.tsx b/docs/src/components/ui/iconCard.tsx index ed5f793..7a34e0a 100644 --- 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 ( -
+

{icon.name}

@@ -53,18 +53,18 @@ export const IconCard = ({ icon }: { icon: IconDataType }) => {
copyComponent(icon.name)} /> downloadIcon(icon.path)} /> - +
diff --git a/docs/src/layouts/DocsLayout.astro b/docs/src/layouts/DocsLayout.astro index 650337d..f9f6e55 100644 --- 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); - + -
+
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro index 91d6a92..058c08c 100644 --- 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); - + - + diff --git a/docs/src/pages/icons/[category].astro b/docs/src/pages/icons/[category].astro index ac55a34..2c5574c 100644 --- 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 = --- -
+