├── src
    ├── app
    │   ├── geist.ttf
    │   ├── favicon.ico
    │   ├── general-sans.ttf
    │   ├── layout.tsx
    │   └── globals.css
    ├── lib
    │   └── utils.ts
    ├── components
    │   ├── ui
    │   │   ├── aspect-ratio.tsx
    │   │   ├── skeleton.tsx
    │   │   ├── collapsible.tsx
    │   │   ├── label.tsx
    │   │   ├── separator.tsx
    │   │   ├── textarea.tsx
    │   │   ├── progress.tsx
    │   │   ├── input.tsx
    │   │   ├── slider.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── badge.tsx
    │   │   ├── switch.tsx
    │   │   ├── tooltip.tsx
    │   │   ├── hover-card.tsx
    │   │   ├── popover.tsx
    │   │   ├── avatar.tsx
    │   │   ├── radio-group.tsx
    │   │   ├── toggle.tsx
    │   │   ├── alert.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── button.tsx
    │   │   ├── toggle-group.tsx
    │   │   ├── card.tsx
    │   │   ├── tabs.tsx
    │   │   ├── accordion.tsx
    │   │   ├── calendar.tsx
    │   │   ├── table.tsx
    │   │   ├── breadcrumb.tsx
    │   │   ├── pagination.tsx
    │   │   ├── dialog.tsx
    │   │   ├── sheet.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── navigation-menu.tsx
    │   │   ├── command.tsx
    │   │   ├── select.tsx
    │   │   ├── carousel.tsx
    │   │   ├── dropdown-menu.tsx
    │   │   ├── context-menu.tsx
    │   │   ├── menubar.tsx
    │   │   └── sidebar.tsx
    │   ├── magicui
    │   │   ├── fadein-card.tsx
    │   │   ├── text-shimmer.tsx
    │   │   ├── marquee.tsx
    │   │   ├── border-beam.tsx
    │   │   └── particles.tsx
    │   ├── mobile-navbar.tsx
    │   └── animated-mobile-navbar.tsx
    └── hooks
    │   └── use-mobile.ts
├── next.config.mjs
├── .prettierrc.json
├── postcss.config.mjs
├── .eslintrc.json
├── components.json
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── tailwind.config.ts


/src/app/geist.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattiapomelli/reweb-template/HEAD/src/app/geist.ttf


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattiapomelli/reweb-template/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/general-sans.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattiapomelli/reweb-template/HEAD/src/app/general-sans.ttf


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "tabWidth": 2,
3 |   "semi": true,
4 |   "singleQuote": false,
5 |   "trailingComma": "all",
6 |   "printWidth": 100
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | 
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 | 
5 | const AspectRatio = AspectRatioPrimitive.Root
6 | 
7 | export { AspectRatio }
8 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"],
 3 |   "settings": {
 4 |     /* Support tailwind rules inside class utility functions */
 5 |     "tailwindcss": {
 6 |       "callees": ["clsx", "cva", "cn"],
 7 |       "config": "tailwind.config.ts"
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/src/hooks/use-mobile.ts:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | const MOBILE_BREAKPOINT = 768;
 4 | 
 5 | export function useIsMobile() {
 6 |   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 7 | 
 8 |   React.useEffect(() => {
 9 |     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
10 |     const onChange = () => {
11 |       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
12 |     };
13 |     mql.addEventListener("change", onChange);
14 |     setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
15 |     return () => mql.removeEventListener("change", onChange);
16 |   }, []);
17 | 
18 |   return !!isMobile;
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 4 | import React from "react";
 5 | 
 6 | const Collapsible = CollapsiblePrimitive.Root;
 7 | 
 8 | const CollapsibleTrigger = React.forwardRef<
 9 |   HTMLButtonElement,
10 |   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
11 | >((props, ref) => (
12 |   <CollapsiblePrimitive.CollapsibleTrigger ref={ref} onClick={props?.onClick} {...props} />
13 | ));
14 | 
15 | CollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName;
16 | 
17 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
18 | 
19 | export { Collapsible, CollapsibleTrigger, CollapsibleContent };


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as LabelPrimitive from "@radix-ui/react-label";
 5 | import { cva, type VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
11 | );
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
16 | >(({ className, ...props }, ref) => (
17 |   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
18 | ));
19 | Label.displayName = LabelPrimitive.Root.displayName;
20 | 
21 | export { Label };
22 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
12 |   <SeparatorPrimitive.Root
13 |     ref={ref}
14 |     decorative={decorative}
15 |     orientation={orientation}
16 |     className={cn(
17 |       "shrink-0 bg-border",
18 |       orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
19 |       className,
20 |     )}
21 |     {...props}
22 |   />
23 | ));
24 | Separator.displayName = SeparatorPrimitive.Root.displayName;
25 | 
26 | export { Separator };
27 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 6 | 
 7 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 8 |   ({ className, ...props }, ref) => {
 9 |     return (
10 |       <textarea
11 |         className={cn(
12 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
13 |           className,
14 |         )}
15 |         ref={ref}
16 |         {...props}
17 |       />
18 |     );
19 |   },
20 | );
21 | Textarea.displayName = "Textarea";
22 | 
23 | export { Textarea };
24 | 


--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
15 |     {...props}
16 |   >
17 |     <ProgressPrimitive.Indicator
18 |       className="size-full flex-1 bg-primary transition-all"
19 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
20 |     />
21 |   </ProgressPrimitive.Root>
22 | ));
23 | Progress.displayName = ProgressPrimitive.Root.displayName;
24 | 
25 | export { Progress };
26 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 6 | 
 7 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 8 |   ({ className, type, ...props }, ref) => {
 9 |     return (
10 |       <input
11 |         type={type}
12 |         className={cn(
13 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className,
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     );
20 |   },
21 | );
22 | Input.displayName = "Input";
23 | 
24 | export { Input };
25 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | 
 3 | import { Inter, Raleway } from "next/font/google";
 4 | import type { Metadata } from "next";
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const fontSans = Inter({ subsets: ["latin"], variable: "--font-sans" });
 8 | 
 9 | const fontHeading = Raleway({
10 |   subsets: ["latin"],
11 |   variable: "--font-heading",
12 | });
13 | 
14 | export const metadata: Metadata = {
15 |   title: "Create Next App",
16 |   description: "Generated by create next app",
17 | };
18 | 
19 | export default function RootLayout({
20 |   children,
21 | }: Readonly<{
22 |   children: React.ReactNode;
23 | }>) {
24 |   return (
25 |     <html lang="en">
26 |       <body
27 |         className={cn(
28 |           "min-h-screen overflow-x-hidden font-sans antialiased",
29 |           fontSans.variable,
30 |           fontHeading.variable,
31 |         )}
32 |       >
33 |         {children}
34 |       </body>
35 |     </html>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/magicui/fadein-card.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion, useAnimation, useInView } from "framer-motion";
 4 | import { useEffect, useId, useRef } from "react";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | export function FadeInCard({
 9 |   children,
10 |   className,
11 | }: {
12 |   children: React.ReactNode;
13 |   className?: string;
14 | }) {
15 |   const id = useId();
16 |   const controls = useAnimation();
17 |   const ref = useRef(null);
18 |   const inView = useInView(ref, { once: true });
19 | 
20 |   useEffect(() => {
21 |     if (inView) {
22 |       controls.start({
23 |         opacity: 1,
24 |         transition: { delay: Math.random() * 2, ease: "easeOut", duration: 1 },
25 |       });
26 |     }
27 |   }, [controls, inView]);
28 | 
29 |   return (
30 |     <motion.div
31 |       key={id}
32 |       ref={ref}
33 |       initial={{ opacity: 0 }}
34 |       animate={controls}
35 |       className={cn("transform-gpu", className)}
36 |     >
37 |       {children}
38 |     </motion.div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/magicui/text-shimmer.tsx:
--------------------------------------------------------------------------------
 1 | import { CSSProperties, FC, ReactNode } from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | interface TextShimmerProps {
 6 |   children: ReactNode;
 7 |   className?: string;
 8 |   shimmerWidth?: number;
 9 | }
10 | 
11 | export function TextShimmer({ children, className, shimmerWidth = 100 }: TextShimmerProps) {
12 |   return (
13 |     <p
14 |       style={
15 |         {
16 |           "--shimmer-width": `${shimmerWidth}px`,
17 |         } as CSSProperties
18 |       }
19 |       // eslint-disable-next-line tailwindcss/no-custom-classname
20 |       className={cn(
21 |         "mx-auto max-w-md text-muted-foreground",
22 | 
23 |         // Shimmer effect
24 |         "animate-shimmer bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shimmer-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
25 | 
26 |         // Shimmer gradient
27 |         "bg-gradient-to-r from-neutral-100 via-black/80 via-50% to-neutral-100 dark:from-neutral-900 dark:via-white/80 dark:to-neutral-900",
28 | 
29 |         className,
30 |       )}
31 |     >
32 |       {children}
33 |     </p>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as SliderPrimitive from "@radix-ui/react-slider";
 4 | import * as React from "react";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative flex w-full touch-none select-none items-center", className)}
15 |     {...props}
16 |   >
17 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
18 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
19 |     </SliderPrimitive.Track>
20 |     <SliderPrimitive.Thumb className="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
21 |   </SliderPrimitive.Root>
22 | ));
23 | Slider.displayName = SliderPrimitive.Root.displayName;
24 | 
25 | export { Slider };
26 | 


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 5 | import { Check } from "lucide-react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
17 |       className,
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
22 |       <Check className="size-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ));
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName;
27 | 
28 | export { Checkbox };
29 | 


--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cva, type VariantProps } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
12 |         secondary:
13 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
14 |         destructive:
15 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
16 |         outline: "text-foreground",
17 |       },
18 |     },
19 |     defaultVariants: {
20 |       variant: "default",
21 |     },
22 |   },
23 | );
24 | 
25 | export interface BadgeProps
26 |   extends React.HTMLAttributes<HTMLDivElement>,
27 |     VariantProps<typeof badgeVariants> {}
28 | 
29 | function Badge({ className, variant, ...props }: BadgeProps) {
30 |   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
31 | }
32 | 
33 | export { Badge, badgeVariants };
34 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
15 |       className,
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ));
27 | Switch.displayName = SwitchPrimitives.Root.displayName;
28 | 
29 | export { Switch };
30 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider;
 9 | 
10 | const Tooltip = TooltipPrimitive.Root;
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className,
24 |     )}
25 |     {...props}
26 |   />
27 | ));
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
31 | 


--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const HoverCard = HoverCardPrimitive.Root
 9 | 
10 | const HoverCardTrigger = HoverCardPrimitive.Trigger
11 | 
12 | const HoverCardContent = React.forwardRef<
13 |   React.ElementRef<typeof HoverCardPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <HoverCardPrimitive.Content
17 |     ref={ref}
18 |     align={align}
19 |     sideOffset={sideOffset}
20 |     className={cn(
21 |       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
22 |       className
23 |     )}
24 |     {...props}
25 |   />
26 | ))
27 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
28 | 
29 | export { HoverCard, HoverCardTrigger, HoverCardContent }
30 | 


--------------------------------------------------------------------------------
/src/components/mobile-navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Menu, X } from "lucide-react";
 4 | import { ReactNode, useEffect, useState } from "react";
 5 | 
 6 | export function MobileNavbar({ children }: { children: ReactNode }) {
 7 |   const [isOpen, setIsOpen] = useState(false);
 8 | 
 9 |   useEffect(() => {
10 |     const overflow = isOpen ? "hidden" : "auto";
11 |     document.documentElement.style.overflow = overflow;
12 |   }, [isOpen]);
13 | 
14 |   useEffect(() => {
15 |     const closeHamburgerNavigation = () => setIsOpen(false);
16 |     window.addEventListener("orientationchange", closeHamburgerNavigation);
17 |     window.addEventListener("resize", closeHamburgerNavigation);
18 | 
19 |     return () => {
20 |       window.removeEventListener("orientationchange", closeHamburgerNavigation);
21 |       window.removeEventListener("resize", closeHamburgerNavigation);
22 |     };
23 |   }, []);
24 | 
25 |   return (
26 |     <>
27 |       <button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
28 |         {isOpen ? <X /> : <Menu />}
29 |       </button>
30 |       {isOpen && (
31 |         <div
32 |           className="fixed inset-0 top-[50px] z-40 size-full overflow-auto bg-black/40 animate-in slide-in-from-bottom-24 md:hidden"
33 |           onClick={() => setIsOpen(false)}
34 |         >
35 |           {children}
36 |         </div>
37 |       )}
38 |     </>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as PopoverPrimitive from "@radix-ui/react-popover";
 4 | import * as React from "react";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Popover = PopoverPrimitive.Root;
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "shadow-popover-default z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |         className,
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ));
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName;
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent };
32 | 


--------------------------------------------------------------------------------
/src/components/magicui/marquee.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | interface MarqueeProps {
 4 |   className?: string;
 5 |   reverse?: boolean;
 6 |   pauseOnHover?: boolean;
 7 |   children?: React.ReactNode;
 8 |   vertical?: boolean;
 9 |   repeat?: number;
10 |   [key: string]: any;
11 | }
12 | 
13 | function Marquee({
14 |   className,
15 |   reverse,
16 |   pauseOnHover = false,
17 |   children,
18 |   vertical = false,
19 |   repeat = 4,
20 |   ...props
21 | }: MarqueeProps) {
22 |   return (
23 |     <div
24 |       {...props}
25 |       className={cn(
26 |         "group flex overflow-hidden [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
27 |         {
28 |           "flex-row": !vertical,
29 |           "flex-col": vertical,
30 |         },
31 |         className,
32 |       )}
33 |     >
34 |       {Array(repeat)
35 |         .fill(0)
36 |         .map((_, i) => (
37 |           <div
38 |             key={i}
39 |             className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
40 |               "animate-marquee flex-row": !vertical,
41 |               "animate-marquee-vertical flex-col": vertical,
42 |               "group-hover:[animation-play-state:paused]": pauseOnHover,
43 |               "[animation-direction:reverse]": reverse,
44 |             })}
45 |           >
46 |             {children}
47 |           </div>
48 |         ))}
49 |     </div>
50 |   );
51 | }
52 | 
53 | export { Marquee };
54 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 222.2 84% 4.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 222.2 84% 4.9%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |     --primary: 222.2 47.4% 11.2%;
17 |     --primary-foreground: 210 40% 98%;
18 | 
19 |     --secondary: 210 40% 96.1%;
20 |     --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |     --muted: 210 40% 96.1%;
23 |     --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |     --accent: 210 40% 96.1%;
26 |     --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 210 40% 98%;
30 | 
31 |     --border: 214.3 31.8% 91.4%;
32 |     --input: 214.3 31.8% 91.4%;
33 |     --ring: 222.2 84% 4.9%;
34 | 
35 |     --sidebar-background: 0 0% 98%;
36 |     --sidebar-foreground: 240 5.3% 26.1%;
37 |     --sidebar-primary: 240 5.9% 10%;
38 |     --sidebar-primary-foreground: 0 0% 98%;
39 |     --sidebar-accent: 240 4.8% 95.9%;
40 |     --sidebar-accent-foreground: 240 5.9% 10%;
41 |     --sidebar-border: 220 13% 91%;
42 |     --sidebar-ring: 217.2 91.2% 59.8%;
43 | 
44 |     --radius: 0.5rem;
45 |   }
46 | }
47 | 
48 | @layer base {
49 |   * {
50 |     @apply border-border;
51 |   }
52 |   body {
53 |     @apply bg-background text-foreground;
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
15 |     {...props}
16 |   />
17 | ));
18 | Avatar.displayName = AvatarPrimitive.Root.displayName;
19 | 
20 | const AvatarImage = React.forwardRef<
21 |   React.ElementRef<typeof AvatarPrimitive.Image>,
22 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
23 | >(({ className, ...props }, ref) => (
24 |   <AvatarPrimitive.Image
25 |     ref={ref}
26 |     className={cn("aspect-square size-full", className)}
27 |     {...props}
28 |   />
29 | ));
30 | AvatarImage.displayName = AvatarPrimitive.Image.displayName;
31 | 
32 | const AvatarFallback = React.forwardRef<
33 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
34 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
35 | >(({ className, ...props }, ref) => (
36 |   <AvatarPrimitive.Fallback
37 |     ref={ref}
38 |     className={cn("flex size-full items-center justify-center rounded-full bg-muted", className)}
39 |     {...props}
40 |   />
41 | ));
42 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
43 | 
44 | export { Avatar, AvatarImage, AvatarFallback };
45 | 


--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 5 | import { Circle } from "lucide-react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
14 | });
15 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
16 | 
17 | const RadioGroupItem = React.forwardRef<
18 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
19 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
20 | >(({ className, ...props }, ref) => {
21 |   return (
22 |     <RadioGroupPrimitive.Item
23 |       ref={ref}
24 |       className={cn(
25 |         "aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
26 |         className,
27 |       )}
28 |       {...props}
29 |     >
30 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
31 |         <Circle className="size-2.5 fill-current text-current" />
32 |       </RadioGroupPrimitive.Indicator>
33 |     </RadioGroupPrimitive.Item>
34 |   );
35 | });
36 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
37 | 
38 | export { RadioGroup, RadioGroupItem };
39 | 


--------------------------------------------------------------------------------
/src/components/animated-mobile-navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { AnimatePresence } from "framer-motion";
 4 | import { AlignJustify, XIcon } from "lucide-react";
 5 | import { useEffect, useState, forwardRef } from "react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | export const AnimatedMobileNavbar = forwardRef<
10 |   HTMLButtonElement,
11 |   { children: React.ReactNode; className?: string }
12 | >(({ children, className, ...props }, ref) => {
13 |   const [isOpen, setIsOpen] = useState(false);
14 | 
15 |   useEffect(() => {
16 |     const overflow = isOpen ? "hidden" : "auto";
17 |     document.documentElement.style.overflow = overflow;
18 |   }, [isOpen]);
19 | 
20 |   useEffect(() => {
21 |     const closeHamburgerNavigation = () => setIsOpen(false);
22 |     window.addEventListener("orientationchange", closeHamburgerNavigation);
23 |     window.addEventListener("resize", closeHamburgerNavigation);
24 | 
25 |     return () => {
26 |       window.removeEventListener("orientationchange", closeHamburgerNavigation);
27 |       window.removeEventListener("resize", closeHamburgerNavigation);
28 |     };
29 |   }, []);
30 | 
31 |   return (
32 |     <>
33 |       <button
34 |         {...props}
35 |         className={cn("md:hidden", className)}
36 |         onClick={() => setIsOpen((open) => !open)}
37 |         ref={ref}
38 |       >
39 |         <span className="sr-only">Toggle menu</span>
40 |         {isOpen ? <XIcon /> : <AlignJustify />}
41 |       </button>
42 |       <AnimatePresence>{isOpen ? children : null}</AnimatePresence>
43 |     </>
44 |   );
45 | });
46 | 
47 | AnimatedMobileNavbar.displayName = "AnimatedMobileNavbar";
48 | 


--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TogglePrimitive from "@radix-ui/react-toggle";
 5 | import { cva, type VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const toggleVariants = cva(
10 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
11 |   {
12 |     variants: {
13 |       variant: {
14 |         default: "bg-transparent",
15 |         outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
16 |       },
17 |       size: {
18 |         default: "h-10 px-3",
19 |         sm: "h-9 px-2.5",
20 |         lg: "h-11 px-5",
21 |       },
22 |     },
23 |     defaultVariants: {
24 |       variant: "default",
25 |       size: "default",
26 |     },
27 |   },
28 | );
29 | 
30 | const Toggle = React.forwardRef<
31 |   React.ElementRef<typeof TogglePrimitive.Root>,
32 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
33 | >(({ className, variant, size, ...props }, ref) => (
34 |   <TogglePrimitive.Root
35 |     ref={ref}
36 |     className={cn(toggleVariants({ variant, size, className }))}
37 |     {...props}
38 |   />
39 | ));
40 | 
41 | Toggle.displayName = TogglePrimitive.Root.displayName;
42 | 
43 | export { Toggle, toggleVariants };
44 | 


--------------------------------------------------------------------------------
/src/components/magicui/border-beam.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | interface BorderBeamProps {
 4 |   className?: string;
 5 |   size?: number;
 6 |   duration?: number;
 7 |   borderWidth?: number;
 8 |   anchor?: number;
 9 |   colorFrom?: string;
10 |   colorTo?: string;
11 |   delay?: number;
12 | }
13 | 
14 | export const BorderBeam = ({
15 |   className,
16 |   size = 100,
17 |   duration = 15,
18 |   anchor = 90,
19 |   borderWidth = 1.5,
20 |   colorFrom = "#ffaa40",
21 |   colorTo = "#9c40ff",
22 |   delay = 0,
23 | }: BorderBeamProps) => {
24 |   return (
25 |     <div
26 |       style={
27 |         {
28 |           "--size": size,
29 |           "--duration": duration,
30 |           "--anchor": anchor,
31 |           "--border-width": borderWidth,
32 |           "--color-from": colorFrom,
33 |           "--color-to": colorTo,
34 |           "--delay": `-${delay}s`,
35 |         } as React.CSSProperties
36 |       }
37 |       // eslint-disable-next-line tailwindcss/no-contradicting-classname
38 |       className={cn(
39 |         "absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
40 | 
41 |         // mask styles
42 |         "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
43 | 
44 |         // pseudo styles
45 |         "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
46 |         className,
47 |       )}
48 |     />
49 |   );
50 | };
51 | 


--------------------------------------------------------------------------------
/src/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cva, type VariantProps } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   },
20 | );
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
27 | ));
28 | Alert.displayName = "Alert";
29 | 
30 | const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
31 |   ({ className, ...props }, ref) => (
32 |     <h5
33 |       ref={ref}
34 |       className={cn("mb-1 font-medium leading-none tracking-tight", className)}
35 |       {...props}
36 |     />
37 |   ),
38 | );
39 | AlertTitle.displayName = "AlertTitle";
40 | 
41 | const AlertDescription = React.forwardRef<
42 |   HTMLParagraphElement,
43 |   React.HTMLAttributes<HTMLParagraphElement>
44 | >(({ className, ...props }, ref) => (
45 |   <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
46 | ));
47 | AlertDescription.displayName = "AlertDescription";
48 | 
49 | export { Alert, AlertTitle, AlertDescription };
50 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14 |         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
15 |         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
16 |         ghost: "hover:bg-accent hover:text-accent-foreground",
17 |         link: "text-primary underline-offset-4 hover:underline",
18 |       },
19 |       size: {
20 |         default: "h-10 px-4 py-2",
21 |         sm: "h-9 rounded-md px-3",
22 |         lg: "h-11 rounded-md px-8",
23 |         icon: "size-10",
24 |       },
25 |     },
26 |     defaultVariants: {
27 |       variant: "default",
28 |       size: "default",
29 |     },
30 |   },
31 | );
32 | 
33 | export interface ButtonProps
34 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
35 |     VariantProps<typeof buttonVariants> {
36 |   asChild?: boolean;
37 | }
38 | 
39 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
40 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
41 |     const Comp = asChild ? Slot : "button";
42 |     return (
43 |       <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
44 |     );
45 |   },
46 | );
47 | Button.displayName = "Button";
48 | 
49 | export { Button, buttonVariants };
50 | 


--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 5 | import { type VariantProps } from "class-variance-authority";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | import { toggleVariants } from "@/components/ui/toggle";
 9 | 
10 | const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
11 |   size: "default",
12 |   variant: "default",
13 | });
14 | 
15 | const ToggleGroup = React.forwardRef<
16 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
17 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
18 |     VariantProps<typeof toggleVariants>
19 | >(({ className, variant, size, children, ...props }, ref) => (
20 |   <ToggleGroupPrimitive.Root
21 |     ref={ref}
22 |     className={cn("flex items-center justify-center gap-1", className)}
23 |     {...props}
24 |   >
25 |     <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
26 |   </ToggleGroupPrimitive.Root>
27 | ));
28 | 
29 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
30 | 
31 | const ToggleGroupItem = React.forwardRef<
32 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
33 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
34 |     VariantProps<typeof toggleVariants>
35 | >(({ className, children, variant, size, ...props }, ref) => {
36 |   const context = React.useContext(ToggleGroupContext);
37 | 
38 |   return (
39 |     <ToggleGroupPrimitive.Item
40 |       ref={ref}
41 |       className={cn(
42 |         toggleVariants({
43 |           variant: context.variant || variant,
44 |           size: context.size || size,
45 |         }),
46 |         className,
47 |       )}
48 |       {...props}
49 |     >
50 |       {children}
51 |     </ToggleGroupPrimitive.Item>
52 |   );
53 | });
54 | 
55 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
56 | 
57 | export { ToggleGroup, ToggleGroupItem };
58 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
 6 |   ({ className, ...props }, ref) => (
 7 |     <div
 8 |       ref={ref}
 9 |       className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
10 |       {...props}
11 |     />
12 |   ),
13 | );
14 | Card.displayName = "Card";
15 | 
16 | const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
17 |   ({ className, ...props }, ref) => (
18 |     <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
19 |   ),
20 | );
21 | CardHeader.displayName = "CardHeader";
22 | 
23 | const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
24 |   ({ className, ...props }, ref) => (
25 |     <h3
26 |       ref={ref}
27 |       className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
28 |       {...props}
29 |     />
30 |   ),
31 | );
32 | CardTitle.displayName = "CardTitle";
33 | 
34 | const CardDescription = React.forwardRef<
35 |   HTMLParagraphElement,
36 |   React.HTMLAttributes<HTMLParagraphElement>
37 | >(({ className, ...props }, ref) => (
38 |   <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
39 | ));
40 | CardDescription.displayName = "CardDescription";
41 | 
42 | const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
43 |   ({ className, ...props }, ref) => (
44 |     <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
45 |   ),
46 | );
47 | CardContent.displayName = "CardContent";
48 | 
49 | const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
50 |   ({ className, ...props }, ref) => (
51 |     <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
52 |   ),
53 | );
54 | CardFooter.displayName = "CardFooter";
55 | 
56 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
57 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Tabs = TabsPrimitive.Root;
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className,
19 |     )}
20 |     {...props}
21 |   />
22 | ));
23 | TabsList.displayName = TabsPrimitive.List.displayName;
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className,
34 |     )}
35 |     {...props}
36 |   />
37 | ));
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className,
49 |     )}
50 |     {...props}
51 |   />
52 | ));
53 | TabsContent.displayName = TabsPrimitive.Content.displayName;
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent };
56 | 


--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion";
 5 | import { ChevronDown } from "lucide-react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const Accordion = AccordionPrimitive.Root;
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
16 | ));
17 | AccordionItem.displayName = "AccordionItem";
18 | 
19 | const AccordionTrigger = React.forwardRef<
20 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
21 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
22 | >(({ className, children, ...props }, ref) => (
23 |   <AccordionPrimitive.Header className="flex">
24 |     <AccordionPrimitive.Trigger
25 |       ref={ref}
26 |       className={cn(
27 |         "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
28 |         className,
29 |       )}
30 |       {...props}
31 |     >
32 |       {children}
33 |       <ChevronDown className="size-4 shrink-0 transition-transform duration-200" />
34 |     </AccordionPrimitive.Trigger>
35 |   </AccordionPrimitive.Header>
36 | ));
37 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
38 | 
39 | const AccordionContent = React.forwardRef<
40 |   React.ElementRef<typeof AccordionPrimitive.Content>,
41 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
42 | >(({ className, children, ...props }, ref) => (
43 |   <AccordionPrimitive.Content
44 |     ref={ref}
45 |     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
46 |     {...props}
47 |   >
48 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
49 |   </AccordionPrimitive.Content>
50 | ));
51 | 
52 | AccordionContent.displayName = AccordionPrimitive.Content.displayName;
53 | 
54 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reweb-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-accordion": "^1.1.2",
13 |     "@radix-ui/react-alert-dialog": "^1.1.2",
14 |     "@radix-ui/react-aspect-ratio": "^1.1.0",
15 |     "@radix-ui/react-avatar": "^1.1.0",
16 |     "@radix-ui/react-checkbox": "^1.1.1",
17 |     "@radix-ui/react-collapsible": "^1.1.1",
18 |     "@radix-ui/react-context-menu": "^2.2.2",
19 |     "@radix-ui/react-dialog": "^1.1.1",
20 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
21 |     "@radix-ui/react-hover-card": "^1.1.2",
22 |     "@radix-ui/react-label": "^2.1.0",
23 |     "@radix-ui/react-menubar": "^1.1.2",
24 |     "@radix-ui/react-navigation-menu": "^1.2.0",
25 |     "@radix-ui/react-popover": "^1.1.2",
26 |     "@radix-ui/react-progress": "^1.1.0",
27 |     "@radix-ui/react-radio-group": "^1.2.0",
28 |     "@radix-ui/react-scroll-area": "^1.2.0",
29 |     "@radix-ui/react-select": "^2.1.1",
30 |     "@radix-ui/react-separator": "^1.1.0",
31 |     "@radix-ui/react-slider": "^1.2.0",
32 |     "@radix-ui/react-slot": "^1.0.2",
33 |     "@radix-ui/react-switch": "^1.1.0",
34 |     "@radix-ui/react-tabs": "^1.1.0",
35 |     "@radix-ui/react-toggle": "^1.1.0",
36 |     "@radix-ui/react-toggle-group": "^1.1.0",
37 |     "@radix-ui/react-tooltip": "^1.1.0",
38 |     "class-variance-authority": "^0.7.0",
39 |     "clsx": "^2.1.1",
40 |     "cmdk": "1.0.0",
41 |     "date-fns": "^4.1.0",
42 |     "embla-carousel-react": "^8.1.6",
43 |     "framer-motion": "^11.3.28",
44 |     "lucide-react": "^0.381.0",
45 |     "next": "14.2.3",
46 |     "react": "^18",
47 |     "react-day-picker": "8.10.1",
48 |     "react-dom": "^18",
49 |     "tailwind-merge": "^2.3.0",
50 |     "tailwindcss-animate": "^1.0.7"
51 |   },
52 |   "devDependencies": {
53 |     "@types/node": "^20",
54 |     "@types/react": "^18",
55 |     "@types/react-dom": "^18",
56 |     "eslint": "^8",
57 |     "eslint-config-next": "14.2.3",
58 |     "eslint-plugin-tailwindcss": "^3.17.0",
59 |     "postcss": "^8",
60 |     "prettier": "^3.2.5",
61 |     "tailwindcss": "^3.4.16",
62 |     "typescript": "^5"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ChevronLeft, ChevronRight } from "lucide-react"
 5 | import { DayPicker } from "react-day-picker"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | import { buttonVariants } from "@/components/ui/button"
 9 | 
10 | export type CalendarProps = React.ComponentProps<typeof DayPicker>
11 | 
12 | function Calendar({
13 |   className,
14 |   classNames,
15 |   showOutsideDays = true,
16 |   ...props
17 | }: CalendarProps) {
18 |   return (
19 |     <DayPicker
20 |       showOutsideDays={showOutsideDays}
21 |       className={cn("p-3", className)}
22 |       classNames={{
23 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
24 |         month: "space-y-4",
25 |         caption: "flex justify-center pt-1 relative items-center",
26 |         caption_label: "text-sm font-medium",
27 |         nav: "space-x-1 flex items-center",
28 |         nav_button: cn(
29 |           buttonVariants({ variant: "outline" }),
30 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
31 |         ),
32 |         nav_button_previous: "absolute left-1",
33 |         nav_button_next: "absolute right-1",
34 |         table: "w-full border-collapse space-y-1",
35 |         head_row: "flex",
36 |         head_cell:
37 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
38 |         row: "flex w-full mt-2",
39 |         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
40 |         day: cn(
41 |           buttonVariants({ variant: "ghost" }),
42 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
43 |         ),
44 |         day_range_end: "day-range-end",
45 |         day_selected:
46 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
47 |         day_today: "bg-accent text-accent-foreground",
48 |         day_outside:
49 |           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
50 |         day_disabled: "text-muted-foreground opacity-50",
51 |         day_range_middle:
52 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
53 |         day_hidden: "invisible",
54 |         ...classNames,
55 |       }}
56 |       components={{
57 |         IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
58 |         IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
59 |       }}
60 |       {...props}
61 |     />
62 |   )
63 | }
64 | Calendar.displayName = "Calendar"
65 | 
66 | export { Calendar }
67 | 


--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
 6 |   ({ className, ...props }, ref) => (
 7 |     <div className="relative w-full overflow-auto">
 8 |       <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
 9 |     </div>
10 |   ),
11 | );
12 | Table.displayName = "Table";
13 | 
14 | const TableHeader = React.forwardRef<
15 |   HTMLTableSectionElement,
16 |   React.HTMLAttributes<HTMLTableSectionElement>
17 | >(({ className, ...props }, ref) => (
18 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
19 | ));
20 | TableHeader.displayName = "TableHeader";
21 | 
22 | const TableBody = React.forwardRef<
23 |   HTMLTableSectionElement,
24 |   React.HTMLAttributes<HTMLTableSectionElement>
25 | >(({ className, ...props }, ref) => (
26 |   <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
27 | ));
28 | TableBody.displayName = "TableBody";
29 | 
30 | const TableFooter = React.forwardRef<
31 |   HTMLTableSectionElement,
32 |   React.HTMLAttributes<HTMLTableSectionElement>
33 | >(({ className, ...props }, ref) => (
34 |   <tfoot
35 |     ref={ref}
36 |     className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
37 |     {...props}
38 |   />
39 | ));
40 | TableFooter.displayName = "TableFooter";
41 | 
42 | const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
43 |   ({ className, ...props }, ref) => (
44 |     <tr
45 |       ref={ref}
46 |       className={cn(
47 |         "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
48 |         className,
49 |       )}
50 |       {...props}
51 |     />
52 |   ),
53 | );
54 | TableRow.displayName = "TableRow";
55 | 
56 | const TableHead = React.forwardRef<
57 |   HTMLTableCellElement,
58 |   React.ThHTMLAttributes<HTMLTableCellElement>
59 | >(({ className, ...props }, ref) => (
60 |   <th
61 |     ref={ref}
62 |     className={cn(
63 |       "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
64 |       className,
65 |     )}
66 |     {...props}
67 |   />
68 | ));
69 | TableHead.displayName = "TableHead";
70 | 
71 | const TableCell = React.forwardRef<
72 |   HTMLTableCellElement,
73 |   React.TdHTMLAttributes<HTMLTableCellElement>
74 | >(({ className, ...props }, ref) => (
75 |   <td
76 |     ref={ref}
77 |     className={cn(
78 |       "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
79 |       className,
80 |     )}
81 |     {...props}
82 |   />
83 | ));
84 | TableCell.displayName = "TableCell";
85 | 
86 | const TableCaption = React.forwardRef<
87 |   HTMLTableCaptionElement,
88 |   React.HTMLAttributes<HTMLTableCaptionElement>
89 | >(({ className, ...props }, ref) => (
90 |   <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
91 | ));
92 | TableCaption.displayName = "TableCaption";
93 | 
94 | export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
95 | 


--------------------------------------------------------------------------------
/src/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import { Slot } from "@radix-ui/react-slot";
  2 | import { ChevronRight, MoreHorizontal } from "lucide-react";
  3 | import * as React from "react";
  4 | 
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | const Breadcrumb = React.forwardRef<
  8 |   HTMLElement,
  9 |   React.ComponentPropsWithoutRef<"nav"> & {
 10 |     separator?: React.ReactNode;
 11 |   }
 12 | >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
 13 | Breadcrumb.displayName = "Breadcrumb";
 14 | 
 15 | const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
 16 |   ({ className, ...props }, ref) => (
 17 |     <ol
 18 |       ref={ref}
 19 |       className={cn(
 20 |         "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 21 |         className,
 22 |       )}
 23 |       {...props}
 24 |     />
 25 |   ),
 26 | );
 27 | BreadcrumbList.displayName = "BreadcrumbList";
 28 | 
 29 | const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
 30 |   ({ className, ...props }, ref) => (
 31 |     <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
 32 |   ),
 33 | );
 34 | BreadcrumbItem.displayName = "BreadcrumbItem";
 35 | 
 36 | const BreadcrumbLink = React.forwardRef<
 37 |   HTMLAnchorElement,
 38 |   React.ComponentPropsWithoutRef<"a"> & {
 39 |     asChild?: boolean;
 40 |   }
 41 | >(({ asChild, className, ...props }, ref) => {
 42 |   const Comp = asChild ? Slot : "a";
 43 | 
 44 |   return (
 45 |     <Comp
 46 |       ref={ref}
 47 |       className={cn("transition-colors hover:text-foreground", className)}
 48 |       {...props}
 49 |     />
 50 |   );
 51 | });
 52 | BreadcrumbLink.displayName = "BreadcrumbLink";
 53 | 
 54 | const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
 55 |   ({ className, ...props }, ref) => (
 56 |     <span
 57 |       ref={ref}
 58 |       role="link"
 59 |       aria-disabled="true"
 60 |       aria-current="page"
 61 |       className={cn("font-normal text-foreground", className)}
 62 |       {...props}
 63 |     />
 64 |   ),
 65 | );
 66 | BreadcrumbPage.displayName = "BreadcrumbPage";
 67 | 
 68 | const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
 69 |   <li
 70 |     role="presentation"
 71 |     aria-hidden="true"
 72 |     className={cn("[&>svg]:size-3.5", className)}
 73 |     {...props}
 74 |   >
 75 |     {children ?? <ChevronRight />}
 76 |   </li>
 77 | );
 78 | BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 79 | 
 80 | const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
 81 |   <span
 82 |     role="presentation"
 83 |     aria-hidden="true"
 84 |     className={cn("flex size-9 items-center justify-center", className)}
 85 |     {...props}
 86 |   >
 87 |     <MoreHorizontal className="size-4" />
 88 |     <span className="sr-only">More</span>
 89 |   </span>
 90 | );
 91 | BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 92 | 
 93 | export {
 94 |   Breadcrumb,
 95 |   BreadcrumbList,
 96 |   BreadcrumbItem,
 97 |   BreadcrumbLink,
 98 |   BreadcrumbPage,
 99 |   BreadcrumbSeparator,
100 |   BreadcrumbEllipsis,
101 | };


--------------------------------------------------------------------------------
/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
  2 | import * as React from "react";
  3 | 
  4 | import { ButtonProps, buttonVariants } from "@/components/ui/button";
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | const Pagination = React.forwardRef<HTMLElement, React.ComponentProps<"nav">>(
  8 |   ({ className, ...props }, ref) => (
  9 |     <nav
 10 |       ref={ref}
 11 |       role="navigation"
 12 |       aria-label="pagination"
 13 |       className={cn("mx-auto flex w-full justify-center", className)}
 14 |       {...props}
 15 |     />
 16 |   ),
 17 | );
 18 | Pagination.displayName = "Pagination";
 19 | 
 20 | const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
 21 |   ({ className, ...props }, ref) => (
 22 |     <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
 23 |   ),
 24 | );
 25 | PaginationContent.displayName = "PaginationContent";
 26 | 
 27 | const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
 28 |   ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />,
 29 | );
 30 | PaginationItem.displayName = "PaginationItem";
 31 | 
 32 | type PaginationLinkProps = {
 33 |   isActive?: boolean;
 34 | } & Pick<ButtonProps, "size"> &
 35 |   React.ComponentProps<"a">;
 36 | 
 37 | const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
 38 |   ({ className, isActive, size = "icon", ...props }, ref) => (
 39 |     <a
 40 |       ref={ref}
 41 |       aria-current={isActive ? "page" : undefined}
 42 |       className={cn(
 43 |         buttonVariants({
 44 |           variant: isActive ? "outline" : "ghost",
 45 |           size,
 46 |         }),
 47 |         className,
 48 |       )}
 49 |       {...props}
 50 |     />
 51 |   ),
 52 | );
 53 | PaginationLink.displayName = "PaginationLink";
 54 | 
 55 | const PaginationPrevious = React.forwardRef<
 56 |   HTMLAnchorElement,
 57 |   React.ComponentProps<typeof PaginationLink>
 58 | >(({ className, ...props }, ref) => (
 59 |   <PaginationLink
 60 |     ref={ref}
 61 |     aria-label="Go to previous page"
 62 |     size="default"
 63 |     className={cn("gap-1 pl-2.5", className)}
 64 |     {...props}
 65 |   >
 66 |     <ChevronLeft className="size-4" />
 67 |     <span>Previous</span>
 68 |   </PaginationLink>
 69 | ));
 70 | PaginationPrevious.displayName = "PaginationPrevious";
 71 | 
 72 | const PaginationNext = React.forwardRef<
 73 |   HTMLAnchorElement,
 74 |   React.ComponentProps<typeof PaginationLink>
 75 | >(({ className, ...props }, ref) => (
 76 |   <PaginationLink
 77 |     ref={ref}
 78 |     aria-label="Go to next page"
 79 |     size="default"
 80 |     className={cn("gap-1 pr-2.5", className)}
 81 |     {...props}
 82 |   >
 83 |     <span>Next</span>
 84 |     <ChevronRight className="size-4" />
 85 |   </PaginationLink>
 86 | ));
 87 | PaginationNext.displayName = "PaginationNext";
 88 | 
 89 | const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentProps<"span">>(
 90 |   ({ className, ...props }, ref) => (
 91 |     <span
 92 |       ref={ref}
 93 |       aria-hidden
 94 |       className={cn("flex size-9 items-center justify-center", className)}
 95 |       {...props}
 96 |     >
 97 |       <MoreHorizontal className="size-4" />
 98 |       <span className="sr-only">More pages</span>
 99 |     </span>
100 |   ),
101 | );
102 | PaginationEllipsis.displayName = "PaginationEllipsis";
103 | 
104 | export {
105 |   Pagination,
106 |   PaginationContent,
107 |   PaginationEllipsis,
108 |   PaginationItem,
109 |   PaginationLink,
110 |   PaginationNext,
111 |   PaginationPrevious,
112 | };
113 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as SheetPrimitive from "@radix-ui/react-dialog";
  4 | import { cva, type VariantProps } from "class-variance-authority";
  5 | import { X } from "lucide-react";
  6 | import * as React from "react";
  7 | 
  8 | import { cn } from "@/lib/utils";
  9 | 
 10 | const Sheet = SheetPrimitive.Root;
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger;
 13 | 
 14 | const SheetClose = SheetPrimitive.Close;
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal;
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className,
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ));
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   },
 50 | );
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
 63 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 64 |         <X className="size-4" />
 65 |         <span className="sr-only">Close</span>
 66 |       </SheetPrimitive.Close>
 67 |       {children}
 68 |     </SheetPrimitive.Content>
 69 |   </SheetPortal>
 70 | ));
 71 | SheetContent.displayName = SheetPrimitive.Content.displayName;
 72 | 
 73 | const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
 75 | );
 76 | SheetHeader.displayName = "SheetHeader";
 77 | 
 78 | const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 79 |   <div
 80 |     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
 81 |     {...props}
 82 |   />
 83 | );
 84 | SheetFooter.displayName = "SheetFooter";
 85 | 
 86 | const SheetTitle = React.forwardRef<
 87 |   React.ElementRef<typeof SheetPrimitive.Title>,
 88 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 89 | >(({ className, ...props }, ref) => (
 90 |   <SheetPrimitive.Title
 91 |     ref={ref}
 92 |     className={cn("text-lg font-semibold text-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ));
 96 | SheetTitle.displayName = SheetPrimitive.Title.displayName;
 97 | 
 98 | const SheetDescription = React.forwardRef<
 99 |   React.ElementRef<typeof SheetPrimitive.Description>,
100 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
101 | >(({ className, ...props }, ref) => (
102 |   <SheetPrimitive.Description
103 |     ref={ref}
104 |     className={cn("text-sm text-muted-foreground", className)}
105 |     {...props}
106 |   />
107 | ));
108 | SheetDescription.displayName = SheetPrimitive.Description.displayName;
109 | 
110 | export {
111 |   Sheet,
112 |   SheetPortal,
113 |   SheetOverlay,
114 |   SheetTrigger,
115 |   SheetClose,
116 |   SheetContent,
117 |   SheetHeader,
118 |   SheetFooter,
119 |   SheetTitle,
120 |   SheetDescription,
121 | };
122 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { buttonVariants } from "@/components/ui/button"
  8 | 
  9 | const AlertDialog = AlertDialogPrimitive.Root
 10 | 
 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 12 | 
 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 14 | 
 15 | const AlertDialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <AlertDialogPrimitive.Overlay
 20 |     className={cn(
 21 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 22 |       className
 23 |     )}
 24 |     {...props}
 25 |     ref={ref}
 26 |   />
 27 | ))
 28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 29 | 
 30 | const AlertDialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 33 | >(({ className, ...props }, ref) => (
 34 |   <AlertDialogPortal>
 35 |     <AlertDialogOverlay />
 36 |     <AlertDialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   </AlertDialogPortal>
 45 | ))
 46 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 47 | 
 48 | const AlertDialogHeader = ({
 49 |   className,
 50 |   ...props
 51 | }: React.HTMLAttributes<HTMLDivElement>) => (
 52 |   <div
 53 |     className={cn(
 54 |       "flex flex-col space-y-2 text-center sm:text-left",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | AlertDialogHeader.displayName = "AlertDialogHeader"
 61 | 
 62 | const AlertDialogFooter = ({
 63 |   className,
 64 |   ...props
 65 | }: React.HTMLAttributes<HTMLDivElement>) => (
 66 |   <div
 67 |     className={cn(
 68 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 69 |       className
 70 |     )}
 71 |     {...props}
 72 |   />
 73 | )
 74 | AlertDialogFooter.displayName = "AlertDialogFooter"
 75 | 
 76 | const AlertDialogTitle = React.forwardRef<
 77 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 78 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 79 | >(({ className, ...props }, ref) => (
 80 |   <AlertDialogPrimitive.Title
 81 |     ref={ref}
 82 |     className={cn("text-lg font-semibold", className)}
 83 |     {...props}
 84 |   />
 85 | ))
 86 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 87 | 
 88 | const AlertDialogDescription = React.forwardRef<
 89 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 90 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 91 | >(({ className, ...props }, ref) => (
 92 |   <AlertDialogPrimitive.Description
 93 |     ref={ref}
 94 |     className={cn("text-sm text-muted-foreground", className)}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | AlertDialogDescription.displayName =
 99 |   AlertDialogPrimitive.Description.displayName
100 | 
101 | const AlertDialogAction = React.forwardRef<
102 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
103 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
104 | >(({ className, ...props }, ref) => (
105 |   <AlertDialogPrimitive.Action
106 |     ref={ref}
107 |     className={cn(buttonVariants(), className)}
108 |     {...props}
109 |   />
110 | ))
111 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112 | 
113 | const AlertDialogCancel = React.forwardRef<
114 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
115 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
116 | >(({ className, ...props }, ref) => (
117 |   <AlertDialogPrimitive.Cancel
118 |     ref={ref}
119 |     className={cn(
120 |       buttonVariants({ variant: "outline" }),
121 |       "mt-2 sm:mt-0",
122 |       className
123 |     )}
124 |     {...props}
125 |   />
126 | ))
127 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128 | 
129 | export {
130 |   AlertDialog,
131 |   AlertDialogPortal,
132 |   AlertDialogOverlay,
133 |   AlertDialogTrigger,
134 |   AlertDialogContent,
135 |   AlertDialogHeader,
136 |   AlertDialogFooter,
137 |   AlertDialogTitle,
138 |   AlertDialogDescription,
139 |   AlertDialogAction,
140 |   AlertDialogCancel,
141 | }
142 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import type { Config } from "tailwindcss";
  2 | 
  3 | import { fontFamily } from "tailwindcss/defaultTheme";
  4 | 
  5 | const config = {
  6 |   darkMode: ["class"],
  7 |   content: [
  8 |     "./pages/**/*.{ts,tsx}",
  9 |     "./components/**/*.{ts,tsx}",
 10 |     "./app/**/*.{ts,tsx}",
 11 |     "./src/**/*.{ts,tsx}",
 12 |   ],
 13 |   prefix: "",
 14 |   theme: {
 15 |     container: {
 16 |       center: true,
 17 |       padding: "2rem",
 18 |       screens: {
 19 |         "2xl": "1200px",
 20 |       },
 21 |     },
 22 |     extend: {
 23 |       colors: {
 24 |         border: "hsl(var(--border))",
 25 |         input: "hsl(var(--input))",
 26 |         ring: "hsl(var(--ring))",
 27 |         background: "hsl(var(--background))",
 28 |         foreground: "hsl(var(--foreground))",
 29 |         primary: {
 30 |           DEFAULT: "hsl(var(--primary))",
 31 |           foreground: "hsl(var(--primary-foreground))",
 32 |         },
 33 |         secondary: {
 34 |           DEFAULT: "hsl(var(--secondary))",
 35 |           foreground: "hsl(var(--secondary-foreground))",
 36 |         },
 37 |         destructive: {
 38 |           DEFAULT: "hsl(var(--destructive))",
 39 |           foreground: "hsl(var(--destructive-foreground))",
 40 |         },
 41 |         muted: {
 42 |           DEFAULT: "hsl(var(--muted))",
 43 |           foreground: "hsl(var(--muted-foreground))",
 44 |         },
 45 |         accent: {
 46 |           DEFAULT: "hsl(var(--accent))",
 47 |           foreground: "hsl(var(--accent-foreground))",
 48 |         },
 49 |         popover: {
 50 |           DEFAULT: "hsl(var(--popover))",
 51 |           foreground: "hsl(var(--popover-foreground))",
 52 |         },
 53 |         card: {
 54 |           DEFAULT: "hsl(var(--card))",
 55 |           foreground: "hsl(var(--card-foreground))",
 56 |         },
 57 |         sidebar: {
 58 |           DEFAULT: "hsl(var(--sidebar-background))",
 59 |           foreground: "hsl(var(--sidebar-foreground))",
 60 |           primary: "hsl(var(--sidebar-primary))",
 61 |           "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
 62 |           accent: "hsl(var(--sidebar-accent))",
 63 |           "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
 64 |           border: "hsl(var(--sidebar-border))",
 65 |           ring: "hsl(var(--sidebar-ring))",
 66 |         },
 67 |       },
 68 |       borderRadius: {
 69 |         lg: "var(--radius)",
 70 |         md: "calc(var(--radius) - 2px)",
 71 |         sm: "calc(var(--radius) - 4px)",
 72 |       },
 73 |       keyframes: {
 74 |         "accordion-down": {
 75 |           from: { height: "0" },
 76 |           to: { height: "var(--radix-accordion-content-height)" },
 77 |         },
 78 |         "accordion-up": {
 79 |           from: { height: "var(--radix-accordion-content-height)" },
 80 |           to: { height: "0" },
 81 |         },
 82 |         "border-beam": {
 83 |           "100%": {
 84 |             "offset-distance": "100%",
 85 |           },
 86 |         },
 87 |         "image-glow": {
 88 |           "0%": {
 89 |             opacity: "0",
 90 |             "animation-timing-function": "cubic-bezier(0.74, 0.25, 0.76, 1)",
 91 |           },
 92 |           "10%": {
 93 |             opacity: "0.7",
 94 |             "animation-timing-function": "cubic-bezier(0.12, 0.01, 0.08, 0.99)",
 95 |           },
 96 |           "100%": {
 97 |             opacity: "0.4",
 98 |           },
 99 |         },
100 |         "fade-in": {
101 |           from: { opacity: "0", transform: "translateY(-10px)" },
102 |           to: { opacity: "1", transform: "none" },
103 |         },
104 |         "fade-up": {
105 |           from: { opacity: "0", transform: "translateY(20px)" },
106 |           to: { opacity: "1", transform: "none" },
107 |         },
108 |         shimmer: {
109 |           "0%, 90%, 100%": {
110 |             "background-position": "calc(-100% - var(--shimmer-width)) 0",
111 |           },
112 |           "30%, 60%": {
113 |             "background-position": "calc(100% + var(--shimmer-width)) 0",
114 |           },
115 |         },
116 |         marquee: {
117 |           from: { transform: "translateX(0)" },
118 |           to: { transform: "translateX(calc(-100% - var(--gap)))" },
119 |         },
120 |         "marquee-vertical": {
121 |           from: { transform: "translateY(0)" },
122 |           to: { transform: "translateY(calc(-100% - var(--gap)))" },
123 |         },
124 |       },
125 |       animation: {
126 |         "accordion-down": "accordion-down 0.2s ease-out",
127 |         "accordion-up": "accordion-up 0.2s ease-out",
128 |         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
129 |         "image-glow": "image-glow 4100ms 600ms ease-out forwards",
130 |         "fade-in": "fade-in 1000ms var(--animation-delay, 0ms) ease forwards",
131 |         "fade-up": "fade-up 1000ms var(--animation-delay, 0ms) ease forwards",
132 |         shimmer: "shimmer 8s infinite",
133 |         marquee: "marquee var(--duration) infinite linear",
134 |         "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
135 |       },
136 |       fontFamily: {
137 |         sans: ["var(--font-sans)", ...fontFamily.sans],
138 |         heading: ["var(--font-heading)", ...fontFamily.sans],
139 |       },
140 |     },
141 |   },
142 |   plugins: [require("tailwindcss-animate")],
143 | } satisfies Config;
144 | 
145 | export default config;
146 | 


--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
  3 | import { cva } from "class-variance-authority";
  4 | import { ChevronDown } from "lucide-react";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | const NavigationMenu = React.forwardRef<
  9 |   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
 10 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 11 | >(({ className, children, ...props }, ref) => (
 12 |   <NavigationMenuPrimitive.Root
 13 |     ref={ref}
 14 |     className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
 15 |     {...props}
 16 |   >
 17 |     {children}
 18 |     <NavigationMenuViewport />
 19 |   </NavigationMenuPrimitive.Root>
 20 | ));
 21 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 22 | 
 23 | const NavigationMenuList = React.forwardRef<
 24 |   React.ElementRef<typeof NavigationMenuPrimitive.List>,
 25 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 26 | >(({ className, ...props }, ref) => (
 27 |   <NavigationMenuPrimitive.List
 28 |     ref={ref}
 29 |     className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
 30 |     {...props}
 31 |   />
 32 | ));
 33 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 34 | 
 35 | const NavigationMenuItem = NavigationMenuPrimitive.Item;
 36 | 
 37 | const navigationMenuTriggerStyle = cva(
 38 |   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 39 | );
 40 | 
 41 | const NavigationMenuTrigger = React.forwardRef<
 42 |   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
 43 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 44 | >(({ className, children, ...props }, ref) => (
 45 |   <NavigationMenuPrimitive.Trigger
 46 |     ref={ref}
 47 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 48 |     {...props}
 49 |   >
 50 |     {children}{" "}
 51 |     <ChevronDown
 52 |       className="relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
 53 |       aria-hidden="true"
 54 |     />
 55 |   </NavigationMenuPrimitive.Trigger>
 56 | ));
 57 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 58 | 
 59 | const NavigationMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 62 | >(({ className, ...props }, ref) => (
 63 |   <NavigationMenuPrimitive.Content
 64 |     ref={ref}
 65 |     className={cn(
 66 |       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
 67 |       className,
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | ));
 72 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 73 | 
 74 | const NavigationMenuLink = NavigationMenuPrimitive.Link;
 75 | 
 76 | const NavigationMenuViewport = React.forwardRef<
 77 |   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
 78 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 79 | >(({ className, ...props }, ref) => (
 80 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 81 |     <NavigationMenuPrimitive.Viewport
 82 |       className={cn(
 83 |         "relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-top overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 84 |         className,
 85 |       )}
 86 |       ref={ref}
 87 |       {...props}
 88 |     />
 89 |   </div>
 90 | ));
 91 | NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 92 | 
 93 | const NavigationMenuIndicator = React.forwardRef<
 94 |   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
 95 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 96 | >(({ className, ...props }, ref) => (
 97 |   <NavigationMenuPrimitive.Indicator
 98 |     ref={ref}
 99 |     className={cn(
100 |       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
101 |       className,
102 |     )}
103 |     {...props}
104 |   >
105 |     <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
106 |   </NavigationMenuPrimitive.Indicator>
107 | ));
108 | NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
109 | 
110 | export {
111 |   navigationMenuTriggerStyle,
112 |   NavigationMenu,
113 |   NavigationMenuList,
114 |   NavigationMenuItem,
115 |   NavigationMenuContent,
116 |   NavigationMenuTrigger,
117 |   NavigationMenuLink,
118 |   NavigationMenuIndicator,
119 |   NavigationMenuViewport,
120 | };
121 | 


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { type DialogProps } from "@radix-ui/react-dialog"
  5 | import { Command as CommandPrimitive } from "cmdk"
  6 | import { Search } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
 10 | 
 11 | const Command = React.forwardRef<
 12 |   React.ElementRef<typeof CommandPrimitive>,
 13 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 14 | >(({ className, ...props }, ref) => (
 15 |   <CommandPrimitive
 16 |     ref={ref}
 17 |     className={cn(
 18 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 19 |       className
 20 |     )}
 21 |     {...props}
 22 |   />
 23 | ))
 24 | Command.displayName = CommandPrimitive.displayName
 25 | 
 26 | interface CommandDialogProps extends DialogProps {}
 27 | 
 28 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 29 |   return (
 30 |     <Dialog {...props}>
 31 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 32 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 33 |           {children}
 34 |         </Command>
 35 |       </DialogContent>
 36 |     </Dialog>
 37 |   )
 38 | }
 39 | 
 40 | const CommandInput = React.forwardRef<
 41 |   React.ElementRef<typeof CommandPrimitive.Input>,
 42 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 43 | >(({ className, ...props }, ref) => (
 44 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 45 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 46 |     <CommandPrimitive.Input
 47 |       ref={ref}
 48 |       className={cn(
 49 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 50 |         className
 51 |       )}
 52 |       {...props}
 53 |     />
 54 |   </div>
 55 | ))
 56 | 
 57 | CommandInput.displayName = CommandPrimitive.Input.displayName
 58 | 
 59 | const CommandList = React.forwardRef<
 60 |   React.ElementRef<typeof CommandPrimitive.List>,
 61 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 62 | >(({ className, ...props }, ref) => (
 63 |   <CommandPrimitive.List
 64 |     ref={ref}
 65 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | 
 70 | CommandList.displayName = CommandPrimitive.List.displayName
 71 | 
 72 | const CommandEmpty = React.forwardRef<
 73 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 74 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 75 | >((props, ref) => (
 76 |   <CommandPrimitive.Empty
 77 |     ref={ref}
 78 |     className="py-6 text-center text-sm"
 79 |     {...props}
 80 |   />
 81 | ))
 82 | 
 83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 84 | 
 85 | const CommandGroup = React.forwardRef<
 86 |   React.ElementRef<typeof CommandPrimitive.Group>,
 87 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 88 | >(({ className, ...props }, ref) => (
 89 |   <CommandPrimitive.Group
 90 |     ref={ref}
 91 |     className={cn(
 92 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | 
 99 | CommandGroup.displayName = CommandPrimitive.Group.displayName
100 | 
101 | const CommandSeparator = React.forwardRef<
102 |   React.ElementRef<typeof CommandPrimitive.Separator>,
103 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104 | >(({ className, ...props }, ref) => (
105 |   <CommandPrimitive.Separator
106 |     ref={ref}
107 |     className={cn("-mx-1 h-px bg-border", className)}
108 |     {...props}
109 |   />
110 | ))
111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
112 | 
113 | const CommandItem = React.forwardRef<
114 |   React.ElementRef<typeof CommandPrimitive.Item>,
115 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116 | >(({ className, ...props }, ref) => (
117 |   <CommandPrimitive.Item
118 |     ref={ref}
119 |     className={cn(
120 |       "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
121 |       className
122 |     )}
123 |     {...props}
124 |   />
125 | ))
126 | 
127 | CommandItem.displayName = CommandPrimitive.Item.displayName
128 | 
129 | const CommandShortcut = ({
130 |   className,
131 |   ...props
132 | }: React.HTMLAttributes<HTMLSpanElement>) => {
133 |   return (
134 |     <span
135 |       className={cn(
136 |         "ml-auto text-xs tracking-widest text-muted-foreground",
137 |         className
138 |       )}
139 |       {...props}
140 |     />
141 |   )
142 | }
143 | CommandShortcut.displayName = "CommandShortcut"
144 | 
145 | export {
146 |   Command,
147 |   CommandDialog,
148 |   CommandInput,
149 |   CommandList,
150 |   CommandEmpty,
151 |   CommandGroup,
152 |   CommandItem,
153 |   CommandShortcut,
154 |   CommandSeparator,
155 | }
156 | 


--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as SelectPrimitive from "@radix-ui/react-select";
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Select = SelectPrimitive.Root;
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group;
 12 | 
 13 | const SelectValue = SelectPrimitive.Value;
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className,
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="size-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ));
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn("flex cursor-default items-center justify-center py-1", className)}
 42 |     {...props}
 43 |   >
 44 |     <ChevronUp className="size-4" />
 45 |   </SelectPrimitive.ScrollUpButton>
 46 | ));
 47 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 48 | 
 49 | const SelectScrollDownButton = React.forwardRef<
 50 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 51 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 52 | >(({ className, ...props }, ref) => (
 53 |   <SelectPrimitive.ScrollDownButton
 54 |     ref={ref}
 55 |     className={cn("flex cursor-default items-center justify-center py-1", className)}
 56 |     {...props}
 57 |   >
 58 |     <ChevronDown className="size-4" />
 59 |   </SelectPrimitive.ScrollDownButton>
 60 | ));
 61 | SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 62 | 
 63 | const SelectContent = React.forwardRef<
 64 |   React.ElementRef<typeof SelectPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 66 | >(({ className, children, position = "popper", ...props }, ref) => (
 67 |   <SelectPrimitive.Portal>
 68 |     <SelectPrimitive.Content
 69 |       ref={ref}
 70 |       className={cn(
 71 |         "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 72 |         position === "popper" &&
 73 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 74 |         className,
 75 |       )}
 76 |       position={position}
 77 |       {...props}
 78 |     >
 79 |       <SelectScrollUpButton />
 80 |       <SelectPrimitive.Viewport
 81 |         className={cn(
 82 |           "p-1",
 83 |           position === "popper" &&
 84 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
 85 |         )}
 86 |       >
 87 |         {children}
 88 |       </SelectPrimitive.Viewport>
 89 |       <SelectScrollDownButton />
 90 |     </SelectPrimitive.Content>
 91 |   </SelectPrimitive.Portal>
 92 | ));
 93 | SelectContent.displayName = SelectPrimitive.Content.displayName;
 94 | 
 95 | const SelectLabel = React.forwardRef<
 96 |   React.ElementRef<typeof SelectPrimitive.Label>,
 97 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 98 | >(({ className, ...props }, ref) => (
 99 |   <SelectPrimitive.Label
100 |     ref={ref}
101 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
102 |     {...props}
103 |   />
104 | ));
105 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
106 | 
107 | const SelectItem = React.forwardRef<
108 |   React.ElementRef<typeof SelectPrimitive.Item>,
109 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
110 | >(({ className, children, ...props }, ref) => (
111 |   <SelectPrimitive.Item
112 |     ref={ref}
113 |     className={cn(
114 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
115 |       className,
116 |     )}
117 |     {...props}
118 |   >
119 |     <span className="absolute left-2 flex size-3.5 items-center justify-center">
120 |       <SelectPrimitive.ItemIndicator>
121 |         <Check className="size-4" />
122 |       </SelectPrimitive.ItemIndicator>
123 |     </span>
124 | 
125 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
126 |   </SelectPrimitive.Item>
127 | ));
128 | SelectItem.displayName = SelectPrimitive.Item.displayName;
129 | 
130 | const SelectSeparator = React.forwardRef<
131 |   React.ElementRef<typeof SelectPrimitive.Separator>,
132 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
133 | >(({ className, ...props }, ref) => (
134 |   <SelectPrimitive.Separator
135 |     ref={ref}
136 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
137 |     {...props}
138 |   />
139 | ));
140 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
141 | 
142 | export {
143 |   Select,
144 |   SelectGroup,
145 |   SelectValue,
146 |   SelectTrigger,
147 |   SelectContent,
148 |   SelectLabel,
149 |   SelectItem,
150 |   SelectSeparator,
151 |   SelectScrollUpButton,
152 |   SelectScrollDownButton,
153 | };
154 | 


--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
  5 | import { ArrowLeft, ArrowRight } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | import { Button } from "@/components/ui/button";
  9 | 
 10 | type CarouselApi = UseEmblaCarouselType[1];
 11 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 12 | type CarouselOptions = UseCarouselParameters[0];
 13 | type CarouselPlugin = UseCarouselParameters[1];
 14 | 
 15 | type CarouselProps = {
 16 |   opts?: CarouselOptions;
 17 |   plugins?: CarouselPlugin;
 18 |   orientation?: "horizontal" | "vertical";
 19 |   setApi?: (api: CarouselApi) => void;
 20 | };
 21 | 
 22 | type CarouselContextProps = {
 23 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0];
 24 |   api: ReturnType<typeof useEmblaCarousel>[1];
 25 |   scrollPrev: () => void;
 26 |   scrollNext: () => void;
 27 |   canScrollPrev: boolean;
 28 |   canScrollNext: boolean;
 29 | } & CarouselProps;
 30 | 
 31 | const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 32 | 
 33 | function useCarousel() {
 34 |   const context = React.useContext(CarouselContext);
 35 | 
 36 |   if (!context) {
 37 |     throw new Error("useCarousel must be used within a <Carousel />");
 38 |   }
 39 | 
 40 |   return context;
 41 | }
 42 | 
 43 | const Carousel = React.forwardRef<
 44 |   HTMLDivElement,
 45 |   React.HTMLAttributes<HTMLDivElement> & CarouselProps
 46 | >(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
 47 |   const [carouselRef, api] = useEmblaCarousel(
 48 |     {
 49 |       ...opts,
 50 |       axis: orientation === "horizontal" ? "x" : "y",
 51 |     },
 52 |     plugins,
 53 |   );
 54 |   const [canScrollPrev, setCanScrollPrev] = React.useState(false);
 55 |   const [canScrollNext, setCanScrollNext] = React.useState(false);
 56 | 
 57 |   const onSelect = React.useCallback((api: CarouselApi) => {
 58 |     if (!api) {
 59 |       return;
 60 |     }
 61 | 
 62 |     setCanScrollPrev(api.canScrollPrev());
 63 |     setCanScrollNext(api.canScrollNext());
 64 |   }, []);
 65 | 
 66 |   const scrollPrev = React.useCallback(() => {
 67 |     api?.scrollPrev();
 68 |   }, [api]);
 69 | 
 70 |   const scrollNext = React.useCallback(() => {
 71 |     api?.scrollNext();
 72 |   }, [api]);
 73 | 
 74 |   const handleKeyDown = React.useCallback(
 75 |     (event: React.KeyboardEvent<HTMLDivElement>) => {
 76 |       if (event.key === "ArrowLeft") {
 77 |         event.preventDefault();
 78 |         scrollPrev();
 79 |       } else if (event.key === "ArrowRight") {
 80 |         event.preventDefault();
 81 |         scrollNext();
 82 |       }
 83 |     },
 84 |     [scrollPrev, scrollNext],
 85 |   );
 86 | 
 87 |   React.useEffect(() => {
 88 |     if (!api || !setApi) {
 89 |       return;
 90 |     }
 91 | 
 92 |     setApi(api);
 93 |   }, [api, setApi]);
 94 | 
 95 |   React.useEffect(() => {
 96 |     if (!api) {
 97 |       return;
 98 |     }
 99 | 
100 |     onSelect(api);
101 |     api.on("reInit", onSelect);
102 |     api.on("select", onSelect);
103 | 
104 |     return () => {
105 |       api?.off("select", onSelect);
106 |     };
107 |   }, [api, onSelect]);
108 | 
109 |   return (
110 |     <CarouselContext.Provider
111 |       value={{
112 |         carouselRef,
113 |         api: api,
114 |         opts,
115 |         orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
116 |         scrollPrev,
117 |         scrollNext,
118 |         canScrollPrev,
119 |         canScrollNext,
120 |       }}
121 |     >
122 |       <div
123 |         ref={ref}
124 |         onKeyDownCapture={handleKeyDown}
125 |         className={cn("relative", className)}
126 |         role="region"
127 |         aria-roledescription="carousel"
128 |         {...props}
129 |       >
130 |         {children}
131 |       </div>
132 |     </CarouselContext.Provider>
133 |   );
134 | });
135 | Carousel.displayName = "Carousel";
136 | 
137 | const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
138 |   ({ className, ...props }, ref) => {
139 |     const { carouselRef, orientation } = useCarousel();
140 | 
141 |     return (
142 |       <div ref={carouselRef} className="overflow-hidden">
143 |         <div
144 |           ref={ref}
145 |           className={cn(
146 |             "flex",
147 |             orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
148 |             className,
149 |           )}
150 |           {...props}
151 |         />
152 |       </div>
153 |     );
154 |   },
155 | );
156 | CarouselContent.displayName = "CarouselContent";
157 | 
158 | const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
159 |   ({ className, ...props }, ref) => {
160 |     const { orientation } = useCarousel();
161 | 
162 |     return (
163 |       <div
164 |         ref={ref}
165 |         role="group"
166 |         aria-roledescription="slide"
167 |         className={cn(
168 |           "min-w-0 shrink-0 grow-0 basis-full",
169 |           orientation === "horizontal" ? "pl-4" : "pt-4",
170 |           className,
171 |         )}
172 |         {...props}
173 |       />
174 |     );
175 |   },
176 | );
177 | CarouselItem.displayName = "CarouselItem";
178 | 
179 | const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
180 |   ({ className, variant = "outline", size = "icon", ...props }, ref) => {
181 |     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
182 | 
183 |     return (
184 |       <Button
185 |         ref={ref}
186 |         variant={variant}
187 |         size={size}
188 |         className={cn(
189 |           "absolute  size-8 rounded-full",
190 |           orientation === "horizontal"
191 |             ? "-left-12 top-1/2 -translate-y-1/2"
192 |             : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
193 |           className,
194 |         )}
195 |         disabled={!canScrollPrev}
196 |         onClick={scrollPrev}
197 |         {...props}
198 |       >
199 |         <ArrowLeft className="size-4" />
200 |         <span className="sr-only">Previous slide</span>
201 |       </Button>
202 |     );
203 |   },
204 | );
205 | CarouselPrevious.displayName = "CarouselPrevious";
206 | 
207 | const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
208 |   ({ className, variant = "outline", size = "icon", ...props }, ref) => {
209 |     const { orientation, scrollNext, canScrollNext } = useCarousel();
210 | 
211 |     return (
212 |       <Button
213 |         ref={ref}
214 |         variant={variant}
215 |         size={size}
216 |         className={cn(
217 |           "absolute size-8 rounded-full",
218 |           orientation === "horizontal"
219 |             ? "-right-12 top-1/2 -translate-y-1/2"
220 |             : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
221 |           className,
222 |         )}
223 |         disabled={!canScrollNext}
224 |         onClick={scrollNext}
225 |         {...props}
226 |       >
227 |         <ArrowRight className="size-4" />
228 |         <span className="sr-only">Next slide</span>
229 |       </Button>
230 |     );
231 |   },
232 | );
233 | CarouselNext.displayName = "CarouselNext";
234 | 
235 | export {
236 |   type CarouselApi,
237 |   Carousel,
238 |   CarouselContent,
239 |   CarouselItem,
240 |   CarouselPrevious,
241 |   CarouselNext,
242 | };
243 | 


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  4 | import { Check, ChevronRight, Circle } from "lucide-react";
  5 | import * as React from "react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root;
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean;
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 31 |       inset && "pl-8",
 32 |       className,
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto size-4" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ));
 40 | DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 41 | 
 42 | const DropdownMenuSubContent = React.forwardRef<
 43 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 44 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 45 | >(({ className, ...props }, ref) => (
 46 |   <DropdownMenuPrimitive.SubContent
 47 |     ref={ref}
 48 |     className={cn(
 49 |       "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 50 |       className,
 51 |     )}
 52 |     {...props}
 53 |   />
 54 | ));
 55 | DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 67 |         className,
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ));
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean;
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       inset && "pl-8",
 86 |       className,
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ));
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className,
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex size-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="size-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ));
114 | DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
115 | 
116 | const DropdownMenuRadioItem = React.forwardRef<
117 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
118 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
119 | >(({ className, children, ...props }, ref) => (
120 |   <DropdownMenuPrimitive.RadioItem
121 |     ref={ref}
122 |     className={cn(
123 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
124 |       className,
125 |     )}
126 |     {...props}
127 |   >
128 |     <span className="absolute left-2 flex size-3.5 items-center justify-center">
129 |       <DropdownMenuPrimitive.ItemIndicator>
130 |         <Circle className="size-2 fill-current" />
131 |       </DropdownMenuPrimitive.ItemIndicator>
132 |     </span>
133 |     {children}
134 |   </DropdownMenuPrimitive.RadioItem>
135 | ));
136 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
137 | 
138 | const DropdownMenuLabel = React.forwardRef<
139 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
140 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
141 |     inset?: boolean;
142 |   }
143 | >(({ className, inset, ...props }, ref) => (
144 |   <DropdownMenuPrimitive.Label
145 |     ref={ref}
146 |     className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
147 |     {...props}
148 |   />
149 | ));
150 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
151 | 
152 | const DropdownMenuSeparator = React.forwardRef<
153 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
154 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
155 | >(({ className, ...props }, ref) => (
156 |   <DropdownMenuPrimitive.Separator
157 |     ref={ref}
158 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
159 |     {...props}
160 |   />
161 | ));
162 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
163 | 
164 | const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
165 |   return (
166 |     <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
167 |   );
168 | };
169 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
170 | 
171 | export {
172 |   DropdownMenu,
173 |   DropdownMenuTrigger,
174 |   DropdownMenuContent,
175 |   DropdownMenuItem,
176 |   DropdownMenuCheckboxItem,
177 |   DropdownMenuRadioItem,
178 |   DropdownMenuLabel,
179 |   DropdownMenuSeparator,
180 |   DropdownMenuShortcut,
181 |   DropdownMenuGroup,
182 |   DropdownMenuPortal,
183 |   DropdownMenuSub,
184 |   DropdownMenuSubContent,
185 |   DropdownMenuSubTrigger,
186 |   DropdownMenuRadioGroup,
187 | };
188 | 


--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const ContextMenu = ContextMenuPrimitive.Root
 10 | 
 11 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 12 | 
 13 | const ContextMenuGroup = ContextMenuPrimitive.Group
 14 | 
 15 | const ContextMenuPortal = ContextMenuPrimitive.Portal
 16 | 
 17 | const ContextMenuSub = ContextMenuPrimitive.Sub
 18 | 
 19 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 20 | 
 21 | const ContextMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <ContextMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </ContextMenuPrimitive.SubTrigger>
 39 | ))
 40 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 41 | 
 42 | const ContextMenuSubContent = React.forwardRef<
 43 |   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
 44 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 45 | >(({ className, ...props }, ref) => (
 46 |   <ContextMenuPrimitive.SubContent
 47 |     ref={ref}
 48 |     className={cn(
 49 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 50 |       className
 51 |     )}
 52 |     {...props}
 53 |   />
 54 | ))
 55 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 56 | 
 57 | const ContextMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof ContextMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 60 | >(({ className, ...props }, ref) => (
 61 |   <ContextMenuPrimitive.Portal>
 62 |     <ContextMenuPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(
 65 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 66 |         className
 67 |       )}
 68 |       {...props}
 69 |     />
 70 |   </ContextMenuPrimitive.Portal>
 71 | ))
 72 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 73 | 
 74 | const ContextMenuItem = React.forwardRef<
 75 |   React.ElementRef<typeof ContextMenuPrimitive.Item>,
 76 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
 77 |     inset?: boolean
 78 |   }
 79 | >(({ className, inset, ...props }, ref) => (
 80 |   <ContextMenuPrimitive.Item
 81 |     ref={ref}
 82 |     className={cn(
 83 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 84 |       inset && "pl-8",
 85 |       className
 86 |     )}
 87 |     {...props}
 88 |   />
 89 | ))
 90 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 91 | 
 92 | const ContextMenuCheckboxItem = React.forwardRef<
 93 |   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
 94 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 95 | >(({ className, children, checked, ...props }, ref) => (
 96 |   <ContextMenuPrimitive.CheckboxItem
 97 |     ref={ref}
 98 |     className={cn(
 99 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
100 |       className
101 |     )}
102 |     checked={checked}
103 |     {...props}
104 |   >
105 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
106 |       <ContextMenuPrimitive.ItemIndicator>
107 |         <Check className="h-4 w-4" />
108 |       </ContextMenuPrimitive.ItemIndicator>
109 |     </span>
110 |     {children}
111 |   </ContextMenuPrimitive.CheckboxItem>
112 | ))
113 | ContextMenuCheckboxItem.displayName =
114 |   ContextMenuPrimitive.CheckboxItem.displayName
115 | 
116 | const ContextMenuRadioItem = React.forwardRef<
117 |   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
118 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
119 | >(({ className, children, ...props }, ref) => (
120 |   <ContextMenuPrimitive.RadioItem
121 |     ref={ref}
122 |     className={cn(
123 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
124 |       className
125 |     )}
126 |     {...props}
127 |   >
128 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
129 |       <ContextMenuPrimitive.ItemIndicator>
130 |         <Circle className="h-2 w-2 fill-current" />
131 |       </ContextMenuPrimitive.ItemIndicator>
132 |     </span>
133 |     {children}
134 |   </ContextMenuPrimitive.RadioItem>
135 | ))
136 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
137 | 
138 | const ContextMenuLabel = React.forwardRef<
139 |   React.ElementRef<typeof ContextMenuPrimitive.Label>,
140 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
141 |     inset?: boolean
142 |   }
143 | >(({ className, inset, ...props }, ref) => (
144 |   <ContextMenuPrimitive.Label
145 |     ref={ref}
146 |     className={cn(
147 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
148 |       inset && "pl-8",
149 |       className
150 |     )}
151 |     {...props}
152 |   />
153 | ))
154 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
155 | 
156 | const ContextMenuSeparator = React.forwardRef<
157 |   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
158 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
159 | >(({ className, ...props }, ref) => (
160 |   <ContextMenuPrimitive.Separator
161 |     ref={ref}
162 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
163 |     {...props}
164 |   />
165 | ))
166 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
167 | 
168 | const ContextMenuShortcut = ({
169 |   className,
170 |   ...props
171 | }: React.HTMLAttributes<HTMLSpanElement>) => {
172 |   return (
173 |     <span
174 |       className={cn(
175 |         "ml-auto text-xs tracking-widest text-muted-foreground",
176 |         className
177 |       )}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
183 | 
184 | export {
185 |   ContextMenu,
186 |   ContextMenuTrigger,
187 |   ContextMenuContent,
188 |   ContextMenuItem,
189 |   ContextMenuCheckboxItem,
190 |   ContextMenuRadioItem,
191 |   ContextMenuLabel,
192 |   ContextMenuSeparator,
193 |   ContextMenuShortcut,
194 |   ContextMenuGroup,
195 |   ContextMenuPortal,
196 |   ContextMenuSub,
197 |   ContextMenuSubContent,
198 |   ContextMenuSubTrigger,
199 |   ContextMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/src/components/magicui/particles.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useEffect, useRef, useState } from "react";
  4 | 
  5 | interface MousePosition {
  6 |   x: number;
  7 |   y: number;
  8 | }
  9 | 
 10 | function MousePosition(): MousePosition {
 11 |   const [mousePosition, setMousePosition] = useState<MousePosition>({
 12 |     x: 0,
 13 |     y: 0,
 14 |   });
 15 | 
 16 |   useEffect(() => {
 17 |     const handleMouseMove = (event: MouseEvent) => {
 18 |       setMousePosition({ x: event.clientX, y: event.clientY });
 19 |     };
 20 | 
 21 |     window.addEventListener("mousemove", handleMouseMove);
 22 | 
 23 |     return () => {
 24 |       window.removeEventListener("mousemove", handleMouseMove);
 25 |     };
 26 |   }, []);
 27 | 
 28 |   return mousePosition;
 29 | }
 30 | 
 31 | interface ParticlesProps {
 32 |   className?: string;
 33 |   quantity?: number;
 34 |   staticity?: number;
 35 |   ease?: number;
 36 |   size?: number;
 37 |   refresh?: boolean;
 38 |   color?: string;
 39 |   vx?: number;
 40 |   vy?: number;
 41 | }
 42 | function hexToRgb(hex: string): number[] {
 43 |   hex = hex.replace("#", "");
 44 |   const hexInt = parseInt(hex, 16);
 45 |   const red = (hexInt >> 16) & 255;
 46 |   const green = (hexInt >> 8) & 255;
 47 |   const blue = hexInt & 255;
 48 |   return [red, green, blue];
 49 | }
 50 | 
 51 | export function Particles({
 52 |   className = "",
 53 |   quantity = 100,
 54 |   staticity = 50,
 55 |   ease = 50,
 56 |   size = 0.4,
 57 |   refresh = false,
 58 |   color = "#ffffff",
 59 |   vx = 0,
 60 |   vy = 0,
 61 | }: ParticlesProps) {
 62 |   const canvasRef = useRef<HTMLCanvasElement>(null);
 63 |   const canvasContainerRef = useRef<HTMLDivElement>(null);
 64 |   const context = useRef<CanvasRenderingContext2D | null>(null);
 65 |   const circles = useRef<any[]>([]);
 66 |   const mousePosition = MousePosition();
 67 |   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 68 |   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
 69 |   const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
 70 | 
 71 |   useEffect(() => {
 72 |     if (canvasRef.current) {
 73 |       context.current = canvasRef.current.getContext("2d");
 74 |     }
 75 |     initCanvas();
 76 |     animate();
 77 |     window.addEventListener("resize", initCanvas);
 78 | 
 79 |     return () => {
 80 |       window.removeEventListener("resize", initCanvas);
 81 |     };
 82 |     // eslint-disable-next-line react-hooks/exhaustive-deps
 83 |   }, [color]);
 84 | 
 85 |   useEffect(() => {
 86 |     onMouseMove();
 87 |     // eslint-disable-next-line react-hooks/exhaustive-deps
 88 |   }, [mousePosition.x, mousePosition.y]);
 89 | 
 90 |   useEffect(() => {
 91 |     initCanvas();
 92 |     // eslint-disable-next-line react-hooks/exhaustive-deps
 93 |   }, [refresh]);
 94 | 
 95 |   const initCanvas = () => {
 96 |     resizeCanvas();
 97 |     drawParticles();
 98 |   };
 99 | 
100 |   const onMouseMove = () => {
101 |     if (canvasRef.current) {
102 |       const rect = canvasRef.current.getBoundingClientRect();
103 |       const { w, h } = canvasSize.current;
104 |       const x = mousePosition.x - rect.left - w / 2;
105 |       const y = mousePosition.y - rect.top - h / 2;
106 |       const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
107 |       if (inside) {
108 |         mouse.current.x = x;
109 |         mouse.current.y = y;
110 |       }
111 |     }
112 |   };
113 | 
114 |   type Circle = {
115 |     x: number;
116 |     y: number;
117 |     translateX: number;
118 |     translateY: number;
119 |     size: number;
120 |     alpha: number;
121 |     targetAlpha: number;
122 |     dx: number;
123 |     dy: number;
124 |     magnetism: number;
125 |   };
126 | 
127 |   const resizeCanvas = () => {
128 |     if (canvasContainerRef.current && canvasRef.current && context.current) {
129 |       circles.current.length = 0;
130 |       canvasSize.current.w = canvasContainerRef.current.offsetWidth;
131 |       canvasSize.current.h = Math.max(canvasContainerRef.current.offsetHeight, 1000);
132 |       canvasRef.current.width = canvasSize.current.w * dpr;
133 |       canvasRef.current.height = canvasSize.current.h * dpr;
134 |       canvasRef.current.style.width = `${canvasSize.current.w}px`;
135 |       canvasRef.current.style.height = `${canvasSize.current.h}px`;
136 |       context.current.scale(dpr, dpr);
137 |     }
138 |   };
139 | 
140 |   const circleParams = (): Circle => {
141 |     const x = Math.floor(Math.random() * canvasSize.current.w);
142 |     const y = Math.floor(Math.random() * canvasSize.current.h);
143 |     const translateX = 0;
144 |     const translateY = 0;
145 |     const pSize = Math.floor(Math.random() * 2) + size;
146 |     const alpha = 0;
147 |     const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
148 |     const dx = (Math.random() - 0.5) * 0.1;
149 |     const dy = (Math.random() - 0.5) * 0.1;
150 |     const magnetism = 0.1 + Math.random() * 4;
151 |     return {
152 |       x,
153 |       y,
154 |       translateX,
155 |       translateY,
156 |       size: pSize,
157 |       alpha,
158 |       targetAlpha,
159 |       dx,
160 |       dy,
161 |       magnetism,
162 |     };
163 |   };
164 | 
165 |   const rgb = hexToRgb(color);
166 | 
167 |   const drawCircle = (circle: Circle, update = false) => {
168 |     if (context.current) {
169 |       const { x, y, translateX, translateY, size, alpha } = circle;
170 |       context.current.translate(translateX, translateY);
171 |       context.current.beginPath();
172 |       context.current.arc(x, y, size, 0, 2 * Math.PI);
173 |       context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;
174 |       context.current.fill();
175 |       context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
176 | 
177 |       if (!update) {
178 |         circles.current.push(circle);
179 |       }
180 |     }
181 |   };
182 | 
183 |   const clearContext = () => {
184 |     if (context.current) {
185 |       context.current.clearRect(0, 0, canvasSize.current.w, canvasSize.current.h);
186 |     }
187 |   };
188 | 
189 |   const drawParticles = () => {
190 |     clearContext();
191 |     const particleCount = quantity;
192 |     for (let i = 0; i < particleCount; i++) {
193 |       const circle = circleParams();
194 |       drawCircle(circle);
195 |     }
196 |   };
197 | 
198 |   const remapValue = (
199 |     value: number,
200 |     start1: number,
201 |     end1: number,
202 |     start2: number,
203 |     end2: number,
204 |   ): number => {
205 |     const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
206 |     return remapped > 0 ? remapped : 0;
207 |   };
208 | 
209 |   const animate = () => {
210 |     clearContext();
211 |     circles.current.forEach((circle: Circle, i: number) => {
212 |       // Handle the alpha value
213 |       const edge = [
214 |         circle.x + circle.translateX - circle.size, // distance from left edge
215 |         canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
216 |         circle.y + circle.translateY - circle.size, // distance from top edge
217 |         canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
218 |       ];
219 |       const closestEdge = edge.reduce((a, b) => Math.min(a, b));
220 |       const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2));
221 |       if (remapClosestEdge > 1) {
222 |         circle.alpha += 0.02;
223 |         if (circle.alpha > circle.targetAlpha) {
224 |           circle.alpha = circle.targetAlpha;
225 |         }
226 |       } else {
227 |         circle.alpha = circle.targetAlpha * remapClosestEdge;
228 |       }
229 |       circle.x += circle.dx + vx;
230 |       circle.y += circle.dy + vy;
231 |       circle.translateX +=
232 |         (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) / ease;
233 |       circle.translateY +=
234 |         (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) / ease;
235 | 
236 |       drawCircle(circle, true);
237 | 
238 |       // circle gets out of the canvas
239 |       if (
240 |         circle.x < -circle.size ||
241 |         circle.x > canvasSize.current.w + circle.size ||
242 |         circle.y < -circle.size ||
243 |         circle.y > canvasSize.current.h + circle.size
244 |       ) {
245 |         // remove the circle from the array
246 |         circles.current.splice(i, 1);
247 |         // create a new circle
248 |         const newCircle = circleParams();
249 |         drawCircle(newCircle);
250 |         // update the circle position
251 |       }
252 |     });
253 |     window.requestAnimationFrame(animate);
254 |   };
255 | 
256 |   return (
257 |     <div className={className} ref={canvasContainerRef} aria-hidden="true">
258 |       <canvas ref={canvasRef} className="size-full" />
259 |     </div>
260 |   );
261 | }
262 | 


--------------------------------------------------------------------------------
/src/components/ui/menubar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as MenubarPrimitive from "@radix-ui/react-menubar"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const MenubarMenu = MenubarPrimitive.Menu
 10 | 
 11 | const MenubarGroup = MenubarPrimitive.Group
 12 | 
 13 | const MenubarPortal = MenubarPrimitive.Portal
 14 | 
 15 | const MenubarSub = MenubarPrimitive.Sub
 16 | 
 17 | const MenubarRadioGroup = MenubarPrimitive.RadioGroup
 18 | 
 19 | const Menubar = React.forwardRef<
 20 |   React.ElementRef<typeof MenubarPrimitive.Root>,
 21 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 22 | >(({ className, ...props }, ref) => (
 23 |   <MenubarPrimitive.Root
 24 |     ref={ref}
 25 |     className={cn(
 26 |       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
 27 |       className
 28 |     )}
 29 |     {...props}
 30 |   />
 31 | ))
 32 | Menubar.displayName = MenubarPrimitive.Root.displayName
 33 | 
 34 | const MenubarTrigger = React.forwardRef<
 35 |   React.ElementRef<typeof MenubarPrimitive.Trigger>,
 36 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 37 | >(({ className, ...props }, ref) => (
 38 |   <MenubarPrimitive.Trigger
 39 |     ref={ref}
 40 |     className={cn(
 41 |       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 42 |       className
 43 |     )}
 44 |     {...props}
 45 |   />
 46 | ))
 47 | MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 48 | 
 49 | const MenubarSubTrigger = React.forwardRef<
 50 |   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
 51 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
 52 |     inset?: boolean
 53 |   }
 54 | >(({ className, inset, children, ...props }, ref) => (
 55 |   <MenubarPrimitive.SubTrigger
 56 |     ref={ref}
 57 |     className={cn(
 58 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 59 |       inset && "pl-8",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     {children}
 65 |     <ChevronRight className="ml-auto h-4 w-4" />
 66 |   </MenubarPrimitive.SubTrigger>
 67 | ))
 68 | MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 69 | 
 70 | const MenubarSubContent = React.forwardRef<
 71 |   React.ElementRef<typeof MenubarPrimitive.SubContent>,
 72 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 73 | >(({ className, ...props }, ref) => (
 74 |   <MenubarPrimitive.SubContent
 75 |     ref={ref}
 76 |     className={cn(
 77 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 78 |       className
 79 |     )}
 80 |     {...props}
 81 |   />
 82 | ))
 83 | MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
 84 | 
 85 | const MenubarContent = React.forwardRef<
 86 |   React.ElementRef<typeof MenubarPrimitive.Content>,
 87 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 88 | >(
 89 |   (
 90 |     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
 91 |     ref
 92 |   ) => (
 93 |     <MenubarPrimitive.Portal>
 94 |       <MenubarPrimitive.Content
 95 |         ref={ref}
 96 |         align={align}
 97 |         alignOffset={alignOffset}
 98 |         sideOffset={sideOffset}
 99 |         className={cn(
100 |           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
101 |           className
102 |         )}
103 |         {...props}
104 |       />
105 |     </MenubarPrimitive.Portal>
106 |   )
107 | )
108 | MenubarContent.displayName = MenubarPrimitive.Content.displayName
109 | 
110 | const MenubarItem = React.forwardRef<
111 |   React.ElementRef<typeof MenubarPrimitive.Item>,
112 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
113 |     inset?: boolean
114 |   }
115 | >(({ className, inset, ...props }, ref) => (
116 |   <MenubarPrimitive.Item
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120 |       inset && "pl-8",
121 |       className
122 |     )}
123 |     {...props}
124 |   />
125 | ))
126 | MenubarItem.displayName = MenubarPrimitive.Item.displayName
127 | 
128 | const MenubarCheckboxItem = React.forwardRef<
129 |   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
130 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
131 | >(({ className, children, checked, ...props }, ref) => (
132 |   <MenubarPrimitive.CheckboxItem
133 |     ref={ref}
134 |     className={cn(
135 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
136 |       className
137 |     )}
138 |     checked={checked}
139 |     {...props}
140 |   >
141 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
142 |       <MenubarPrimitive.ItemIndicator>
143 |         <Check className="h-4 w-4" />
144 |       </MenubarPrimitive.ItemIndicator>
145 |     </span>
146 |     {children}
147 |   </MenubarPrimitive.CheckboxItem>
148 | ))
149 | MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
150 | 
151 | const MenubarRadioItem = React.forwardRef<
152 |   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
153 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
154 | >(({ className, children, ...props }, ref) => (
155 |   <MenubarPrimitive.RadioItem
156 |     ref={ref}
157 |     className={cn(
158 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
159 |       className
160 |     )}
161 |     {...props}
162 |   >
163 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
164 |       <MenubarPrimitive.ItemIndicator>
165 |         <Circle className="h-2 w-2 fill-current" />
166 |       </MenubarPrimitive.ItemIndicator>
167 |     </span>
168 |     {children}
169 |   </MenubarPrimitive.RadioItem>
170 | ))
171 | MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
172 | 
173 | const MenubarLabel = React.forwardRef<
174 |   React.ElementRef<typeof MenubarPrimitive.Label>,
175 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
176 |     inset?: boolean
177 |   }
178 | >(({ className, inset, ...props }, ref) => (
179 |   <MenubarPrimitive.Label
180 |     ref={ref}
181 |     className={cn(
182 |       "px-2 py-1.5 text-sm font-semibold",
183 |       inset && "pl-8",
184 |       className
185 |     )}
186 |     {...props}
187 |   />
188 | ))
189 | MenubarLabel.displayName = MenubarPrimitive.Label.displayName
190 | 
191 | const MenubarSeparator = React.forwardRef<
192 |   React.ElementRef<typeof MenubarPrimitive.Separator>,
193 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
194 | >(({ className, ...props }, ref) => (
195 |   <MenubarPrimitive.Separator
196 |     ref={ref}
197 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
198 |     {...props}
199 |   />
200 | ))
201 | MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
202 | 
203 | const MenubarShortcut = ({
204 |   className,
205 |   ...props
206 | }: React.HTMLAttributes<HTMLSpanElement>) => {
207 |   return (
208 |     <span
209 |       className={cn(
210 |         "ml-auto text-xs tracking-widest text-muted-foreground",
211 |         className
212 |       )}
213 |       {...props}
214 |     />
215 |   )
216 | }
217 | MenubarShortcut.displayname = "MenubarShortcut"
218 | 
219 | export {
220 |   Menubar,
221 |   MenubarMenu,
222 |   MenubarTrigger,
223 |   MenubarContent,
224 |   MenubarItem,
225 |   MenubarSeparator,
226 |   MenubarLabel,
227 |   MenubarCheckboxItem,
228 |   MenubarRadioGroup,
229 |   MenubarRadioItem,
230 |   MenubarPortal,
231 |   MenubarSubContent,
232 |   MenubarSubTrigger,
233 |   MenubarGroup,
234 |   MenubarSub,
235 |   MenubarShortcut,
236 | }
237 | 


--------------------------------------------------------------------------------
/src/components/ui/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Slot } from "@radix-ui/react-slot";
  4 | import { VariantProps, cva } from "class-variance-authority";
  5 | import { PanelLeft } from "lucide-react";
  6 | import * as React from "react";
  7 | 
  8 | import { Sheet, SheetContent } from "@/components/ui/sheet";
  9 | import { Button } from "@/components/ui/button";
 10 | import { Input } from "@/components/ui/input";
 11 | import { Separator } from "@/components/ui/separator";
 12 | import { Skeleton } from "@/components/ui/skeleton";
 13 | import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 14 | import { useIsMobile } from "@/hooks/use-mobile";
 15 | import { cn } from "@/lib/utils";
 16 | 
 17 | const SIDEBAR_COOKIE_NAME = "sidebar:state";
 18 | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 19 | const SIDEBAR_WIDTH = "16rem";
 20 | const SIDEBAR_WIDTH_MOBILE = "18rem";
 21 | const SIDEBAR_WIDTH_ICON = "3rem";
 22 | const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 23 | 
 24 | type SidebarContext = {
 25 |   state: "expanded" | "collapsed";
 26 |   open: boolean;
 27 |   setOpen: (open: boolean) => void;
 28 |   openMobile: boolean;
 29 |   setOpenMobile: (open: boolean) => void;
 30 |   isMobile: boolean;
 31 |   toggleSidebar: () => void;
 32 | };
 33 | 
 34 | const SidebarContext = React.createContext<SidebarContext | null>(null);
 35 | 
 36 | function useSidebar() {
 37 |   const context = React.useContext(SidebarContext);
 38 |   if (!context) {
 39 |     throw new Error("useSidebar must be used within a Sidebar.");
 40 |   }
 41 | 
 42 |   return context;
 43 | }
 44 | 
 45 | const SidebarProvider = React.forwardRef<
 46 |   HTMLDivElement,
 47 |   React.ComponentProps<"div"> & {
 48 |     defaultOpen?: boolean;
 49 |     open?: boolean;
 50 |     onOpenChange?: (open: boolean) => void;
 51 |   }
 52 | >(
 53 |   (
 54 |     {
 55 |       defaultOpen = true,
 56 |       open: openProp,
 57 |       onOpenChange: setOpenProp,
 58 |       className,
 59 |       style,
 60 |       children,
 61 |       ...props
 62 |     },
 63 |     ref,
 64 |   ) => {
 65 |     const isMobile = useIsMobile();
 66 |     const [openMobile, setOpenMobile] = React.useState(false);
 67 | 
 68 |     // This is the internal state of the sidebar.
 69 |     // We use openProp and setOpenProp for control from outside the component.
 70 |     const [_open, _setOpen] = React.useState(defaultOpen);
 71 |     const open = openProp ?? _open;
 72 |     const setOpen = React.useCallback(
 73 |       (value: boolean | ((value: boolean) => boolean)) => {
 74 |         if (setOpenProp) {
 75 |           return setOpenProp?.(typeof value === "function" ? value(open) : value);
 76 |         }
 77 | 
 78 |         _setOpen(value);
 79 | 
 80 |         // This sets the cookie to keep the sidebar state.
 81 |         document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 82 |       },
 83 |       [setOpenProp, open],
 84 |     );
 85 | 
 86 |     // Helper to toggle the sidebar.
 87 |     const toggleSidebar = React.useCallback(() => {
 88 |       return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
 89 |     }, [isMobile, setOpen, setOpenMobile]);
 90 | 
 91 |     // Adds a keyboard shortcut to toggle the sidebar.
 92 |     React.useEffect(() => {
 93 |       const handleKeyDown = (event: KeyboardEvent) => {
 94 |         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 95 |           event.preventDefault();
 96 |           toggleSidebar();
 97 |         }
 98 |       };
 99 | 
100 |       window.addEventListener("keydown", handleKeyDown);
101 |       return () => window.removeEventListener("keydown", handleKeyDown);
102 |     }, [toggleSidebar]);
103 | 
104 |     // We add a state so that we can do data-state="expanded" or "collapsed".
105 |     // This makes it easier to style the sidebar with Tailwind classes.
106 |     const state = open ? "expanded" : "collapsed";
107 | 
108 |     const contextValue = React.useMemo<SidebarContext>(
109 |       () => ({
110 |         state,
111 |         open,
112 |         setOpen,
113 |         isMobile,
114 |         openMobile,
115 |         setOpenMobile,
116 |         toggleSidebar,
117 |       }),
118 |       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
119 |     );
120 | 
121 |     return (
122 |       <SidebarContext.Provider value={contextValue}>
123 |         <TooltipProvider delayDuration={0}>
124 |           <div
125 |             style={
126 |               {
127 |                 "--sidebar-width": SIDEBAR_WIDTH,
128 |                 "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
129 |                 ...style,
130 |               } as React.CSSProperties
131 |             }
132 |             className={cn(
133 |               "group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar",
134 |               className,
135 |             )}
136 |             ref={ref}
137 |             {...props}
138 |           >
139 |             {children}
140 |           </div>
141 |         </TooltipProvider>
142 |       </SidebarContext.Provider>
143 |     );
144 |   },
145 | );
146 | SidebarProvider.displayName = "SidebarProvider";
147 | 
148 | const Sidebar = React.forwardRef<
149 |   HTMLDivElement,
150 |   React.ComponentProps<"div"> & {
151 |     side?: "left" | "right";
152 |     variant?: "sidebar" | "floating" | "inset";
153 |     collapsible?: "offcanvas" | "icon" | "none";
154 |   }
155 | >(
156 |   (
157 |     {
158 |       side = "left",
159 |       variant = "sidebar",
160 |       collapsible = "offcanvas",
161 |       className,
162 |       children,
163 |       ...props
164 |     },
165 |     ref,
166 |   ) => {
167 |     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
168 | 
169 |     if (collapsible === "none") {
170 |       return (
171 |         <div
172 |           className={cn(
173 |             "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
174 |             className,
175 |           )}
176 |           ref={ref}
177 |           {...props}
178 |         >
179 |           {children}
180 |         </div>
181 |       );
182 |     }
183 | 
184 |     if (isMobile) {
185 |       return (
186 |         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
187 |           <SheetContent
188 |             data-sidebar="sidebar"
189 |             data-mobile="true"
190 |             className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
191 |             style={
192 |               {
193 |                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
194 |               } as React.CSSProperties
195 |             }
196 |             side={side}
197 |           >
198 |             <div className="flex size-full flex-col">{children}</div>
199 |           </SheetContent>
200 |         </Sheet>
201 |       );
202 |     }
203 | 
204 |     return (
205 |       <div
206 |         ref={ref}
207 |         className="group peer hidden md:block"
208 |         data-state={state}
209 |         data-collapsible={state === "collapsed" ? collapsible : ""}
210 |         data-variant={variant}
211 |         data-side={side}
212 |       >
213 |         {/* This is what handles the sidebar gap on desktop */}
214 |         <div
215 |           className={cn(
216 |             "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
217 |             "group-data-[collapsible=offcanvas]:w-0",
218 |             "group-data-[side=right]:rotate-180",
219 |             variant === "floating" || variant === "inset"
220 |               ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
221 |               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
222 |           )}
223 |         />
224 |         <div
225 |           className={cn(
226 |             "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
227 |             side === "left"
228 |               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
229 |               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
230 |             // Adjust the padding for floating and inset variants.
231 |             variant === "floating" || variant === "inset"
232 |               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
233 |               : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
234 |             className,
235 |           )}
236 |           {...props}
237 |         >
238 |           <div
239 |             data-sidebar="sidebar"
240 |             className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
241 |           >
242 |             {children}
243 |           </div>
244 |         </div>
245 |       </div>
246 |     );
247 |   },
248 | );
249 | Sidebar.displayName = "Sidebar";
250 | 
251 | const SidebarTrigger = React.forwardRef<
252 |   React.ElementRef<typeof Button>,
253 |   React.ComponentProps<typeof Button>
254 | >(({ className, onClick, ...props }, ref) => {
255 |   const { toggleSidebar } = useSidebar();
256 | 
257 |   return (
258 |     <Button
259 |       ref={ref}
260 |       data-sidebar="trigger"
261 |       variant="ghost"
262 |       size="icon"
263 |       className={cn("size-7", className)}
264 |       onClick={(event) => {
265 |         onClick?.(event);
266 |         toggleSidebar();
267 |       }}
268 |       {...props}
269 |     >
270 |       <PanelLeft />
271 |       <span className="sr-only">Toggle Sidebar</span>
272 |     </Button>
273 |   );
274 | });
275 | SidebarTrigger.displayName = "SidebarTrigger";
276 | 
277 | const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
278 |   ({ className, ...props }, ref) => {
279 |     const { toggleSidebar } = useSidebar();
280 | 
281 |     return (
282 |       <button
283 |         ref={ref}
284 |         data-sidebar="rail"
285 |         aria-label="Toggle Sidebar"
286 |         tabIndex={-1}
287 |         onClick={toggleSidebar}
288 |         title="Toggle Sidebar"
289 |         className={cn(
290 |           "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
291 |           "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
292 |           "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
293 |           "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
294 |           "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
295 |           "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
296 |           className,
297 |         )}
298 |         {...props}
299 |       />
300 |     );
301 |   },
302 | );
303 | SidebarRail.displayName = "SidebarRail";
304 | 
305 | const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(
306 |   ({ className, ...props }, ref) => {
307 |     return (
308 |       <main
309 |         ref={ref}
310 |         className={cn(
311 |           "relative flex min-h-svh flex-1 flex-col bg-background",
312 |           "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
313 |           className,
314 |         )}
315 |         {...props}
316 |       />
317 |     );
318 |   },
319 | );
320 | SidebarInset.displayName = "SidebarInset";
321 | 
322 | const SidebarInput = React.forwardRef<
323 |   React.ElementRef<typeof Input>,
324 |   React.ComponentProps<typeof Input>
325 | >(({ className, ...props }, ref) => {
326 |   return (
327 |     <Input
328 |       ref={ref}
329 |       data-sidebar="input"
330 |       className={cn(
331 |         "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
332 |         className,
333 |       )}
334 |       {...props}
335 |     />
336 |   );
337 | });
338 | SidebarInput.displayName = "SidebarInput";
339 | 
340 | const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
341 |   ({ className, ...props }, ref) => {
342 |     return (
343 |       <div
344 |         ref={ref}
345 |         data-sidebar="header"
346 |         className={cn("flex flex-col gap-2 p-2", className)}
347 |         {...props}
348 |       />
349 |     );
350 |   },
351 | );
352 | SidebarHeader.displayName = "SidebarHeader";
353 | 
354 | const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
355 |   ({ className, ...props }, ref) => {
356 |     return (
357 |       <div
358 |         ref={ref}
359 |         data-sidebar="footer"
360 |         className={cn("flex flex-col gap-2 p-2", className)}
361 |         {...props}
362 |       />
363 |     );
364 |   },
365 | );
366 | SidebarFooter.displayName = "SidebarFooter";
367 | 
368 | const SidebarSeparator = React.forwardRef<
369 |   React.ElementRef<typeof Separator>,
370 |   React.ComponentProps<typeof Separator>
371 | >(({ className, ...props }, ref) => {
372 |   return (
373 |     <Separator
374 |       ref={ref}
375 |       data-sidebar="separator"
376 |       className={cn("mx-2 w-auto bg-sidebar-border", className)}
377 |       {...props}
378 |     />
379 |   );
380 | });
381 | SidebarSeparator.displayName = "SidebarSeparator";
382 | 
383 | const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
384 |   ({ className, ...props }, ref) => {
385 |     return (
386 |       <div
387 |         ref={ref}
388 |         data-sidebar="content"
389 |         className={cn(
390 |           "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
391 |           className,
392 |         )}
393 |         {...props}
394 |       />
395 |     );
396 |   },
397 | );
398 | SidebarContent.displayName = "SidebarContent";
399 | 
400 | const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
401 |   ({ className, ...props }, ref) => {
402 |     return (
403 |       <div
404 |         ref={ref}
405 |         data-sidebar="group"
406 |         className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
407 |         {...props}
408 |       />
409 |     );
410 |   },
411 | );
412 | SidebarGroup.displayName = "SidebarGroup";
413 | 
414 | const SidebarGroupLabel = React.forwardRef<
415 |   HTMLDivElement,
416 |   React.HTMLAttributes<HTMLDivElement> & { asChild?: boolean }
417 | >(({ className, asChild = false, ...props }, ref) => {
418 |   const Comp = asChild ? Slot : "div";
419 | 
420 |   return (
421 |     <Comp
422 |       ref={ref}
423 |       data-sidebar="group-label"
424 |       className={cn(
425 |         "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
426 |         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
427 |         className,
428 |       )}
429 |       {...props}
430 |     />
431 |   );
432 | });
433 | SidebarGroupLabel.displayName = "SidebarGroupLabel";
434 | 
435 | const SidebarGroupAction = React.forwardRef<
436 |   HTMLButtonElement,
437 |   React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
438 | >(({ className, asChild = false, ...props }, ref) => {
439 |   const Comp = asChild ? Slot : "button";
440 | 
441 |   return (
442 |     <Comp
443 |       ref={ref}
444 |       data-sidebar="group-action"
445 |       className={cn(
446 |         "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
447 |         // Increases the hit area of the button on mobile.
448 |         "after:absolute after:-inset-2 after:md:hidden",
449 |         "group-data-[collapsible=icon]:hidden",
450 |         className,
451 |       )}
452 |       {...props}
453 |     />
454 |   );
455 | });
456 | SidebarGroupAction.displayName = "SidebarGroupAction";
457 | 
458 | const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
459 |   ({ className, ...props }, ref) => (
460 |     <div
461 |       ref={ref}
462 |       data-sidebar="group-content"
463 |       className={cn("w-full text-sm", className)}
464 |       {...props}
465 |     />
466 |   ),
467 | );
468 | SidebarGroupContent.displayName = "SidebarGroupContent";
469 | 
470 | const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
471 |   ({ className, ...props }, ref) => (
472 |     <ul
473 |       ref={ref}
474 |       data-sidebar="menu"
475 |       className={cn("flex w-full min-w-0 flex-col gap-1", className)}
476 |       {...props}
477 |     />
478 |   ),
479 | );
480 | SidebarMenu.displayName = "SidebarMenu";
481 | 
482 | const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
483 |   ({ className, ...props }, ref) => (
484 |     <li
485 |       ref={ref}
486 |       data-sidebar="menu-item"
487 |       className={cn("group/menu-item relative", className)}
488 |       {...props}
489 |     />
490 |   ),
491 | );
492 | SidebarMenuItem.displayName = "SidebarMenuItem";
493 | 
494 | const sidebarMenuButtonVariants = cva(
495 |   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
496 |   {
497 |     variants: {
498 |       variant: {
499 |         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
500 |         outline:
501 |           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
502 |       },
503 |       size: {
504 |         default: "h-8 text-sm",
505 |         sm: "h-7 text-xs",
506 |         lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
507 |       },
508 |     },
509 |     defaultVariants: {
510 |       variant: "default",
511 |       size: "default",
512 |     },
513 |   },
514 | );
515 | 
516 | const SidebarMenuButton = React.forwardRef<
517 |   HTMLButtonElement,
518 |   React.ButtonHTMLAttributes<HTMLButtonElement> & {
519 |     asChild?: boolean;
520 |     isActive?: boolean;
521 |     tooltip?: string | React.ComponentProps<typeof TooltipContent>;
522 |   } & VariantProps<typeof sidebarMenuButtonVariants>
523 | >(
524 |   (
525 |     {
526 |       asChild = false,
527 |       isActive = false,
528 |       variant = "default",
529 |       size = "default",
530 |       tooltip,
531 |       className,
532 |       ...props
533 |     },
534 |     ref,
535 |   ) => {
536 |     const Comp = asChild ? Slot : "button";
537 |     const { isMobile, state } = useSidebar();
538 | 
539 |     const button = (
540 |       <Comp
541 |         ref={ref}
542 |         data-sidebar="menu-button"
543 |         data-size={size}
544 |         data-active={isActive}
545 |         className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
546 |         {...props}
547 |       />
548 |     );
549 | 
550 |     if (!tooltip) {
551 |       return button;
552 |     }
553 | 
554 |     if (typeof tooltip === "string") {
555 |       tooltip = {
556 |         children: tooltip,
557 |       };
558 |     }
559 | 
560 |     return (
561 |       <Tooltip>
562 |         <TooltipTrigger asChild>{button}</TooltipTrigger>
563 |         <TooltipContent
564 |           side="right"
565 |           align="center"
566 |           hidden={state !== "collapsed" || isMobile}
567 |           {...tooltip}
568 |         />
569 |       </Tooltip>
570 |     );
571 |   },
572 | );
573 | SidebarMenuButton.displayName = "SidebarMenuButton";
574 | 
575 | const SidebarMenuAction = React.forwardRef<
576 |   HTMLButtonElement,
577 |   React.ButtonHTMLAttributes<HTMLButtonElement> & {
578 |     asChild?: boolean;
579 |     showOnHover?: boolean;
580 |   }
581 | >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
582 |   const Comp = asChild ? Slot : "button";
583 | 
584 |   return (
585 |     <Comp
586 |       ref={ref}
587 |       data-sidebar="menu-action"
588 |       className={cn(
589 |         "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
590 |         // Increases the hit area of the button on mobile.
591 |         "after:absolute after:-inset-2 after:md:hidden",
592 |         "peer-data-[size=sm]/menu-button:top-1",
593 |         "peer-data-[size=default]/menu-button:top-1.5",
594 |         "peer-data-[size=lg]/menu-button:top-2.5",
595 |         "group-data-[collapsible=icon]:hidden",
596 |         showOnHover &&
597 |           "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
598 |         className,
599 |       )}
600 |       {...props}
601 |     />
602 |   );
603 | });
604 | SidebarMenuAction.displayName = "SidebarMenuAction";
605 | 
606 | const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
607 |   ({ className, ...props }, ref) => (
608 |     <div
609 |       ref={ref}
610 |       data-sidebar="menu-badge"
611 |       className={cn(
612 |         "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
613 |         "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
614 |         "peer-data-[size=sm]/menu-button:top-1",
615 |         "peer-data-[size=default]/menu-button:top-1.5",
616 |         "peer-data-[size=lg]/menu-button:top-2.5",
617 |         "group-data-[collapsible=icon]:hidden",
618 |         className,
619 |       )}
620 |       {...props}
621 |     />
622 |   ),
623 | );
624 | SidebarMenuBadge.displayName = "SidebarMenuBadge";
625 | 
626 | const SidebarMenuSkeleton = React.forwardRef<
627 |   HTMLDivElement,
628 |   React.ComponentProps<"div"> & {
629 |     showIcon?: boolean;
630 |   }
631 | >(({ className, showIcon = false, ...props }, ref) => {
632 |   // Random width between 50 to 90%.
633 |   const width = React.useMemo(() => {
634 |     return `${Math.floor(Math.random() * 40) + 50}%`;
635 |   }, []);
636 | 
637 |   return (
638 |     <div
639 |       ref={ref}
640 |       data-sidebar="menu-skeleton"
641 |       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
642 |       {...props}
643 |     >
644 |       {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
645 |       <Skeleton
646 |         className="h-4 max-w-[--skeleton-width] flex-1"
647 |         data-sidebar="menu-skeleton-text"
648 |         style={
649 |           {
650 |             "--skeleton-width": width,
651 |           } as React.CSSProperties
652 |         }
653 |       />
654 |     </div>
655 |   );
656 | });
657 | SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
658 | 
659 | const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
660 |   ({ className, ...props }, ref) => (
661 |     <ul
662 |       ref={ref}
663 |       data-sidebar="menu-sub"
664 |       className={cn(
665 |         "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
666 |         "group-data-[collapsible=icon]:hidden",
667 |         className,
668 |       )}
669 |       {...props}
670 |     />
671 |   ),
672 | );
673 | SidebarMenuSub.displayName = "SidebarMenuSub";
674 | 
675 | const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
676 |   ({ ...props }, ref) => <li ref={ref} {...props} />,
677 | );
678 | SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
679 | 
680 | const SidebarMenuSubButton = React.forwardRef<
681 |   HTMLAnchorElement,
682 |   React.AnchorHTMLAttributes<HTMLAnchorElement> & {
683 |     asChild?: boolean;
684 |     size?: "sm" | "md";
685 |     isActive?: boolean;
686 |   }
687 | >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
688 |   const Comp = asChild ? Slot : "a";
689 | 
690 |   return (
691 |     <Comp
692 |       ref={ref}
693 |       data-sidebar="menu-sub-button"
694 |       data-size={size}
695 |       data-active={isActive}
696 |       className={cn(
697 |         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
698 |         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
699 |         size === "sm" && "text-xs",
700 |         size === "md" && "text-sm",
701 |         "group-data-[collapsible=icon]:hidden",
702 |         className,
703 |       )}
704 |       {...props}
705 |     />
706 |   );
707 | });
708 | SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
709 | 
710 | export {
711 |   Sidebar,
712 |   SidebarContent,
713 |   SidebarFooter,
714 |   SidebarGroup,
715 |   SidebarGroupAction,
716 |   SidebarGroupContent,
717 |   SidebarGroupLabel,
718 |   SidebarHeader,
719 |   SidebarInput,
720 |   SidebarInset,
721 |   SidebarMenu,
722 |   SidebarMenuAction,
723 |   SidebarMenuBadge,
724 |   SidebarMenuButton,
725 |   SidebarMenuItem,
726 |   SidebarMenuSkeleton,
727 |   SidebarMenuSub,
728 |   SidebarMenuSubButton,
729 |   SidebarMenuSubItem,
730 |   SidebarProvider,
731 |   SidebarRail,
732 |   SidebarSeparator,
733 |   SidebarTrigger,
734 |   useSidebar,
735 | };
736 | 


--------------------------------------------------------------------------------