add : the banner launching

BelkacemYerfa · Mar 26, 2024 · 86c0233 · 86c0233
1 parent e1055da
commit 86c0233
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 48 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -84,7 +84,6 @@
     "**/.vscode": true,
     "**/.eslintrc.cjs": true,
     "**/.editorconfig": true,
-    "**/.gitignore": true,
     "**/.lintstagedrc.mjs": true,
     "**/.markdownlint.json": true,
     "**/.markdownlintignore": true,
@@ -97,8 +96,6 @@
     "**/postcss.config.cjs": true,
     "**/prettier.config.js": true,
     "**/README.md": true,
-    "**/next.config.js": true,
-    "**/tailwind.config.ts": true,
     "**/drizzle.config.ts": true,
     "**/migrate.ts": true,
     "**/.env.example": true
@@ -117,5 +114,6 @@
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": true,
   "window.zoomLevel": 0.75,
-  "cSpell.languageSettings": []
+  "cSpell.languageSettings": [],
+  "rust-analyzer.debug.engineSettings": {}
 }
diff --git a/content/docs/tree-view.mdx b/content/docs/tree-view.mdx
@@ -4,6 +4,8 @@ description: A tree view that assembles all the functionalities of the Accordion
 links:
   - title: radix-ui
     url: https://www.radix-ui.com/docs/primitives/components/accordion
+  - title : shadcn
+    url : https://ui.shadcn.com/docs/components/scroll-area#installation
 ---
 
 <ComponentPreview
@@ -28,6 +30,7 @@ links:
 
 ```bash
 npm install @radix-ui/react-accordion
+npx shadcn-ui@latest add scroll-area
 ```
 
 <Step>Chose your component to setup</Step>

diff --git a/contentlayer.config.js b/contentlayer.config.js
@@ -61,6 +61,11 @@ export const Doc = defineDocumentType(() => ({
       default: true,
       required: false,
     },
+    state: {
+      type: "enum",
+      values: ["deprecated", "new", "updated"],
+      required: false,
+    },
   },
   computedFields,
 }));

diff --git a/src/components/banner.tsx b/src/components/banner.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export const Banner = () => {
+  return (
+    <div className="bg-gradient-to-r from-[#9800ff] via-[#f62929] to-[#ffa908] z-20 text-accent-background py-2 text-center ">
+      🥳 <span>New docs for shadcn extesnion are live.</span>
+      <Link
+        href="/docs"
+        rel="noopener noreferrer"
+        className={cn(
+          buttonVariants({
+            variant: "link",
+          }),
+          "px-1 text-base"
+        )}
+      >
+        Check them out
+      </Link>
+    </div>
+  );
+};
diff --git a/src/components/component-preview.tsx b/src/components/component-preview.tsx
@@ -82,16 +82,7 @@ export function ComponentPreview({
           value="preview"
           className="relative rounded-md border bg-muted/50 p-2 data-[state=active]:flex flex-col items-center justify-center w-full min-h-[20rem]"
         >
-          {/* <div className="flex items-center justify-between p-4">
-            {extractedClassNames ? (
-              <CopyWithClassNames
-                value={codeString}
-                classNames={extractedClassNames}
-              />
-            ) : (
-              codeString && <CopyButton value={codeString} />
-            )}
-          </div> */}
+          {codeString && <CopyButton value={codeString} />}
           <div className="w-full max-w-sm flex items-center justify-center">
             {Preview}
           </div>

diff --git a/src/components/layouts/site-header.tsx b/src/components/layouts/site-header.tsx
@@ -10,45 +10,49 @@ import { SearchPopOver } from "../search";
 import { Pages } from "@/config/docs-config";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
+import { Banner } from "@/components/banner";
 
 export const SiteHeader = () => {
   const pathname = usePathname();
   return (
-    <header className="fixed w-full top-0 left-0 flex items-center justify-between px-4 py-2 h-12 border-b border-border bg-background z-10">
-      <nav className="mx-auto max-w-screen-2xl flex items-center justify-between w-full">
-        <div className="flex items-center gap-4">
-          <Link href="/" className="flex items-center gap-2  truncate">
-            <Icons.logo className="h-5 w-5 fill-current" />
-            <Balancer as={"span"} className=" font-bold truncate ">
-              {siteConfig.name}
-            </Balancer>
-          </Link>
-          {Pages.map((page) => {
-            const isActive = pathname.includes(page.path ?? "");
-            return (
-              page.path && (
-                <Link
-                  key={page.title}
-                  href={page.path}
-                  className={cn(
-                    "transition-colors text-foreground/70 hidden md:inline-block",
-                    isActive && "text-foreground"
-                  )}
-                >
-                  {page.title}
-                </Link>
-              )
-            );
-          })}
-        </div>
-        <div className="flex items-center gap-1 xs:gap-2">
-          <SearchPopOver />
-          <SocialLinks className="hidden xs:flex" />
-          <div className="flex xs:hidden">
-            <ModeToggle />
+    <header className="fixed w-full top-0 left-0  z-10">
+      {pathname === "/" && <Banner />}
+      <div className="flex items-center justify-between px-4 py-2 h-12 border-b border-border bg-background">
+        <nav className="mx-auto max-w-screen-2xl flex items-center justify-between w-full">
+          <div className="flex items-center gap-4">
+            <Link href="/" className="flex items-center gap-2  truncate">
+              <Icons.logo className="h-5 w-5 fill-current" />
+              <Balancer as={"span"} className=" font-bold truncate ">
+                {siteConfig.name}
+              </Balancer>
+            </Link>
+            {Pages.map((page) => {
+              const isActive = pathname.includes(page.path ?? "");
+              return (
+                page.path && (
+                  <Link
+                    key={page.title}
+                    href={page.path}
+                    className={cn(
+                      "transition-colors text-foreground/70 hidden md:inline-block",
+                      isActive && "text-foreground"
+                    )}
+                  >
+                    {page.title}
+                  </Link>
+                )
+              );
+            })}
           </div>
-        </div>
-      </nav>
+          <div className="flex items-center gap-1 xs:gap-2">
+            <SearchPopOver />
+            <SocialLinks className="hidden xs:flex" />
+            <div className="flex xs:hidden">
+              <ModeToggle />
+            </div>
+          </div>
+        </nav>
+      </div>
     </header>
   );
 };