@meghpatel-007/next-starter 0.0.0-stage → 1.0.0

package/template/src/components/command-search.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import {
+  Search,
+  LayoutPanelLeft,
+  LayoutDashboard,
+  Mail,
+  CheckSquare,
+  MessageCircle,
+  Calendar,
+  Shield,
+  AlertTriangle,
+  Settings,
+  HelpCircle,
+  CreditCard,
+  User,
+  Bell,
+  Link2,
+  Palette,
+  type LucideIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import { Kbd } from "@/components/ui/kbd"
+
+interface SearchItem {
+  title: string
+  url: string
+  group: string
+  icon?: LucideIcon
+}
+
+interface CommandSearchProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function CommandSearch({ open, onOpenChange }: CommandSearchProps) {
+  const router = useRouter()
+
+  const searchItems: SearchItem[] = [
+    // Dashboards
+    {
+      title: "Dashboard 1",
+      url: "/dashboard",
+      group: "Dashboards",
+      icon: LayoutDashboard,
+    },
+    {
+      title: "Dashboard 2",
+      url: "/dashboard-2",
+      group: "Dashboards",
+      icon: LayoutPanelLeft,
+    },
+
+    // Apps
+    { title: "Mail", url: "/mail", group: "Apps", icon: Mail },
+    { title: "Tasks", url: "/tasks", group: "Apps", icon: CheckSquare },
+    { title: "Chat", url: "/chat", group: "Apps", icon: MessageCircle },
+    { title: "Calendar", url: "/calendar", group: "Apps", icon: Calendar },
+
+    // Auth Pages
+    {
+      title: "Sign In 1",
+      url: "/auth/sign-in",
+      group: "Auth Pages",
+      icon: Shield,
+    },
+    {
+      title: "Sign In 2",
+      url: "/auth/sign-in-2",
+      group: "Auth Pages",
+      icon: Shield,
+    },
+    {
+      title: "Sign Up 1",
+      url: "/auth/sign-up",
+      group: "Auth Pages",
+      icon: Shield,
+    },
+    {
+      title: "Sign Up 2",
+      url: "/auth/sign-up-2",
+      group: "Auth Pages",
+      icon: Shield,
+    },
+    {
+      title: "Forgot Password 1",
+      url: "/auth/forgot-password",
+      group: "Auth Pages",
+      icon: Shield,
+    },
+    {
+      title: "Forgot Password 2",
+      url: "/auth/forgot-password-2",
+      group: "Auth Pages",
+      icon: Shield,
+    },
+
+    // Errors
+    {
+      title: "Unauthorized",
+      url: "/errors/unauthorized",
+      group: "Errors",
+      icon: AlertTriangle,
+    },
+    {
+      title: "Forbidden",
+      url: "/errors/forbidden",
+      group: "Errors",
+      icon: AlertTriangle,
+    },
+    {
+      title: "Not Found",
+      url: "/errors/not-found",
+      group: "Errors",
+      icon: AlertTriangle,
+    },
+    {
+      title: "Internal Server Error",
+      url: "/errors/internal-server-error",
+      group: "Errors",
+      icon: AlertTriangle,
+    },
+    {
+      title: "Under Maintenance",
+      url: "/errors/under-maintenance",
+      group: "Errors",
+      icon: AlertTriangle,
+    },
+
+    // Settings
+    {
+      title: "User Settings",
+      url: "/settings/user",
+      group: "Settings",
+      icon: User,
+    },
+    {
+      title: "Account Settings",
+      url: "/settings/account",
+      group: "Settings",
+      icon: Settings,
+    },
+    {
+      title: "Plans & Billing",
+      url: "/settings/billing",
+      group: "Settings",
+      icon: CreditCard,
+    },
+    {
+      title: "Appearance",
+      url: "/settings/appearance",
+      group: "Settings",
+      icon: Palette,
+    },
+    {
+      title: "Notifications",
+      url: "/settings/notifications",
+      group: "Settings",
+      icon: Bell,
+    },
+    {
+      title: "Connections",
+      url: "/settings/connections",
+      group: "Settings",
+      icon: Link2,
+    },
+
+    // Pages
+    { title: "FAQs", url: "/faqs", group: "Pages", icon: HelpCircle },
+    { title: "Pricing", url: "/pricing", group: "Pages", icon: CreditCard },
+  ]
+
+  const groupedItems = searchItems.reduce(
+    (acc, item) => {
+      if (!acc[item.group]) {
+        acc[item.group] = []
+      }
+      acc[item.group].push(item)
+      return acc
+    },
+    {} as Record<string, SearchItem[]>
+  )
+
+  const handleSelect = (url: string) => {
+    router.push(url)
+    onOpenChange(false)
+  }
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Command Search"
+      description="Search pages and settings"
+      className="sm:max-w-[640px]"
+    >
+      <Command>
+        <CommandInput placeholder="What do you need?" autoFocus />
+        <CommandList className="max-h-[400px]">
+          <CommandEmpty>No results found.</CommandEmpty>
+          {Object.entries(groupedItems).map(([group, items]) => (
+            <CommandGroup key={group} heading={group}>
+              {items.map((item) => {
+                const Icon = item.icon
+                return (
+                  <CommandItem
+                    key={item.url}
+                    value={item.title}
+                    onSelect={() => handleSelect(item.url)}
+                  >
+                    {Icon && <Icon />}
+                    {item.title}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          ))}
+        </CommandList>
+      </Command>
+    </CommandDialog>
+  )
+}
+
+export function SearchTrigger({ onClick }: { onClick: () => void }) {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={onClick}
+      className="relative w-full justify-start font-normal text-muted-foreground sm:pr-12 md:w-36 lg:w-56"
+    >
+      <Search data-icon="inline-start" />
+      Search...
+      <Kbd className="absolute top-1/2 right-1.5 hidden -translate-y-1/2 sm:inline-flex">
+        ⌘K
+      </Kbd>
+    </Button>
+  )
+}

package/template/src/components/dot-pattern.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+interface DotPatternProps {
+  className?: string
+  size?: "sm" | "md" | "lg"
+  opacity?: "low" | "medium" | "high"
+  fadeStyle?: "ellipse" | "circle" | "none"
+}
+
+export function DotPattern({
+  className,
+  size = "md",
+  opacity = "medium",
+  fadeStyle = "ellipse",
+}: DotPatternProps) {
+  // Use predefined Tailwind classes instead of template literals for Next.js compatibility
+  const sizeMap = {
+    sm: "[background-size:12px_12px]",
+    md: "[background-size:16px_16px]",
+    lg: "[background-size:20px_20px]",
+  }
+
+  const opacityMap = {
+    low: "opacity-30",
+    medium: "opacity-50",
+    high: "opacity-70",
+  }
+
+  const fadeMap = {
+    ellipse:
+      "[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]",
+    circle:
+      "[mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)]",
+    none: "",
+  }
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 bg-[radial-gradient(var(--border)_1px,transparent_1px)]",
+        sizeMap[size],
+        fadeMap[fadeStyle],
+        opacityMap[opacity],
+        className
+      )}
+    />
+  )
+}
+
+// Alternative themed variants
+export function DotPatternLight({
+  className,
+  size = "md",
+  opacity = "medium",
+  fadeStyle = "ellipse",
+}: DotPatternProps) {
+  // Use predefined Tailwind classes instead of template literals for Next.js compatibility
+  const sizeMap = {
+    sm: "[background-size:12px_12px]",
+    md: "[background-size:16px_16px]",
+    lg: "[background-size:20px_20px]",
+  }
+
+  const opacityMap = {
+    low: "opacity-20",
+    medium: "opacity-40",
+    high: "opacity-60",
+  }
+
+  const fadeMap = {
+    ellipse:
+      "[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]",
+    circle:
+      "[mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)]",
+    none: "",
+  }
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 bg-[radial-gradient(#d1d5db_1px,transparent_1px)]",
+        sizeMap[size],
+        fadeMap[fadeStyle],
+        opacityMap[opacity],
+        className
+      )}
+    />
+  )
+}
+
+export function DotPatternDark({
+  className,
+  size = "md",
+  opacity = "medium",
+  fadeStyle = "ellipse",
+}: DotPatternProps) {
+  // Use predefined Tailwind classes instead of template literals for Next.js compatibility
+  const sizeMap = {
+    sm: "[background-size:12px_12px]",
+    md: "[background-size:16px_16px]",
+    lg: "[background-size:20px_20px]",
+  }
+
+  const opacityMap = {
+    low: "opacity-30",
+    medium: "opacity-50",
+    high: "opacity-70",
+  }
+
+  const fadeMap = {
+    ellipse:
+      "[mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]",
+    circle:
+      "[mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)]",
+    none: "",
+  }
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 bg-[radial-gradient(#4b5563_1px,transparent_1px)]",
+        sizeMap[size],
+        fadeMap[fadeStyle],
+        opacityMap[opacity],
+        className
+      )}
+    />
+  )
+}

package/template/src/components/dynamic-imports.ts

@@ -0,0 +1,28 @@
+import dynamic from "next/dynamic"
+import React from "react"
+
+// Heavy components that should be dynamically imported
+export const DynamicThemeCustomizer = dynamic(
+  () =>
+    import("./theme-customizer").then((mod) => ({
+      default: mod.ThemeCustomizer,
+    })),
+  {
+    ssr: false,
+    loading: () =>
+      React.createElement("div", {
+        className: "h-8 w-8 animate-pulse bg-muted rounded",
+      }),
+  }
+)
+
+export const DynamicColorPicker = dynamic(
+  () => import("./color-picker").then((mod) => ({ default: mod.ColorPicker })),
+  {
+    ssr: false,
+    loading: () =>
+      React.createElement("div", {
+        className: "h-8 w-8 animate-pulse bg-muted rounded",
+      }),
+  }
+)

package/template/src/components/icons/brand-icons.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * Brand icons. lucide-react 1.x dropped every brand mark, so these keep the
+ * exact paths the template used from lucide 0.x and render the same way
+ * (24px grid, 2px stroke, currentColor) — size them with className as before.
+ */
+type BrandIconProps = React.SVGProps<SVGSVGElement>
+
+function createBrandIcon(displayName: string, children: React.ReactNode) {
+  function BrandIcon({ className, ...props }: BrandIconProps) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        className={cn("lucide", className)}
+        {...props}
+      >
+        {children}
+      </svg>
+    )
+  }
+  BrandIcon.displayName = displayName
+  return BrandIcon
+}
+
+export const Github = createBrandIcon(
+  "Github",
+  <>
+    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+    <path d="M9 18c-4.51 2-5-2-7-2" />
+  </>
+)
+
+export const Twitter = createBrandIcon(
+  "Twitter",
+  <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+)
+
+export const Facebook = createBrandIcon(
+  "Facebook",
+  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+)
+
+export const Linkedin = createBrandIcon(
+  "Linkedin",
+  <>
+    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+    <rect width="4" height="12" x="2" y="9" />
+    <circle cx="4" cy="4" r="2" />
+  </>
+)
+
+export const Instagram = createBrandIcon(
+  "Instagram",
+  <>
+    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+  </>
+)
+
+export const Youtube = createBrandIcon(
+  "Youtube",
+  <>
+    <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
+    <path d="m10 15 5-3-5-3z" />
+  </>
+)
+
+export const Dribbble = createBrandIcon(
+  "Dribbble",
+  <>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" />
+    <path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" />
+    <path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" />
+  </>
+)
+
+export const Slack = createBrandIcon(
+  "Slack",
+  <>
+    <rect width="3" height="8" x="13" y="2" rx="1.5" />
+    <path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" />
+    <rect width="3" height="8" x="8" y="14" rx="1.5" />
+    <path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" />
+    <rect width="8" height="3" x="14" y="13" rx="1.5" />
+    <path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" />
+    <rect width="8" height="3" x="2" y="8" rx="1.5" />
+    <path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" />
+  </>
+)
+
+export const Chrome = createBrandIcon(
+  "Chrome",
+  <>
+    <path d="M10.88 21.94 15.46 14" />
+    <path d="M21.17 8H12" />
+    <path d="M3.95 6.06 8.54 14" />
+    <circle cx="12" cy="12" r="10" />
+    <circle cx="12" cy="12" r="4" />
+  </>
+)

package/template/src/components/image-3d.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import Image from "next/image"
+import { cn } from "@/lib/utils"
+
+interface Image3DProps {
+  lightSrc: string
+  darkSrc: string
+  alt: string
+  className?: string
+  direction?: "left" | "right"
+}
+
+export function Image3D({
+  lightSrc,
+  darkSrc,
+  alt,
+  className,
+  direction = "left",
+}: Image3DProps) {
+  const isRight = direction === "right"
+
+  return (
+    <div className={cn("group relative aspect-[4/3] w-full", className)}>
+      <div className="perspective-distant transform-3d">
+        {/* Animated background glow */}
+        <div className="absolute sm:-inset-8 rounded-3xl bg-gradient-to-r from-primary/10 via-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-all duration-1000 blur-2xl" />
+
+        {/* Main 3D container */}
+        <div className="relative size-full transform-3d group-hover:rotate-x-8 group-hover:rotate-y-12 group-hover:translate-z-16 transition-all duration-700 ease-out">
+          {/* Depth layers for 3D effect */}
+          <div className="absolute inset-0 translate-y-4 translate-x-2 -translate-z-8 rounded-2xl">
+            <div className="size-full rounded-2xl bg-gradient-to-br from-primary/10 via-background/40 to-secondary/10 shadow-xl" />
+          </div>
+
+          {/* Main image container */}
+          <div className="relative z-10 size-full rounded-2xl overflow-hidden shadow-2xl shadow-primary/20">
+            {/* Shimmer effect */}
+            <div
+              className={cn(
+                "absolute inset-0 z-20 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 transition-transform duration-1000 ease-out pointer-events-none",
+                isRight
+                  ? "translate-x-full group-hover:-translate-x-full"
+                  : "-translate-x-full group-hover:translate-x-full"
+              )}
+            />
+
+            {/* Content fade mask */}
+            <div
+              className={cn(
+                "absolute inset-0 z-15 pointer-events-none",
+                isRight
+                  ? "bg-linear-to-l from-background from-0% via-background/85 via-15% to-transparent to-40%"
+                  : "bg-linear-to-r from-background from-0% via-background/85 via-15% to-transparent to-40%"
+              )}
+            />
+
+            {/* Theme-aware images */}
+            <Image
+              src={lightSrc}
+              alt={`${alt} - Light Mode`}
+              width={800}
+              height={600}
+              className={cn(
+                "block size-full object-cover dark:hidden transition-transform duration-700 group-hover:scale-105",
+                isRight ? "object-center" : "object-left"
+              )}
+              loading="lazy"
+            />
+
+            <Image
+              src={darkSrc}
+              alt={`${alt} - Dark Mode`}
+              width={800}
+              height={600}
+              className={cn(
+                "hidden dark:block size-full object-cover transition-transform duration-700 group-hover:scale-105",
+                isRight ? "object-center" : "object-left"
+              )}
+              loading="lazy"
+            />
+
+            {/* Border highlight */}
+            <div className="absolute inset-0 rounded-2xl ring-1 ring-white/20 dark:ring-white/10 group-hover:ring-primary/40 transition-all duration-500" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}