fix: minor fixes

mehdibha · mehdibha · commit da7eee4a9c21 · 2024-03-24T20:45:34.000+01:00
diff --git a/content/blocks/index.mdx b/content/blocks/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Blocks
+description: Copy and paste blocks for your React app
+---
+
+Beautifully designed blocks that you can copy and paste into your apps. Accessible. Customizable. Open Source, crafted with Tailwind CSS, fully responsive.
+If you think it's missing a block, please [open an issue](https://github.com/mehdibha/rcopy/issues/new).
diff --git a/content/components/animations/sparkle-button.mdx b/content/components/animations/sparkle-button.mdx
@@ -2,6 +2,7 @@
 title: Sparkle button
 description: A beautiful sparkle animation button
 video: /previews/components/sparkle-button.mp4
+label: New
 ---
 
 <ComponentPreview name="demos/components/animations/sparkle-button" />
diff --git a/content/getting-started/introduction.mdx b/content/getting-started/introduction.mdx
diff --git a/scripts/build-docs-config.ts b/scripts/build-docs-config.ts
@@ -8,22 +8,20 @@ const getCategoryItems = (category: string) => {
   return getAllCategoryDocs(category).map((category) => ({
     title: category.title,
     href: category.href,
+    label: category.label,
   }));
 };
 
 const docsConfig: DocsConfig = {
   sidebarNav: [
     {
       title: "Getting Started",
-      items: [
-        {
-          title: "Introduction",
-          href: "/getting-started",
-        },
-      ],
+      slug: "getting-started",
+      items: getCategoryItems("getting-started"),
     },
     {
       title: "Components",
+      slug: "components",
       items: [
         {
           title: "All components",
@@ -41,6 +39,7 @@ const docsConfig: DocsConfig = {
     },
     {
       title: "Blocks",
+      slug: "blocks",
       items: [
         {
           title: "All blocks",
@@ -62,6 +61,7 @@ const docsConfig: DocsConfig = {
     },
     {
       title: "Hooks",
+      slug: "hooks",
       items: [
         {
           title: "All hooks",
@@ -72,6 +72,7 @@ const docsConfig: DocsConfig = {
     },
     {
       title: "Icons",
+      slug: "icons",
       items: [
         {
           title: "All icons",
@@ -82,6 +83,7 @@ const docsConfig: DocsConfig = {
     },
     {
       title: "Templates",
+      slug: "templates",
       items: [
         {
           title: "All templates",
diff --git a/src/app/(docs)/[...slug]/page.tsx b/src/app/(docs)/[...slug]/page.tsx
@@ -61,9 +61,9 @@ export default async function Page({ params }: PageProps) {
         "xl:grid xl:grid-cols-[1fr_220px]": !!doc.toc.items, // !!doc.toc
       })}
     >
-      <div className="mx-auto w-full min-w-0  pt-6">
+      <div className="mx-auto w-full min-w-0 pt-6">
         {metadata.breadcrumbs.length > 1 && (
-          <Breadcrumb>
+          <Breadcrumb className="mb-2">
             <BreadcrumbList>
               {metadata.breadcrumbs.map((breadcrumb, index) => (
                 <React.Fragment key={index}>
@@ -86,7 +86,7 @@ export default async function Page({ params }: PageProps) {
             </BreadcrumbList>
           </Breadcrumb>
         )}
-        <h1 className="mt-2 text-4xl font-bold">{metadata.title}</h1>
+        <h1 className="text-4xl font-bold">{metadata.title}</h1>
         <p className="mt-2 text-muted-foreground">{metadata.description}</p>
         {categories && categories.length > 0 && (
           <div className="mt-6 flex flex-wrap gap-4">
@@ -165,7 +165,9 @@ const DataGrid = ({ type, items }: { type: string; items: Item[] }) => {
                     />
                   </ScrollArea>
                 ) : (
-                  <p className="text-muted-foreground">No thumbnail</p>
+                  <div className="flex aspect-video w-full items-center justify-center bg-card/50">
+                    <p className="text-muted-foreground">No thumbnail</p>
+                  </div>
                 )}
               </div>
             )}
diff --git a/src/components/docs-sidebar.tsx b/src/components/docs-sidebar.tsx
@@ -22,7 +22,13 @@ export function DocsSidebar({ items }: DocsSidebarProps) {
   return items.length > 0 ? (
     <div className="w-full space-y-4 pb-10 pt-6 text-sm">
       {items.map((item, index) => (
-        <Category key={index} title={item.title} items={item.items} pathname={pathname} />
+        <Category
+          key={index}
+          title={item.title}
+          items={item.items}
+          slug={item.slug}
+          pathname={pathname}
+        />
       ))}
     </div>
   ) : null;
@@ -32,8 +38,8 @@ interface CategoryProps extends TCategory {
   pathname: string;
 }
 
-const Category = ({ title, items, pathname }: CategoryProps) => {
-  const [open, setOpen] = React.useState(true);
+const Category = ({ title, slug, items, pathname }: CategoryProps) => {
+  const [open, setOpen] = React.useState(pathname.startsWith(`/${slug}`));
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
@@ -57,7 +63,7 @@ const Category = ({ title, items, pathname }: CategoryProps) => {
                       }
                     )}
                   >
-                    <span className="block duration-100 group-hover:translate-x-1">
+                    <span className="block duration-100 group-hover:translate-x-0.5">
                       {item.title}
                     </span>
                   </Link>
@@ -83,10 +89,10 @@ const Category = ({ title, items, pathname }: CategoryProps) => {
                             }
                           )}
                         >
-                          <span className="block transition-transform duration-100 group-hover:translate-x-1">
+                          <span className="block transition-transform duration-100 group-hover:translate-x-0.5">
                             {subItem.title}
                             {subItem.label && (
-                              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline">
+                              <span className="ml-2 rounded-md bg-gradient px-1.5 py-0.5 text-xs leading-none text-black ">
                                 {subItem.label}
                               </span>
                             )}
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -3,7 +3,7 @@
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { useSelectedLayoutSegments } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { motion, useAnimate } from "framer-motion";
 import { MenuIcon, SearchIcon } from "lucide-react";
 import { SearchDialog } from "@/components/search-dialog";
@@ -163,7 +163,7 @@ interface NavProps {
 
 const Nav = (props: NavProps) => {
   const { items, direction = "row", onNavItemClick } = props;
-  const segments = useSelectedLayoutSegments();
+  const pathname = usePathname();
 
   return (
     <nav
@@ -182,9 +182,7 @@ const Nav = (props: NavProps) => {
                 {
                   "cursor-default text-foreground/30 hover:text-foreground/30":
                     item.disabled,
-                  "bg-foreground/10 text-foreground": segments[0]
-                    ?.split("/")
-                    ?.includes(item.href.slice(1, item.href.length)),
+                  "bg-foreground/10 text-foreground": pathname.startsWith(item.href),
                 }
               )}
               onClick={onNavItemClick}
diff --git a/src/config/docs-config.ts b/src/config/docs-config.ts
@@ -6,10 +6,12 @@ export const docsConfig: DocsConfig = {
   sidebarNav: [
     {
       title: "Getting Started",
-      items: [{ title: "Introduction", href: "/getting-started" }],
+      slug: "getting-started",
+      items: [{ title: "Introduction", href: "/getting-started/introduction" }],
     },
     {
       title: "Components",
+      slug: "components",
       items: [
         { title: "All components", href: "/components" },
         {
@@ -66,13 +68,18 @@ export const docsConfig: DocsConfig = {
         {
           title: "Animations",
           items: [
-            { title: "Sparkle button", href: "/components/animations/sparkle-button" },
+            {
+              title: "Sparkle button",
+              href: "/components/animations/sparkle-button",
+              label: "New",
+            },
           ],
         },
       ],
     },
     {
       title: "Blocks",
+      slug: "blocks",
       items: [
         { title: "All blocks", href: "/blocks" },
         {
@@ -85,13 +92,18 @@ export const docsConfig: DocsConfig = {
     },
     {
       title: "Hooks",
+      slug: "hooks",
       items: [
         { title: "All hooks", href: "/hooks" },
         { title: "useBattery", href: "/hooks/use-battery" },
         { title: "useDebounce", href: "/hooks/use-debounce" },
       ],
     },
-    { title: "Icons", items: [{ title: "All icons", href: "/icons" }] },
-    { title: "Templates", items: [{ title: "All templates", href: "/templates" }] },
+    { title: "Icons", slug: "icons", items: [{ title: "All icons", href: "/icons" }] },
+    {
+      title: "Templates",
+      slug: "templates",
+      items: [{ title: "All templates", href: "/templates" }],
+    },
   ],
 };
diff --git a/src/config/site-config.tsx b/src/config/site-config.tsx
@@ -29,9 +29,9 @@ export const siteConfig = {
   header: {
     nav: {
       links: [
-        { href: "/getting-started", label: "Docs" },
+        { href: "/getting-started/introduction", label: "Docs" },
         { href: "/components", label: "Components" },
-        { href: "/components", label: "Blocks" },
+        { href: "/blocks", label: "Blocks" },
         { href: "/hooks", label: "Hooks" },
         { href: "/icons", label: "Icons" },
         { href: "/templates", label: "Templates" },
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -27,7 +27,7 @@
   }
 
   .dark {
-    --background: 240 10% 8%;
+    --background: 240 10% 10%;
     --foreground: 0 0% 80%;
     --card: 240 10% 15%;
     --card-foreground: 0 0% 98%;
@@ -80,11 +80,11 @@
   }
 
   .category:before {
-    @apply absolute top-0 left-0 h-2 w-2 rounded-full bg-muted content-[''] -ml-1 mt-1;
+    @apply absolute left-0 top-0 -ml-1 mt-1 h-2 w-2 rounded-full bg-muted content-[''];
   }
 
   .category:after {
-    @apply absolute top-3 left-0 h-2 w-[1px] bg-muted content-[''];
+    @apply absolute left-0 top-3 h-2 w-[1px] bg-muted content-[''];
   }
 
   @media (max-width: 640px) {
diff --git a/src/types/nav.ts b/src/types/nav.ts
@@ -13,6 +13,7 @@ interface SubCategory {
 
 export interface Category {
   title: string;
+  slug: string;
   items: (Item | SubCategory)[];
 }
 
diff --git a/src/utils/docs.ts b/src/utils/docs.ts
@@ -14,6 +14,7 @@ interface DocFrontmatter {
   video?: string;
   keywords?: string[];
   externalLink?: string;
+  label?: string;
 }
 
 interface DocMetadata {

Original file line number	Diff line number	Diff line change
`@@ -8,22 +8,20 @@ const getCategoryItems = (category: string) => {`
`8`	`8`	`return getAllCategoryDocs(category).map((category) => ({`
`9`	`9`	`title: category.title,`
`10`	`10`	`href: category.href,`
	`11`	`+ label: category.label,`
`11`	`12`	`}));`
`12`	`13`	`};`
`13`	`14`
`14`	`15`	`const docsConfig: DocsConfig = {`
`15`	`16`	`sidebarNav: [`
`16`	`17`	`{`
`17`	`18`	`title: "Getting Started",`
`18`		`- items: [`
`19`		`- {`
`20`		`- title: "Introduction",`
`21`		`- href: "/getting-started",`
`22`		`- },`
`23`		`- ],`
	`19`	`+ slug: "getting-started",`
	`20`	`+ items: getCategoryItems("getting-started"),`
`24`	`21`	`},`
`25`	`22`	`{`
`26`	`23`	`title: "Components",`
	`24`	`+ slug: "components",`
`27`	`25`	`items: [`
`28`	`26`	`{`
`29`	`27`	`title: "All components",`
`@@ -41,6 +39,7 @@ const docsConfig: DocsConfig = {`
`41`	`39`	`},`
`42`	`40`	`{`
`43`	`41`	`title: "Blocks",`
	`42`	`+ slug: "blocks",`
`44`	`43`	`items: [`
`45`	`44`	`{`
`46`	`45`	`title: "All blocks",`
`@@ -62,6 +61,7 @@ const docsConfig: DocsConfig = {`
`62`	`61`	`},`
`63`	`62`	`{`
`64`	`63`	`title: "Hooks",`
	`64`	`+ slug: "hooks",`
`65`	`65`	`items: [`
`66`	`66`	`{`
`67`	`67`	`title: "All hooks",`
`@@ -72,6 +72,7 @@ const docsConfig: DocsConfig = {`
`72`	`72`	`},`
`73`	`73`	`{`
`74`	`74`	`title: "Icons",`
	`75`	`+ slug: "icons",`
`75`	`76`	`items: [`
`76`	`77`	`{`
`77`	`78`	`title: "All icons",`
`@@ -82,6 +83,7 @@ const docsConfig: DocsConfig = {`
`82`	`83`	`},`
`83`	`84`	`{`
`84`	`85`	`title: "Templates",`
	`86`	`+ slug: "templates",`
`85`	`87`	`items: [`
`86`	`88`	`{`
`87`	`89`	`title: "All templates",`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.dark {`
`30`		`- --background: 240 10% 8%;`
	`30`	`+ --background: 240 10% 10%;`
`31`	`31`	`--foreground: 0 0% 80%;`
`32`	`32`	`--card: 240 10% 15%;`
`33`	`33`	`--card-foreground: 0 0% 98%;`
`@@ -80,11 +80,11 @@`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`.category:before {`
`83`		`- @apply absolute top-0 left-0 h-2 w-2 rounded-full bg-muted content-[''] -ml-1 mt-1;`
	`83`	`+ @apply absolute left-0 top-0 -ml-1 mt-1 h-2 w-2 rounded-full bg-muted content-[''];`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`.category:after {`
`87`		`- @apply absolute top-3 left-0 h-2 w-[1px] bg-muted content-[''];`
	`87`	`+ @apply absolute left-0 top-3 h-2 w-[1px] bg-muted content-[''];`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`@media (max-width: 640px) {`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ interface SubCategory {`
`13`	`13`
`14`	`14`	`export interface Category {`
`15`	`15`	`title: string;`
	`16`	`+ slug: string;`
`16`	`17`	`items: (Item \| SubCategory)[];`
`17`	`18`	`}`
`18`	`19`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ interface DocFrontmatter {`
`14`	`14`	`video?: string;`
`15`	`15`	`keywords?: string[];`
`16`	`16`	`externalLink?: string;`
	`17`	`+ label?: string;`
`17`	`18`	`}`
`18`	`19`
`19`	`20`	`interface DocMetadata {`