Enhance DateTimePicker component and registry updates

This commit adds a new datetimepicker-input component to the registry, along with its dependencies and metadata. It also updates the components.json to include a new registry entry for @shadix-ui. Additionally, several existing datetimepicker components have been refactored for improved structure and consistency, including updates to file paths in the registry. The changes ensure better organization and accessibility of the DateTimePicker components.

Author: gihanrangana

app/docs/[[...slug]]/page.tsx

@@ -80,6 +80,11 @@ export default async function Page(props: PageProps<"/docs/[[...slug]]">) {
                     style: "clerk",
                 }}
                 full={page.data.full}
+                breadcrumb={{
+                    enabled: true,
+                    includePage: true,
+                    includeRoot: true,
+                }}
             >
                 <div className="flex items-center gap-2 justify-between">
                     <DocsTitle className="flex-1 text-4xl text-foreground">

components.json

@@ -19,6 +19,7 @@
     "hooks": "@/shadcn/hooks"
   },
   "registries": {
-    "@ncdai": "https://chanhdai.com/r/{name}.json"
+    "@ncdai": "https://chanhdai.com/r/{name}.json",
+    "@shadix-ui": "https://shadix-ui.vercel.app/r/{name}.json"
   }
 }

components/AIOpenButton.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 
-import { ChevronDown, MessageCircleIcon } from "lucide-react";
+import { Bot, ChevronDown, MessageCircleIcon } from "lucide-react";
 
 import { Icons } from "@/components/Icons";
 import { Button } from "@/shadcn/components/ui/button";
@@ -79,7 +79,8 @@ const AIOpenButton: React.FC<AIOpenButtonProps> = ({ url }) => {
                     variant={"secondary"}
                     className="extend-touch-target ml-auto shadow-none h-8 md:h-7"
                 >
-                    Open
+                    <Bot />
+                    Ask AI
                     <ChevronDown />
                 </Button>
             </DropdownMenuTrigger>

components/InstalationDocs.tsx

@@ -1,14 +1,23 @@
 import type React from "react";
 
+import Link from "next/link";
+
 import { ComponentSource } from "@/components/ComponentSource";
+import { Icons } from "@/components/Icons";
 import InstallTabs from "@/components/InstallTabs";
 import { Index } from "@/registry/__index__";
+import { Button } from "@/shadcn/components/ui/button";
 import {
     Tabs,
     TabsContent,
     TabsList,
     TabsTrigger,
 } from "@/shadcn/components/ui/tabs";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@/shadcn/components/ui/tooltip";
 
 const getFileName = (filepath: string) => {
     const files = filepath.split("/");
@@ -23,20 +32,37 @@ const InstalationDocs: React.FC<InstalationDocsProps> = ({
 
     return (
         <Tabs defaultValue="cli">
-            <TabsList className="bg-transparent gap-2">
-                <TabsTrigger
-                    className="border-0 rounded-none data-[state=active]:shadow-none !bg-transparent data-[state=active]:border-b-muted-foreground dark:data-[state=active]:border-b-muted-foreground data-[state=active]:border-b-2"
-                    value="cli"
-                >
-                    CLI
-                </TabsTrigger>
-                <TabsTrigger
-                    className="border-0 rounded-none data-[state=active]:shadow-none !bg-transparent data-[state=active]:border-b-muted-foreground dark:data-[state=active]:border-b-muted-foreground data-[state=active]:border-b-2"
-                    value="manual"
-                >
-                    Manual
-                </TabsTrigger>
+            <TabsList className="bg-transparent gap-2 justify-between flex w-full">
+                <div>
+                    <TabsTrigger
+                        className="border-0 rounded-none data-[state=active]:shadow-none !bg-transparent data-[state=active]:border-b-muted-foreground dark:data-[state=active]:border-b-muted-foreground data-[state=active]:border-b-2"
+                        value="cli"
+                    >
+                        CLI
+                    </TabsTrigger>
+                    <TabsTrigger
+                        className="border-0 rounded-none data-[state=active]:shadow-none !bg-transparent data-[state=active]:border-b-muted-foreground dark:data-[state=active]:border-b-muted-foreground data-[state=active]:border-b-2"
+                        value="manual"
+                    >
+                        Manual
+                    </TabsTrigger>
+                </div>
+
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button variant="ghost" size="sm" asChild>
+                            <Link
+                                href={pkg.files?.[0]?.githubUrl ?? "#"}
+                                target="_blank"
+                            >
+                                <Icons.gitHub />
+                            </Link>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Open in GitHub</TooltipContent>
+                </Tooltip>
             </TabsList>
+
             <TabsContent value="cli">
                 <InstallTabs pkg={name} />
             </TabsContent>

components/InstallTabs.tsx

@@ -25,16 +25,17 @@ const getCommands = (command: string): Record<PackageManager, string> => {
 
 const InstallTabs: React.FC<InstallTabsProps> = ({ pkg, external = false }) => {
     const [value, setValue] = React.useState<PackageManager>("pnpm");
-    const [origin, setOrigin] = React.useState<string>("");
+    // const [origin, setOrigin] = React.useState<string>('');
 
     // fix: Handle window access safely for SSR
-    React.useEffect(() => {
-        if (typeof window !== "undefined") {
-            setOrigin(window.location.origin);
-        }
-    }, []);
+    // React.useEffect(() => {
+    //     if (typeof window !== 'undefined') {
+    //         setOrigin(window.location.origin);
+    //     }
+    // }, []);
 
-    let command = `shadcn@latest add ${origin}/r/${pkg}`;
+    let command = `shadcn@latest add @shadix-ui/${pkg}`;
+    // let command = `shadcn@latest add ${origin}/r/${pkg}`;
 
     if (external) {
         const packages = Array.isArray(pkg) ? pkg.join(" ") : pkg;
@@ -65,17 +66,6 @@ const InstallTabs: React.FC<InstallTabsProps> = ({ pkg, external = false }) => {
                         </TabsList>
 
                         <CopyButton value={getCommands(command)[value]} />
-
-                        {/* <Button
-                            variant='ghost'
-                            size='icon'
-                            onClick={handleCopy}
-                            title='Copy command'
-                            className='h-7 w-7 text-muted-foreground hover:text-foreground'
-                        >
-                            <Clipboard className='h-4 w-4' />
-                            <span className='sr-only'>Copy command</span>
-                        </Button> */}
                     </div>
                 </div>
 

content/docs/components/datetimepicker-input.mdx

@@ -0,0 +1,73 @@
+---
+title: DateTime Picker Input
+description: A datetime picker input component with modern animations
+author: Gihan Rangana
+authorUrl: https://github.com/gihanrangana
+authorImage: https://github.com/gihanrangana.png
+---
+
+<ComponentPreview name="datetimepicker-input-demo" />
+
+## Installation
+
+<InstalationDocs name="datetimepicker-input" filepath="components/ui" />
+
+## Usage
+
+### Import the component
+
+```tsx
+import { DateTimePickerInput } from '@/components/ui/datetimepicker-input';
+```
+
+### Basic Usage
+
+```tsx
+const DateTimePickerInputDemo = () => {
+    return (
+        <DateTimePickerInput
+            mode="single"
+            value={new Date()}
+            onValueChange={(date) => {
+                console.log(date);
+            }}
+            placeholder="Select date"
+        />
+    );
+};
+```
+
+#### With Range Mode
+
+```tsx
+const DateTimePickerDemo = () => {
+    return (
+        <DateTimePickerInput
+            mode="range"
+            onValueChange={(date) => {
+                console.log(date);
+            }}
+            placeholder="Select date range"
+        />
+    );
+};
+```
+
+#### With Time Mode
+
+```tsx
+const DateTimePickerDemo = () => {
+    return (
+        <DateTimePickerInput
+            mode="single"
+            enableTime={true}
+            timeFormat="24h" // 12h or 24h
+            value={new Date()}
+            onValueChange={(date) => {
+                console.log(date);
+            }}
+            placeholder="Select date and time"
+        />
+    );
+};
+```

content/docs/components/datetimepicker.mdx

@@ -0,0 +1,73 @@
+---
+title: DateTime Picker
+description: A datetime picker component with modern animations
+author: Gihan Rangana
+authorUrl: https://github.com/gihanrangana
+authorImage: https://github.com/gihanrangana.png
+---
+
+<ComponentPreview name="datetimepicker-demo" />
+
+## Installation
+
+<InstalationDocs name="datetimepicker" filepath="components/ui" />
+
+## Usage
+
+### Import the component
+
+```tsx
+import { DateTimePicker } from '@/components/datetimepicker';
+```
+
+### Basic Usage
+
+```tsx
+const DateTimePickerDemo = () => {
+    return (
+        <DateTimePicker
+            mode="single"
+            value={new Date()}
+            onDateChange={(date) => {
+                console.log(date);
+            }}
+            placeholder="Select date"
+        />
+    );
+};
+```
+
+#### With Range Mode
+
+```tsx
+const DateTimePickerDemo = () => {
+    return (
+        <DateTimePicker
+            mode="range"
+            onDateChange={(date) => {
+                console.log(date);
+            }}
+            placeholder="Select date range"
+        />
+    );
+};
+```
+
+#### With Time Mode
+
+```tsx
+const DateTimePickerDemo = () => {
+    return (
+        <DateTimePicker
+            mode="single"
+            enableTime={true}
+            timeFormat="24h" // 12h or 24h
+            value={new Date()}
+            onDateChange={(date) => {
+                console.log(date);
+            }}
+            placeholder="Select date and time"
+        />
+    );
+};
+```