frontend-shopify/nextjs-shopify-collection
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update shopify collection

Browse Source
This commit is contained in:
Rami Bitar
2026-06-10 13:48:13 -04:00
parent eeeafd36d3
commit fc42f2d114
95 changed files with 7228 additions and 6178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/api/hello/route.ts Normal file
View File

@@ -0,0 +1,5 @@
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
return NextResponse.json({ message: 'Hello, World' });
}

55
app/collections/[handle]/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import React from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import CollectionDetail from '@/components/shopify/collection-detail';
import { useCollectionProducts } from '@/hooks/use-shopify-collections';
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
export default function CollectionPage() {
const params = useParams();
const handle = params?.handle as string;
const { collection } = useCollectionProducts(handle);
// Format title from handle as fallback
const formattedTitle = handle
? handle.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
: 'Collection';
const title = collection?.title || formattedTitle;
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
<Breadcrumb className="mb-6">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/collections">Collections</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{title}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<CollectionDetail />
</div>
);
}

36
app/collections/page.tsx Normal file
View File

@@ -0,0 +1,36 @@
'use client';
import React from 'react';
import Link from 'next/link';
import Collections from '@/components/shopify/collections';
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
export default function CollectionsPage() {
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
<Breadcrumb className="mb-6">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Collections</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<Collections />
</div>
);
}

2
app/error.tsx
View File

@@ -1,5 +1,7 @@
"use client"; "use client";
import React from 'react';
export default function Error({ export default function Error({
error, error,
reset, reset,

24
app/globals.css
View File

@@ -1,8 +1,10 @@
@import 'tailwindcss'; @import 'tailwindcss';
@import "tw-animate-css";
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
@theme { @theme {
/* Background and foreground */ /* Background and foreground */
--color-background: hsl(0 0% 100%); --color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%); --color-foreground: hsl(222.2 84% 4.9%);
@@ -16,16 +18,16 @@
--color-popover-foreground: hsl(222.2 84% 4.9%); --color-popover-foreground: hsl(222.2 84% 4.9%);
/* Primary */ /* Primary */
--color-primary: hsl(222.2 47.4% 11.2%); --color-primary: hsl(0 0% 0%);
--color-primary-foreground: hsl(210 40% 98%); --color-primary-foreground: hsl(0 0% 100%);
/* Secondary */ /* Secondary */
--color-secondary: hsl(210 40% 96.1%); --color-secondary: hsl(210 40% 96.1%);
--color-secondary-foreground: hsl(222.2 47.4% 11.2%); --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
/* Muted */ /* Muted */
--color-muted: hsl(210 40% 96.1%); --color-muted: hsl(0 0% 96.1%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%); --color-muted-foreground: hsl(0 0% 45%);
/* Accent */ /* Accent */
--color-accent: hsl(210 40% 96.1%); --color-accent: hsl(210 40% 96.1%);
@@ -57,8 +59,9 @@
--radius-xl: 0.75rem; --radius-xl: 0.75rem;
/* Fonts */ /* Fonts */
--font-heading: "Space Grotesk", sans-serif; --font-heading: var(--font-poppins), 'Poppins', sans-serif;
--font-body: "Inter", sans-serif; --font-body: 'Inter', sans-serif;
} }
/* Dark mode */ /* Dark mode */
@@ -91,3 +94,12 @@
--color-sidebar-border: hsl(240 3.7% 15.9%); --color-sidebar-border: hsl(240 3.7% 15.9%);
--color-sidebar-ring: hsl(217.2 91.2% 59.8%); --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
} }
/* Set border color for all elements */
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-border);
}

42
app/layout.tsx
View File

@@ -1,13 +1,22 @@
import React from 'react';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { Toaster } from 'sonner'; import { Poppins } from 'next/font/google';
import { ShopifyProvider } from '@/contexts/shopify-context';
import CartDrawer from '@/components/CartDrawer';
import Theme from '@/components/Theme';
import './globals.css'; import './globals.css';
import { Providers } from './providers';
import ShopifyCart from '@/components/shopify/cart-drawer';
import ShopHeader from '@/components/shopify/shop-header';
import PromoBanner from '@/components/shopify/promo-banner';
import ShopFooter from '@/components/shopify/shop-footer';
const poppins = Poppins({
subsets: ['latin'],
weight: ['400', '500', '600', '700', '800'],
variable: '--font-poppins',
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Frontend', title: 'Frontend | Shopify',
description: 'Start prompting', description: 'Frontend Shopify Storefront',
}; };
export default function RootLayout({ export default function RootLayout({
@@ -16,19 +25,18 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en" className={poppins.variable}>
<head> <head></head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body className="m-0 p-0 font-body"> <body className="m-0 p-0 font-body">
<ShopifyProvider> <Providers>
<Theme /> <PromoBanner />
<div className="w-full flex flex-col min-h-[calc(100vh-80px)]"> <ShopHeader />
<main className="min-h-screen">
{children} {children}
</div> </main>
<Toaster /> <ShopFooter />
<CartDrawer /> <ShopifyCart />
</ShopifyProvider> </Providers>
</body> </body>
</html> </html>
); );

3
app/not-found.tsx
View File

@@ -1,5 +1,8 @@
"use client"; "use client";
import React from 'react';
import Link from 'next/link';
export default function NotFound() { export default function NotFound() {
return ( return (
<div className="flex items-center justify-center min-h-screen"> <div className="flex items-center justify-center min-h-screen">

21
app/page.tsx
View File

@@ -1,18 +1,11 @@
import Header from '@/components/Header'; import React from 'react';
import Footer from '@/components/Footer'; import CollectionDetail from '@/components/shopify/collection-detail';
import CollectionDetail from '@/components/CollectionDetail';
import config from '@/lib/config.json'; import config from '@/lib/config.json';
export default function Home() { const Home: React.FC = () => {
const collectionHandle = config.data.collection;
return ( return (
<div className="flex flex-col min-h-screen"> <CollectionDetail handle={config.data.collection} />
<Header />
<main className="flex-1">
<CollectionDetail collectionHandle={collectionHandle} />
</main>
<Footer />
</div>
); );
} };
export default Home;

7
app/products/[handle]/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
'use client';
import ProductDetail from '@/components/shopify/product-detail';
export default function ProductDetailPage() {
return <ProductDetail />;
}

12
app/providers.tsx Normal file
View File

@@ -0,0 +1,12 @@
'use client';
import React from 'react';
import { ShopifyProvider } from '@/contexts/shopify-context';
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ShopifyProvider>
{children}
</ShopifyProvider>
);
}

206
components/CartDrawer.tsx
View File

@@ -1,206 +0,0 @@
"use client";
import React, { useState } from 'react';
import { RiCloseLine, RiImageLine, RiSubtractLine, RiAddLine, RiLoader4Line } from '@remixicon/react';
import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetBody,
SheetFooter,
AnimatePresence,
} from './ui/sheet';
import { Button } from './ui/button';
const CartDrawer: React.FC = () => {
const {
isOpen,
items,
itemCount,
totalAmount,
checkoutUrl,
removeItem,
updateItemQuantity,
closeCart
} = useShopifyCart();
const [isCheckingOut, setIsCheckingOut] = useState(false);
const handleCheckout = async () => {
if (!checkoutUrl) return;
setIsCheckingOut(true);
try {
redirectToCheckout(checkoutUrl);
} catch (error) {
console.error('Error during checkout:', error);
alert('Failed to proceed to checkout. Please try again.');
setIsCheckingOut(false);
}
};
return (
<Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
<AnimatePresence>
{isOpen && (
<SheetContent className="w-full max-w-md" showCloseButton={false}>
{/* Header */}
<SheetHeader className="h-16 justify-center items-start">
<div className="flex items-center justify-between w-full">
<SheetTitle
className="text-2xl font-bold font-heading"
>
Shopping Cart ({itemCount})
</SheetTitle>
<button
onClick={closeCart}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<RiCloseLine className="text-sm" />
</button>
</div>
</SheetHeader>
{/* Cart Items */}
<SheetBody>
{items.length === 0 ? (
<div className="text-center py-12">
<h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
<p className="text-gray-500 mb-6">Add some products to get started!</p>
<Button onClick={closeCart}>
Continue Shopping
</Button>
</div>
) : (
<div className="space-y-6">
{items.map((item) => (
<div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
{/* Product Image */}
<div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
{item.merchandise.image?.url ? (
<img
src={item.merchandise.image.url}
alt={item.merchandise.image.altText || item.merchandise.product.title}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<RiImageLine className="text-lg" />
</div>
)}
</div>
{/* Product Details */}
<div className="flex-1 min-w-0">
<h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
{item.merchandise.product.title}
</h4>
{/* Variant Info */}
{item.merchandise.selectedOptions && item.merchandise.selectedOptions.length > 0 && (
<div className="text-sm text-gray-500 mb-2">
{item.merchandise.selectedOptions.map((option, index) => (
<span key={option.name}>
{option.value}
{index < item.merchandise.selectedOptions.length - 1 ? ' / ' : ''}
</span>
))}
</div>
)}
{/* Quantity Controls */}
<div className="flex items-center mt-3">
<div className="flex items-center border border-gray-300 rounded-lg">
<button
onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
className="p-1 hover:bg-gray-100 transition-colors text-gray-500"
disabled={item.quantity <= 1}
>
<RiSubtractLine className="text-xs" />
</button>
<span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
{item.quantity}
</span>
<button
onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
className="p-1 hover:bg-gray-100 transition-colors text-gray-500"
>
<RiAddLine className="text-xs" />
</button>
</div>
</div>
</div>
{/* Price */}
<div className="flex-shrink-0">
<span className="font-semibold text-gray-900">
${parseFloat(item.merchandise.price.amount).toFixed(2)}
</span>
</div>
{/* Remove Button */}
<div className="flex-shrink-0">
<button
onClick={() => removeItem(item.id)}
className="p-1 hover:bg-gray-100 rounded transition-colors text-gray-400 hover:text-red-500"
>
<RiCloseLine className="text-sm" />
</button>
</div>
</div>
))}
</div>
)}
</SheetBody>
{/* Footer - Checkout Section */}
{items.length > 0 && (
<SheetFooter className="!flex-col items-stretch gap-3">
{/* Subtotal */}
<div className="flex items-center justify-between mb-2">
<span className="text-lg font-semibold">Subtotal</span>
<span className="text-lg font-semibold">
${totalAmount.toFixed(2)}
</span>
</div>
<div className="text-sm text-gray-500 mb-2">
Shipping and taxes calculated at checkout
</div>
{/* Action Buttons */}
<Button
onClick={handleCheckout}
disabled={isCheckingOut || !checkoutUrl}
size="lg"
className="w-full"
>
{isCheckingOut ? (
<span className="flex items-center justify-center space-x-2">
<RiLoader4Line className="text-sm animate-spin" />
<span>Processing...</span>
</span>
) : (
'Checkout'
)}
</Button>
<Button
onClick={closeCart}
variant="outline"
size="lg"
className="w-full"
>
Continue Shopping
</Button>
</SheetFooter>
)}
</SheetContent>
)}
</AnimatePresence>
</Sheet>
);
};
export default CartDrawer;

180
components/CollectionDetail.tsx
View File

@@ -1,180 +0,0 @@
"use client";
import React, { useState } from 'react';
import { useCollectionProducts } from '@/hooks/use-shopify-collections';
import ProductCard from './ProductCard';
import ProductModal from './ProductModal';
import { Button } from './ui/button';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductPrice {
amount: string;
currencyCode: string;
}
interface ProductVariant {
id: string;
title: string;
price: ProductPrice;
availableForSale: boolean;
}
interface Product {
id: string;
title: string;
description?: string;
handle: string;
images: {
edges: Array<{
node: ProductImage;
}>;
};
priceRange: {
minVariantPrice: ProductPrice;
};
compareAtPriceRange?: {
minVariantPrice: ProductPrice;
};
variants: {
edges: Array<{
node: ProductVariant;
}>;
};
}
interface CollectionDetailProps {
collectionHandle?: string;
}
const CollectionDetail: React.FC<CollectionDetailProps> = ({ collectionHandle }) => {
const { collection, loading, error } = useCollectionProducts(collectionHandle || null, {
first: 20,
sortKey: 'BEST_SELLING',
reverse: false
});
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
if (loading) {
return (
<div className="py-16 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
Collection
</h2>
{/* Loading Skeleton */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{Array.from({ length: 8 }).map((_, index) => (
<div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
<div className="aspect-square bg-gray-200"></div>
<div className="p-6">
<div className="h-6 bg-gray-200 rounded mb-2"></div>
<div className="h-4 bg-gray-200 rounded mb-4"></div>
<div className="h-8 bg-gray-200 rounded mb-4"></div>
<div className="h-12 bg-gray-200 rounded"></div>
</div>
</div>
))}
</div>
</div>
</div>
);
}
if (error || !collection) {
return (
<div className="container mx-auto px-4 py-24 text-center">
<div className="max-w-lg mx-auto">
<div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
<i className="ri-shopping-bag-line text-3xl text-gray-400"></i>
</div>
<h2 className="text-2xl font-heading font-semibold text-gray-900 mb-3">
Collection Not Found
</h2>
<p className="text-gray-500 mb-8 leading-relaxed">
{error || "We couldn't find the collection you're looking for. It may have been removed or the link might be incorrect."}
</p>
<Button
onClick={() => window.history.back()}
variant="outline"
className="px-8"
>
<i className="ri-arrow-left-line mr-2"></i>
Go Back
</Button>
</div>
</div>
);
}
return (
<div className="bg-gray-50">
{/* Hero Banner */}
{collection.image && (
<div className="relative w-full h-[300px] md:h-[350px] lg:h-[400px]">
<img
src={collection.image.url}
alt={collection.image.altText || collection.title}
className="w-full h-full object-cover object-center"
/>
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-white text-center px-4 font-heading">
{collection.title}
</h1>
</div>
</div>
)}
{/* Products Section */}
<div className="py-16">
<div className="container mx-auto px-4">
{collection.products.length === 0 ? (
<div className="text-center py-12">
<div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
<i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
<h3 className="text-lg font-semibold text-gray-600 mb-2">
No Products in Collection
</h3>
<p className="text-gray-500">
This collection doesn't have any products yet.
</p>
</div>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{collection.products.map((product) => (
<ProductCard
key={product.id}
product={product}
onClick={(product) => {
setSelectedProduct(product);
setIsModalOpen(true);
}}
/>
))}
</div>
)}
</div>
</div>
{/* Product Modal */}
{selectedProduct && (
<ProductModal
product={selectedProduct}
isOpen={isModalOpen}
onClose={() => {
setIsModalOpen(false);
setSelectedProduct(null);
}}
/>
)}
</div>
);
};
export default CollectionDetail;

24
components/Footer.tsx
View File

@@ -1,24 +0,0 @@
import React from 'react';
const Footer: React.FC = () => {
return (
<footer className="bg-gray-100 text-gray-800 py-12">
<div className="container mx-auto px-4 text-center">
<h3
className="text-2xl font-bold mb-4"
style={{fontFamily: 'Space Grotesk, sans-serif'}}
>
Store
</h3>
<p className="text-gray-500 mb-6">
Your premium shopping destination
</p>
<div className="mt-8 pt-8 text-gray-500">
<p>&copy; 2025 Store. All rights reserved.</p>
</div>
</div>
</footer>
);
};
export default Footer;

53
components/Header.tsx
View File

@@ -1,53 +0,0 @@
"use client";
import React from 'react';
import Link from 'next/link';
import { RiShoppingBagLine } from '@remixicon/react';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import config from '../lib/config.json';
const CartIcon: React.FC = () => {
const { itemCount, toggleCart } = useShopifyCart();
return (
<button
onClick={toggleCart}
className="relative p-2 text-black hover:text-gray-600 transition-colors"
>
<RiShoppingBagLine className="text-2xl" />
{itemCount > 0 && (
<span className="absolute -top-1 -right-1 bg-black text-white text-xs rounded-full w-6 h-6 flex items-center justify-center font-semibold">
{itemCount > 99 ? '99+' : itemCount}
</span>
)}
</button>
);
};
const Header: React.FC = () => {
return (
<nav className="bg-white shadow-sm sticky top-0 z-30 h-16">
<div className="container mx-auto px-4 h-full">
<div className="flex justify-between items-center h-full">
{/* Logo */}
<Link href="/" className="text-2xl font-bold text-black font-heading">
{config.brand.logo.url ? (
<img
src={config.brand.logo.url}
alt={config.brand.logo.alt || 'Store'}
className="h-8"
/>
) : (
'Store'
)}
</Link>
{/* Cart Icon */}
<CartIcon />
</div>
</div>
</nav>
);
};
export default Header;

21
components/Home.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import Header from './Header';
import Footer from './Footer';
import CollectionDetail from './CollectionDetail';
import config from '../lib/config.json';
const Home: React.FC = () => {
const collectionHandle = config.data.collection;
return (
<div className="flex flex-col min-h-screen">
<Header />
<main className="flex-1">
<CollectionDetail collectionHandle={collectionHandle} />
</main>
<Footer />
</div>
);
};
export default Home;

148
components/ProductCard.tsx
View File

@@ -1,148 +0,0 @@
"use client";
import React from 'react';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import { truncate } from '../lib/utils';
import { Card, CardContent } from './ui/card';
import { Button } from './ui/button';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductPrice {
amount: string;
currencyCode: string;
}
interface ProductVariant {
id: string;
title: string;
price: ProductPrice;
availableForSale: boolean;
}
interface Product {
id: string;
title: string;
description?: string;
handle: string;
images: {
edges: Array<{
node: ProductImage;
}>;
};
priceRange: {
minVariantPrice: ProductPrice;
};
compareAtPriceRange?: {
minVariantPrice: ProductPrice;
};
variants: {
edges: Array<{
node: ProductVariant;
}>;
};
}
interface ProductCardProps {
product: Product;
onAddToCart?: (product: Product) => void;
onClick?: (product: Product) => void;
}
const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart, onClick }) => {
const { addItem, openCart } = useShopifyCart();
const firstImage = product.images.edges[0]?.node;
const price = product.priceRange.minVariantPrice;
const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
const firstVariant = product.variants.edges[0]?.node;
const isAvailable = firstVariant?.availableForSale || false;
const handleAddToCart = async (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (!firstVariant || !isAvailable) return;
try {
await addItem(firstVariant.id, 1);
openCart();
if (onAddToCart) {
onAddToCart(product);
}
} catch (error) {
console.error('Failed to add item to cart:', error);
}
};
return (
<Card className="!py-0 !gap-0 rounded-xs overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
{/* Product Image */}
<div
className="aspect-square overflow-hidden bg-gray-100 relative cursor-pointer"
onClick={() => {
if (onClick) {
onClick(product);
}
}}
>
{firstImage ? (
<img
src={firstImage.url}
alt={firstImage.altText || product.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<i className="ri-image-line text-6xl"></i>
</div>
)}
{/* Discount Badge */}
{hasDiscount && compareAtPrice && (
<div className="absolute top-3 left-3 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">
{Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
</div>
)}
</div>
{/* Product Info */}
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-2 font-heading">
{truncate(product.title, 60)}
</h3>
{/* Price Section */}
<div className="flex items-center justify-between mb-4">
<div>
<span className="text-sm font-bold text-muted-foreground">
${parseFloat(price.amount).toFixed(2)}
</span>
</div>
</div>
{/* View Details Button */}
<Button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
if (onClick) {
onClick(product);
}
}}
className="w-full"
size="lg"
>
View Details
</Button>
</CardContent>
</Card>
);
};
export default ProductCard;

106
components/ProductModal.tsx
View File

@@ -1,106 +0,0 @@
"use client";
import React, { useEffect } from 'react';
import ProductDetail from './product-detail/ProductDetail';
import { Button } from './ui/button';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductPrice {
amount: string;
currencyCode: string;
}
interface ProductVariant {
id: string;
title: string;
price: ProductPrice;
availableForSale: boolean;
}
interface Product {
id: string;
title: string;
description?: string;
handle: string;
images: {
edges: Array<{
node: ProductImage;
}>;
};
priceRange: {
minVariantPrice: ProductPrice;
};
compareAtPriceRange?: {
minVariantPrice: ProductPrice;
};
variants: {
edges: Array<{
node: ProductVariant;
}>;
};
}
interface ProductModalProps {
product: Product;
isOpen: boolean;
onClose: () => void;
}
const ProductModal: React.FC<ProductModalProps> = ({ product, isOpen, onClose }) => {
// Close modal on ESC key press
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
if (isOpen) {
document.addEventListener('keydown', handleEscape);
document.body.style.overflow = 'hidden';
}
return () => {
document.removeEventListener('keydown', handleEscape);
document.body.style.overflow = 'unset';
};
}, [isOpen, onClose]);
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
onClose();
}
};
if (!isOpen) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4"
onClick={handleBackdropClick}
>
<div className="bg-white rounded-lg shadow-2xl max-w-7xl w-full max-h-[90vh] overflow-y-auto relative">
{/* Close Button */}
<Button
onClick={onClose}
variant="ghost"
size="icon"
className="absolute top-4 right-4 z-10 bg-white rounded-full hover:bg-gray-100"
aria-label="Close modal"
>
<i className="ri-close-line text-2xl text-gray-700"></i>
</Button>
{/* Product Detail Component */}
<ProductDetail handle={product.handle} onAddToCart={onClose} />
</div>
</div>
);
};
export default ProductModal;

123
components/Theme.tsx
View File

@@ -1,123 +0,0 @@
import React from 'react';
import config from '../lib/config.json';
const Theme: React.FC = () => {
const headerFont = config.brand.fonts.header;
const bodyFont = config.brand.fonts.body;
const primaryColor = config.brand.colors.primary;
const secondaryColor = config.brand.colors.secondary;
return (
<>
{/* Font Imports */}
<link
href={`https://fonts.googleapis.com/css2?family=${headerFont}:wght@400;500;600;700;800&display=swap`}
rel="stylesheet"
/>
<link
href={`https://fonts.googleapis.com/css2?family=${bodyFont}:wght@300;400;500;600;700&display=swap`}
rel="stylesheet"
/>
{/* Tailwind Browser Script */}
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=typography,forms"></script>
{/* Theme Styles */}
<style type="text/tailwindcss">
{`
@theme {
/* Background and foreground */
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);
/* Card */
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(222.2 84% 4.9%);
/* Popover */
--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(222.2 84% 4.9%);
/* Primary */
--color-primary: ${primaryColor};
--color-primary-foreground: hsl(210 40% 98%);
/* Secondary */
--color-secondary: ${secondaryColor};
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
/* Muted */
--color-muted: hsl(210 40% 96.1%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
/* Accent */
--color-accent: hsl(210 40% 96.1%);
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
/* Destructive */
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(210 40% 98%);
/* Border, input, ring */
--color-border: hsl(214.3 31.8% 91.4%);
--color-input: hsl(214.3 31.8% 91.4%);
--color-ring: hsl(222.2 84% 4.9%);
/* Sidebar */
--color-sidebar: hsl(0 0% 98%);
--color-sidebar-foreground: hsl(240 5.3% 26.1%);
--color-sidebar-primary: hsl(240 5.9% 10%);
--color-sidebar-primary-foreground: hsl(0 0% 98%);
--color-sidebar-accent: hsl(240 4.8% 95.9%);
--color-sidebar-accent-foreground: hsl(240 5.9% 10%);
--color-sidebar-border: hsl(220 13% 91%);
--color-sidebar-ring: hsl(217.2 91.2% 59.8%);
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
/* Fonts from config */
--font-heading: "${headerFont.replace(/\+/g, ' ')}", sans-serif;
--font-body: "${bodyFont.replace(/\+/g, ' ')}", sans-serif;
}
/* Dark mode */
.dark {
--color-background: hsl(222.2 84% 4.9%);
--color-foreground: hsl(210 40% 98%);
--color-card: hsl(222.2 84% 4.9%);
--color-card-foreground: hsl(210 40% 98%);
--color-popover: hsl(222.2 84% 4.9%);
--color-popover-foreground: hsl(210 40% 98%);
--color-primary: hsl(210 40% 98%);
--color-primary-foreground: hsl(222.2 47.4% 11.2%);
--color-secondary: hsl(217.2 32.6% 17.5%);
--color-secondary-foreground: hsl(210 40% 98%);
--color-muted: hsl(217.2 32.6% 17.5%);
--color-muted-foreground: hsl(215 20.2% 65.1%);
--color-accent: hsl(217.2 32.6% 17.5%);
--color-accent-foreground: hsl(210 40% 98%);
--color-destructive: hsl(0 62.8% 30.6%);
--color-destructive-foreground: hsl(210 40% 98%);
--color-border: hsl(217.2 32.6% 17.5%);
--color-input: hsl(217.2 32.6% 17.5%);
--color-ring: hsl(212.7 26.8% 83.9%);
--color-sidebar: hsl(240 5.9% 10%);
--color-sidebar-foreground: hsl(240 4.8% 95.9%);
--color-sidebar-primary: hsl(224.3 76.3% 48%);
--color-sidebar-primary-foreground: hsl(0 0% 100%);
--color-sidebar-accent: hsl(240 3.7% 15.9%);
--color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
--color-sidebar-border: hsl(240 3.7% 15.9%);
--color-sidebar-ring: hsl(217.2 91.2% 59.8%);
}
`}
</style>
</>
);
};
export default Theme;

240
components/product-detail/ProductDetail.tsx
View File

@@ -1,240 +0,0 @@
"use client";
import React, { useState, useEffect } from 'react';
import { getProduct } from '@/hooks/use-shopify-products';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import ProductDetailGallery from './ProductDetailGallery';
import ProductDetailInfo from './ProductDetailInfo';
import { Button } from '../ui/button';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductPrice {
amount: string;
currencyCode: string;
}
export interface ProductVariant {
id: string;
title: string;
price: ProductPrice;
availableForSale: boolean;
selectedOptions: Array<{
name: string;
value: string;
}>;
image?: {
url: string;
altText?: string;
};
}
interface ProductOption {
id: string;
name: string;
values: string[];
}
export interface Product {
id: string;
title: string;
description?: string;
descriptionHtml?: string;
handle: string;
images: {
edges: Array<{
node: ProductImage;
}>;
};
priceRange: {
minVariantPrice: ProductPrice;
};
compareAtPriceRange?: {
minVariantPrice: ProductPrice;
};
variants: {
edges: Array<{
node: ProductVariant;
}>;
};
options: ProductOption[];
}
type ProductDetailProps = {
handle: string;
onAddToCart?: () => void;
}
const ProductDetail: React.FC<ProductDetailProps> = ({ handle, onAddToCart: onAddToCartCallback }) => {
const { addItem, openCart } = useShopifyCart();
const [product, setProduct] = useState<Product | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
const [quantity, setQuantity] = useState(1);
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
const [isAddingToCart, setIsAddingToCart] = useState(false);
useEffect(() => {
if (!handle) return;
const fetchProduct = async () => {
try {
setLoading(true);
setError(null);
const productData = await getProduct(handle);
if (!productData) {
setError('Product not found');
return;
}
setProduct(productData);
// Set default variant
const firstVariant = productData.variants.edges[0]?.node;
if (firstVariant) {
setSelectedVariant(firstVariant);
// Initialize selected options
const initialOptions: Record<string, string> = {};
firstVariant.selectedOptions.forEach(option => {
initialOptions[option.name] = option.value;
});
setSelectedOptions(initialOptions);
}
} catch (err) {
console.error('Error fetching product:', err);
setError(err instanceof Error ? err.message : 'Failed to load product');
} finally {
setLoading(false);
}
};
fetchProduct();
}, [handle]);
const handleOptionChange = (optionName: string, value: string) => {
const newOptions = { ...selectedOptions, [optionName]: value };
setSelectedOptions(newOptions);
// Find matching variant
const matchingVariant = product?.variants.edges.find(({ node }) => {
return node.selectedOptions.every(option =>
newOptions[option.name] === option.value
);
});
if (matchingVariant) {
setSelectedVariant(matchingVariant.node);
// Update image if variant has an associated image
if (matchingVariant.node.image && product) {
const imageIndex = product.images.edges.findIndex(
({ node }) => node.url === matchingVariant.node.image?.url
);
if (imageIndex !== -1) {
setSelectedImageIndex(imageIndex);
}
}
}
};
const handleAddToCart = async () => {
if (!selectedVariant || !product) return;
setIsAddingToCart(true);
try {
await addItem(selectedVariant.id, quantity);
openCart();
if (onAddToCartCallback) {
onAddToCartCallback();
}
} catch (error) {
console.error('Failed to add item to cart:', error);
} finally {
setIsAddingToCart(false);
}
};
if (loading) {
return (
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Image Gallery Skeleton */}
<div>
<div className="aspect-square bg-gray-200 rounded-lg animate-pulse mb-4"></div>
<div className="grid grid-cols-4 gap-2">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="aspect-square bg-gray-200 rounded animate-pulse"></div>
))}
</div>
</div>
{/* Product Info Skeleton */}
<div>
<div className="h-8 bg-gray-200 rounded mb-4 animate-pulse"></div>
<div className="h-6 bg-gray-200 rounded mb-6 w-1/3 animate-pulse"></div>
<div className="h-24 bg-gray-200 rounded mb-6 animate-pulse"></div>
<div className="h-12 bg-gray-200 rounded mb-4 animate-pulse"></div>
<div className="h-12 bg-gray-200 rounded animate-pulse"></div>
</div>
</div>
</div>
);
}
if (error || !product) {
return (
<div className="container mx-auto px-4 py-8 text-center">
<div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
<i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
<h3 className="text-lg font-semibold text-red-800 mb-2">
Product Not Found
</h3>
<p className="text-red-600 mb-4">
{error || 'The requested product could not be found.'}
</p>
<Button
onClick={() => window.history.back()}
variant="destructive"
>
Go Back
</Button>
</div>
</div>
);
}
return (
<div className="bg-white">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<ProductDetailGallery
images={product.images.edges.map(edge => edge.node)}
selectedImageIndex={selectedImageIndex}
onImageChange={setSelectedImageIndex}
/>
<ProductDetailInfo
product={product}
selectedVariant={selectedVariant}
selectedOptions={selectedOptions}
quantity={quantity}
setQuantity={setQuantity}
handleAddToCart={handleAddToCart}
onOptionChange={handleOptionChange}
isAddingToCart={isAddingToCart}
/>
</div>
</div>
</div>
);
};
export default ProductDetail;

59
components/product-detail/ProductDetailGallery.tsx
View File

@@ -1,59 +0,0 @@
import React from 'react';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductDetailGalleryProps {
images: ProductImage[];
selectedImageIndex: number;
onImageChange: (index: number) => void;
}
const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({ images, selectedImageIndex, onImageChange }) => {
return (
<div>
{/* Main Image */}
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
{images.length > 0 ? (
<img
src={images[selectedImageIndex].url}
alt={images[selectedImageIndex].altText || 'Product image'}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<i className="ri-image-line text-6xl"></i>
</div>
)}
</div>
{/* Image Thumbnails */}
{images.length > 1 && (
<div className="grid grid-cols-4 gap-2">
{images.map((image, index) => (
<button
key={index}
onClick={() => onImageChange(index)}
className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
selectedImageIndex === index
? 'border-black'
: 'border-gray-200 hover:border-gray-300'
}`}
>
<img
src={image.url}
alt={image.altText || 'Product thumbnail'}
className="w-full h-full object-cover"
/>
</button>
))}
</div>
)}
</div>
);
};
export default ProductDetailGallery;

85
components/product-detail/ProductRecommendations.tsx
View File

@@ -1,85 +0,0 @@
"use client";
import React, { useState, useEffect } from 'react';
import { getProductRecommendations } from '@/hooks/use-shopify-products';
import ProductCard from '../ProductCard';
interface ProductRecommendationsProps {
productId: string;
}
const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ productId }) => {
const [recommendedProducts, setRecommendedProducts] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchRecommendations = async () => {
if (!productId) return;
try {
setLoading(true);
setError(null);
const recommendations = await getProductRecommendations(productId);
setRecommendedProducts(recommendations);
} catch (err) {
console.error('Error fetching product recommendations:', err);
setError(err instanceof Error ? err.message : 'Failed to load recommendations');
} finally {
setLoading(false);
}
};
fetchRecommendations();
}, [productId]);
// Don't show section if we're not loading and have no recommendations
if (!loading && (!recommendedProducts || recommendedProducts.length === 0)) {
return null;
}
return (
<div className="bg-gray-50 py-16">
<div className="container mx-auto px-4">
<h2
className="text-4xl font-bold text-center mb-12 text-gray-900"
style={{ fontFamily: 'Space Grotesk, sans-serif' }}
>
You Might Also Like
</h2>
{loading ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{Array.from({ length: 4 }).map((_, index) => (
<div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
<div className="aspect-square bg-gray-200"></div>
<div className="p-6">
<div className="h-6 bg-gray-200 rounded mb-2"></div>
<div className="h-4 bg-gray-200 rounded mb-4"></div>
<div className="h-8 bg-gray-200 rounded mb-4"></div>
<div className="h-12 bg-gray-200 rounded"></div>
</div>
</div>
))}
</div>
) : error ? (
<div className="text-center py-8">
<p className="text-gray-500">Recommendations could not be loaded</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{recommendedProducts.slice(0, 4).map((recommendedProduct) => (
<ProductCard
key={recommendedProduct.id}
product={recommendedProduct}
/>
))}
</div>
)}
</div>
</div>
);
};
export default ProductRecommendations;

216
components/shopify/cart-drawer.tsx Normal file
View File

@@ -0,0 +1,216 @@
'use client';
import React from 'react';
import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
import { Button } from '@/components/ui/button';
import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from '@/components/ui/empty';
import { Loader } from '@/components/ui/loader';
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet';
import {
RiCloseLine,
RiImageLine,
RiSubtractLine,
RiAddLine,
} from '@remixicon/react';
const CartDrawer: React.FC = () => {
const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
const handleCheckout = () => {
if (checkoutUrl) {
redirectToCheckout(checkoutUrl);
}
};
const getItemImage = (item: typeof items[0]) => {
return item.merchandise.image?.url;
};
const getSelectedOptions = (item: typeof items[0]) => {
return item.merchandise.selectedOptions ?? [];
};
return (
<Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
<SheetContent className="w-full max-w-md" side="right" showCloseButton={false}>
{/* Header */}
<SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center">
<div className="flex items-center justify-between w-full">
<SheetTitle className="text-base">
Shopping Cart ({itemCount})
</SheetTitle>
<Button
onClick={closeCart}
variant="ghost"
size="icon-sm"
>
<RiCloseLine size={20} />
</Button>
</div>
</SheetHeader>
{/* Cart Items */}
<div className="flex-1 overflow-y-auto p-4">
{loading && items.length === 0 ? (
<div className="flex items-center justify-center py-12">
<Loader size={32} />
</div>
) : items.length === 0 ? (
<Empty className="py-12">
<EmptyHeader>
<EmptyTitle>Your cart is empty</EmptyTitle>
<EmptyDescription>Add some products to get started!</EmptyDescription>
</EmptyHeader>
<Button onClick={closeCart}>
Continue Shopping
</Button>
</Empty>
) : (
<div className="space-y-6">
{items.map((item) => {
const image = getItemImage(item);
const selectedOptions = getSelectedOptions(item);
return (
<div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
{/* Product Image */}
<div className="w-20 h-20 bg-gray-100 overflow-hidden flex-shrink-0">
{image ? (
<img
src={image}
alt={item.merchandise.product.title}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<RiImageLine size={24} />
</div>
)}
</div>
{/* Product Details */}
<div className="flex-1 min-w-0">
<h4 className="text-sm font-medium text-gray-900 mb-1 line-clamp-2">
{item.merchandise.product.title}
</h4>
{/* Variant Info */}
{selectedOptions.length > 0 && (
<div className="text-xs text-gray-500 mb-2">
{selectedOptions.map((option, index) => (
<span key={option.name}>
{option.value}
{index < selectedOptions.length - 1 ? ' / ' : ''}
</span>
))}
</div>
)}
{/* Quantity Controls */}
<div className="flex items-center mt-3">
<div className="flex items-center border border-gray-200 rounded-md">
<Button
onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
variant="ghost"
size="icon-sm"
disabled={item.quantity <= 1 || loading}
className="h-7 w-7"
>
<RiSubtractLine size={14} />
</Button>
<span className="px-2 py-1 font-medium min-w-[30px] text-center text-sm">
{item.quantity}
</span>
<Button
onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
variant="ghost"
size="icon-sm"
disabled={loading}
className="h-7 w-7"
>
<RiAddLine size={14} />
</Button>
</div>
</div>
</div>
{/* Price */}
<div className="flex-shrink-0">
<span className="text-sm text-gray-500">
${parseFloat(item.merchandise.price.amount).toFixed(2)}
</span>
</div>
{/* Remove Button */}
<div className="flex-shrink-0">
<Button
onClick={() => removeItem(item.id)}
variant="ghost"
size="icon-sm"
disabled={loading}
className="text-gray-400 hover:text-gray-900"
>
<RiCloseLine size={18} />
</Button>
</div>
</div>
);
})}
</div>
)}
</div>
{/* Footer - Checkout Section */}
{items.length > 0 && (
<div className="border-t border-border p-6">
{/* Subtotal */}
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-900">Subtotal</span>
<span className="text-sm font-medium text-gray-900">
${totalAmount.toFixed(2)}
</span>
</div>
<div className="text-xs text-gray-500 mb-4">
Shipping and taxes calculated at checkout
</div>
{/* Action Buttons */}
<div className="space-y-3">
<Button
onClick={handleCheckout}
disabled={loading || !checkoutUrl}
className="w-full h-14 rounded-full text-base"
size="lg"
>
{loading ? (
<span className="flex items-center justify-center space-x-2">
<Loader size={16} />
<span>Processing...</span>
</span>
) : (
'Checkout'
)}
</Button>
<Button
onClick={closeCart}
variant="link"
className="w-full"
>
Continue Shopping
</Button>
</div>
</div>
)}
</SheetContent>
</Sheet>
);
};
export default CartDrawer;

21
components/CollectionCard.tsx → components/shopify/collection-card.tsx
View File

@@ -20,10 +20,7 @@ interface CollectionCardProps {
const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => { const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
return ( return (
<Link <Link href={`/collections/${collection.handle}`} className="block group">
href={`/collections/${collection.handle}`}
className="bg-white rounded-xs shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden group block"
>
{/* Collection Image */} {/* Collection Image */}
<div className="aspect-video overflow-hidden bg-gray-100"> <div className="aspect-video overflow-hidden bg-gray-100">
{collection.image ? ( {collection.image ? (
@@ -40,22 +37,10 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
</div> </div>
{/* Collection Info */} {/* Collection Info */}
<div className="p-6"> <div className="mt-3">
<h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading"> <h3 className="text-base font-medium text-gray-900 font-heading">
{collection.title} {collection.title}
</h3> </h3>
{collection.description && (
<p className="text-gray-600">
{collection.description.substring(0, 100)}
{collection.description.length > 100 ? '...' : ''}
</p>
)}
<div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
<span>View Collection</span>
<i className="ri-arrow-right-s-line ml-2"></i>
</div>
</div> </div>
</Link> </Link>
); );

108
components/shopify/collection-detail.tsx Normal file
View File

@@ -0,0 +1,108 @@
'use client';
import React from 'react';
import { useParams } from 'next/navigation';
import { useCollectionProducts } from '@/hooks/use-shopify-collections';
import ProductCard from './product-card';
interface CollectionDetailProps {
handle?: string;
}
const CollectionDetail: React.FC<CollectionDetailProps> = ({ handle: handleProp }) => {
const params = useParams();
const handle = handleProp || (params?.handle as string);
const { collection, loading, error, refetch } = useCollectionProducts(handle);
// Format title from handle
const formattedTitle = handle
? handle.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
: 'Collection';
if (loading) {
return (
<div className="pt-4 pb-16">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
{formattedTitle}
</h2>
{/* Loading Skeleton */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{Array.from({ length: 6 }).map((_, index) => (
<div key={index} className="animate-pulse">
<div className="aspect-square bg-gray-200"></div>
<div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
<div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
</div>
))}
</div>
</div>
</div>
);
}
if (error) {
return (
<div className="pt-4 pb-16">
<div className="container mx-auto px-4 text-center">
<h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
{formattedTitle}
</h2>
<div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
<h3 className="text-lg font-medium text-red-800 mb-2">
Failed to Load Collection
</h3>
<p className="text-red-600 mb-4">
{error}
</p>
<button
onClick={() => refetch()}
className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
>
Try Again
</button>
</div>
</div>
</div>
);
}
const products = collection?.products || [];
const title = collection?.title || formattedTitle;
return (
<div className="pt-4 pb-16">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
{title}
</h2>
{products.length === 0 ? (
<div className="text-center py-12">
<div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
<h3 className="text-lg font-medium text-gray-600 mb-2">
No Products in Collection
</h3>
<p className="text-gray-500">
This collection doesn&apos;t have any products yet.
</p>
</div>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
)}
</div>
</div>
);
};
export default CollectionDetail;

51
components/Collections.tsx → components/shopify/collections.tsx
View File

@@ -1,31 +1,26 @@
"use client"; 'use client';
import React from 'react'; import React from 'react';
import { useCollections } from '@/hooks/use-shopify-collections'; import { useCollections } from '@/hooks/use-shopify-collections';
import CollectionCard from './CollectionCard'; import CollectionCard from './collection-card';
import { Button } from './ui/button';
const Collections: React.FC = () => { const Collections: React.FC = () => {
const { collections, loading, error, refetch } = useCollections(20); const { collections, loading, error, refetch } = useCollections(20);
if (loading) { if (loading) {
return ( return (
<div className="py-16 bg-gray-50"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4"> <div className="container mx-auto px-4">
<h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading"> <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
Our Collections Our Collections
</h2> </h2>
{/* Loading Skeleton */} {/* Loading Skeleton */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{Array.from({ length: 6 }).map((_, index) => ( {Array.from({ length: 6 }).map((_, index) => (
<div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"> <div key={index} className="animate-pulse">
<div className="aspect-video bg-gray-200"></div> <div className="aspect-video bg-gray-200"></div>
<div className="p-6"> <div className="mt-3 h-4 w-1/3 bg-gray-200 rounded"></div>
<div className="h-8 bg-gray-200 rounded mb-4"></div>
<div className="h-4 bg-gray-200 rounded mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
</div>
</div> </div>
))} ))}
</div> </div>
@@ -36,26 +31,26 @@ const Collections: React.FC = () => {
if (error) { if (error) {
return ( return (
<div className="py-16 bg-gray-50"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<h2 className="text-5xl font-bold mb-8 font-heading"> <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
Our Collections Our Collections
</h2> </h2>
<div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto"> <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i> <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
<h3 className="text-lg font-semibold text-red-800 mb-2"> <h3 className="text-lg font-medium text-red-800 mb-2">
Failed to Load Collections Failed to Load Collections
</h3> </h3>
<p className="text-red-600 mb-4"> <p className="text-red-600 mb-4">
{error} {error}
</p> </p>
<Button <button
onClick={() => refetch()} onClick={() => refetch()}
variant="destructive" className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
> >
Try Again Try Again
</Button> </button>
</div> </div>
</div> </div>
</div> </div>
@@ -64,15 +59,15 @@ const Collections: React.FC = () => {
if (collections.length === 0) { if (collections.length === 0) {
return ( return (
<div className="py-16 bg-gray-50"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<h2 className="text-5xl font-bold mb-8 font-heading"> <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
Our Collections Our Collections
</h2> </h2>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto"> <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-folder-line text-4xl text-gray-400 mb-4"></i> <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
<h3 className="text-lg font-semibold text-gray-600 mb-2"> <h3 className="text-lg font-medium text-gray-600 mb-2">
No Collections Found No Collections Found
</h3> </h3>
<p className="text-gray-500"> <p className="text-gray-500">
@@ -85,9 +80,9 @@ const Collections: React.FC = () => {
} }
return ( return (
<div className="py-16 bg-gray-50"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4"> <div className="container mx-auto px-4">
<h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading"> <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
Our Collections Our Collections
</h2> </h2>

129
components/shopify/product-card.tsx Normal file
View File

@@ -0,0 +1,129 @@
import React from 'react';
import Link from 'next/link';
import { useShopifyCart, addCartLines } from '@/hooks/use-shopify-cart';
import { truncate } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductPrice {
amount: string;
currencyCode: string;
}
interface ProductVariant {
id: string;
title: string;
price: ProductPrice;
availableForSale: boolean;
}
interface Product {
id: string;
title: string;
description?: string;
productType?: string;
handle: string;
images: {
edges: Array<{
node: ProductImage;
}>;
};
priceRange: {
minVariantPrice: ProductPrice;
};
compareAtPriceRange?: {
minVariantPrice: ProductPrice;
};
variants: {
edges: Array<{
node: ProductVariant;
}>;
};
}
interface ProductCardProps {
product: Product;
onAddToCart?: (product: Product) => void;
}
const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
const { cartId, openCart } = useShopifyCart();
const firstImage = product.images.edges[0]?.node;
const price = product.priceRange.minVariantPrice;
const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
const firstVariant = product.variants.edges[0]?.node;
const isAvailable = firstVariant?.availableForSale || false;
const formatPrice = (price: ProductPrice) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: price.currencyCode,
}).format(parseFloat(price.amount));
};
const handleAddToCart = async (e: React.MouseEvent) => {
e.preventDefault(); // Prevent navigation when clicking add to cart
e.stopPropagation();
if (!firstVariant || !isAvailable || !cartId) return;
try {
await addCartLines(cartId, [{ merchandiseId: firstVariant.id, quantity: 1 }]);
openCart();
if (onAddToCart) {
onAddToCart(product);
}
} catch (err) {
console.error('Failed to add item to cart:', err);
}
};
return (
<div className="group">
{/* Product Image */}
<div className="aspect-square overflow-hidden bg-gray-100 relative">
{firstImage ? (
<Link href={`/products/${product.handle}`}>
<img
src={firstImage.url}
alt={firstImage.altText || product.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
</Link>
) : (
<div className="w-full h-full flex items-center justify-center text-gray-400">
<i className="ri-image-line text-6xl"></i>
</div>
)}
{/* Discount Badge */}
{hasDiscount && compareAtPrice && (
<Badge variant="destructive" className="absolute top-3 left-3">
{Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
</Badge>
)}
</div>
{/* Product Info */}
<div className="mt-3">
<Link href={`/products/${product.handle}`}>
<h3 className="text-base font-medium text-gray-900 line-clamp-2 font-heading">
{truncate(product.title, 50)}
</h3>
</Link>
<p className="text-base text-gray-500">
${parseFloat(price.amount).toFixed(2)}
</p>
</div>
</div>
);
};
export default ProductCard;

3
components/shopify/product-detail.tsx Normal file
View File

@@ -0,0 +1,3 @@
import ProductDetail from './product-detail/index';
export default ProductDetail;

193
components/shopify/product-detail/index.tsx Normal file
View File

@@ -0,0 +1,193 @@
'use client';
import React, { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { useProduct, type Product } from '@/hooks/use-shopify-products';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import ProductDetailGallery from './product-detail-gallery';
import ProductDetailInfo from './product-detail-info';
import ProductRecommendations from '../product-recommendations';
import { Button } from '@/components/ui/button';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import { RiErrorWarningLine } from '@remixicon/react';
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
interface ProductVariant {
id: string;
title: string;
price: {
amount: string;
currencyCode: string;
};
availableForSale: boolean;
selectedOptions: Array<{
name: string;
value: string;
}>;
image?: {
url: string;
altText?: string;
};
}
export type { Product, ProductVariant };
interface ProductDetailProps {
handle?: string;
}
const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) => {
const params = useParams();
const handle = handleProp || (params?.handle as string);
const { addItem, openCart } = useShopifyCart();
const { product, loading, error } = useProduct(handle);
const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
const [quantity, setQuantity] = useState(1);
const [addingToCart, setAddingToCart] = useState(false);
// Initialize variant when product loads
useEffect(() => {
if (product) {
const firstVariant = product.variants.edges[0]?.node;
if (firstVariant) {
setSelectedVariant(firstVariant);
const initialOptions: Record<string, string> = {};
firstVariant.selectedOptions.forEach((option: { name: string; value: string }) => {
initialOptions[option.name] = option.value;
});
setSelectedOptions(initialOptions);
}
}
}, [product]);
const handleOptionChange = (optionName: string, value: string) => {
const newOptions = { ...selectedOptions, [optionName]: value };
setSelectedOptions(newOptions);
// Find matching variant
const matchingVariant = product?.variants.edges.find(({ node }) => {
return node.selectedOptions.every(option =>
newOptions[option.name] === option.value
);
});
if (matchingVariant) {
setSelectedVariant(matchingVariant.node);
}
};
const handleAddToCart = async () => {
if (!selectedVariant || !product) return;
try {
setAddingToCart(true);
await addItem(selectedVariant.id, quantity);
openCart();
} catch (err) {
console.error('Failed to add item to cart:', err);
} finally {
setAddingToCart(false);
}
};
if (loading) {
return (
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
{/* Image Gallery Skeleton */}
<div className="lg:col-span-2 grid grid-cols-2 gap-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="aspect-square bg-gray-200 animate-pulse"></div>
))}
</div>
{/* Product Info Skeleton */}
<div>
<div className="h-8 bg-gray-200 rounded mb-4 animate-pulse"></div>
<div className="h-6 bg-gray-200 rounded mb-6 w-1/3 animate-pulse"></div>
<div className="h-24 bg-gray-200 rounded mb-6 animate-pulse"></div>
<div className="h-12 bg-gray-200 rounded mb-4 animate-pulse"></div>
<div className="h-12 bg-gray-200 rounded animate-pulse"></div>
</div>
</div>
</div>
);
}
if (error || !product) {
return (
<div className="container mx-auto px-4 py-8 text-center">
<Alert variant="destructive" className="max-w-md mx-auto p-8">
<RiErrorWarningLine size={36} />
<AlertTitle className="text-lg font-medium">
Product Not Found
</AlertTitle>
<AlertDescription className="mb-4">
{error || 'The requested product could not be found.'}
</AlertDescription>
<Button
onClick={() => window.history.back()}
variant="destructive"
>
Go Back
</Button>
</Alert>
</div>
);
}
return (
<div className="min-h-screen bg-white">
<div className="container mx-auto px-4 py-8">
<Breadcrumb className="mb-6">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{product.title}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
<div className="lg:col-span-2">
<ProductDetailGallery
images={product.images.edges.map(edge => edge.node)}
/>
</div>
<div className="lg:sticky lg:top-20 lg:self-start">
<ProductDetailInfo
product={product}
selectedVariant={selectedVariant}
selectedOptions={selectedOptions}
quantity={quantity}
setQuantity={setQuantity}
handleAddToCart={handleAddToCart}
onOptionChange={handleOptionChange}
loading={addingToCart}
/>
</div>
</div>
</div>
<ProductRecommendations productId={product.id} />
</div>
);
};
export default ProductDetail;

73
components/shopify/product-detail/product-detail-gallery.tsx Normal file
View File

@@ -0,0 +1,73 @@
'use client';
import React, { useState } from 'react';
import { RiImageLine } from '@remixicon/react';
import { cn } from '@/lib/utils';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
interface ProductImage {
url: string;
altText?: string;
}
interface ProductDetailGalleryProps {
images: ProductImage[];
}
const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({ images }) => {
const [zoomedIndex, setZoomedIndex] = useState<number | null>(null);
if (images.length === 0) {
return (
<div className="aspect-square bg-gray-100 flex items-center justify-center text-gray-400">
<RiImageLine size={60} />
</div>
);
}
const zoomedImage = zoomedIndex !== null ? images[zoomedIndex] : null;
return (
<>
<div className="grid grid-cols-2 gap-4">
{images.map((image, index) => (
<button
key={index}
onClick={() => setZoomedIndex(index)}
className={cn(
'aspect-square bg-gray-100 overflow-hidden cursor-zoom-in group',
// A lone image (or the last of an odd count) spans both columns to avoid a gap
images.length % 2 === 1 && index === images.length - 1 && 'col-span-2'
)}
aria-label={`Zoom image ${index + 1}`}
>
<img
src={image.url}
alt={image.altText || `Product image ${index + 1}`}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
</button>
))}
</div>
{/* Zoom Lightbox */}
<Dialog
open={zoomedIndex !== null}
onOpenChange={(open) => !open && setZoomedIndex(null)}
>
<DialogContent className="max-w-4xl p-0 gap-0 overflow-hidden">
<DialogTitle className="sr-only">Product image</DialogTitle>
{zoomedImage && (
<img
src={zoomedImage.url}
alt={zoomedImage.altText || 'Product image'}
className="w-full h-auto max-h-[85vh] object-contain bg-gray-100"
/>
)}
</DialogContent>
</Dialog>
</>
);
};
export default ProductDetailGallery;

66
components/product-detail/ProductDetailInfo.tsx → components/shopify/product-detail/product-detail-info.tsx
View File

@@ -1,7 +1,15 @@
import React from 'react'; import React from 'react';
import { RiSubtractLine, RiAddLine, RiTruckLine, RiArrowGoBackLine, RiSecurePaymentLine, RiLoader4Line } from '@remixicon/react'; import { Product, ProductVariant } from './index';
import { Product, ProductVariant } from './ProductDetail.tsx'; import { Button } from '@/components/ui/button';
import { Button } from '../ui/button'; import { Badge } from '@/components/ui/badge';
import { Loader } from '@/components/ui/loader';
import {
RiSubtractLine,
RiAddLine,
RiTruckLine,
RiArrowGoBackLine,
RiSecurePaymentLine,
} from '@remixicon/react';
interface ProductDetailInfoProps { interface ProductDetailInfoProps {
product: Product; product: Product;
@@ -11,7 +19,7 @@ interface ProductDetailInfoProps {
setQuantity: (quantity: number) => void; setQuantity: (quantity: number) => void;
handleAddToCart: () => void; handleAddToCart: () => void;
onOptionChange: (optionName: string, value: string) => void; onOptionChange: (optionName: string, value: string) => void;
isAddingToCart?: boolean; loading?: boolean;
} }
const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
@@ -22,7 +30,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
setQuantity, setQuantity,
handleAddToCart, handleAddToCart,
onOptionChange, onOptionChange,
isAddingToCart = false loading = false,
}) => { }) => {
const formatPrice = (price: { amount: string; currencyCode: string }) => { const formatPrice = (price: { amount: string; currencyCode: string }) => {
return new Intl.NumberFormat('en-US', { return new Intl.NumberFormat('en-US', {
@@ -37,23 +45,23 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
return ( return (
<div> <div>
<h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading"> <h1 className="text-4xl font-medium tracking-tight text-gray-900 mb-2 font-heading">
{product.title} {product.title}
</h1> </h1>
{/* Price */} {/* Price */}
<div className="flex items-center space-x-4 mb-6"> <div className="flex items-center space-x-3 mb-8">
<span className="text-2xl font-bold text-gray-900"> <span className="text-lg text-gray-500">
{formatPrice(price)} {formatPrice(price)}
</span> </span>
{hasDiscount && compareAtPrice && ( {hasDiscount && compareAtPrice && (
<> <>
<span className="text-xl text-gray-500 line-through"> <span className="text-lg text-gray-400 line-through">
{formatPrice(compareAtPrice)} {formatPrice(compareAtPrice)}
</span> </span>
<div className="bg-red-100 text-red-800 text-sm font-semibold px-3 py-1 rounded"> <Badge variant="destructive">
{Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
</div> </Badge>
</> </>
)} )}
</div> </div>
@@ -69,12 +77,12 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
</div> </div>
)} )}
{/* Product Options */} {/* Product Options (skip Shopify's placeholder "Title: Default Title" option) */}
{product.options {product.options
.filter(option => option.name !== 'Title') .filter(option => !(option.name === 'Title' && option.values.length === 1 && option.values[0] === 'Default Title'))
.map(option => ( .map(option => (
<div key={option.id} className="mb-6"> <div key={option.id} className="mb-6">
<label className="block text-sm font-semibold text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-900 mb-2">
{option.name} {option.name}
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -93,43 +101,43 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
{/* Quantity Selector */} {/* Quantity Selector */}
<div className="mb-8"> <div className="mb-8">
<label className="block text-sm font-semibold text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-900 mb-2">
Quantity Quantity
</label> </label>
<div className="flex items-center border border-gray-300 rounded-lg w-32"> <div className="flex items-center border border-gray-200 rounded-md w-fit">
<Button <Button
onClick={() => setQuantity(Math.max(1, quantity - 1))} onClick={() => setQuantity(Math.max(1, quantity - 1))}
variant="ghost" variant="ghost"
size="icon-sm" size="icon-sm"
disabled={quantity <= 1} disabled={quantity <= 1}
> >
<RiSubtractLine /> <RiSubtractLine size={16} />
</Button> </Button>
<span className="flex-1 text-center font-semibold text-sm">{quantity}</span> <span className="w-10 text-center text-sm font-medium">{quantity}</span>
<Button <Button
onClick={() => setQuantity(quantity + 1)} onClick={() => setQuantity(quantity + 1)}
variant="ghost" variant="ghost"
size="icon-sm" size="icon-sm"
> >
<RiAddLine /> <RiAddLine size={16} />
</Button> </Button>
</div> </div>
</div> </div>
{/* Add to Cart Button */} {/* Add to Bag Button */}
<Button <Button
onClick={handleAddToCart} onClick={handleAddToCart}
disabled={!selectedVariant?.availableForSale || isAddingToCart} disabled={!selectedVariant?.availableForSale || loading}
size="lg" size="lg"
className="w-full py-4 text-lg" className="w-full h-14 rounded-full text-base"
> >
{isAddingToCart ? ( {loading ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<RiLoader4Line className="animate-spin" /> <Loader size={16} />
Adding... <span>Adding...</span>
</span> </span>
) : selectedVariant?.availableForSale ? ( ) : selectedVariant?.availableForSale ? (
'Add to Cart' 'Add to Bag'
) : ( ) : (
'Out of Stock' 'Out of Stock'
)} )}
@@ -139,15 +147,15 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
<div className="mt-8 pt-8 border-t border-gray-200"> <div className="mt-8 pt-8 border-t border-gray-200">
<div className="space-y-3 text-sm text-gray-600"> <div className="space-y-3 text-sm text-gray-600">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<RiTruckLine /> <RiTruckLine size={16} />
<span>Free shipping on orders over $100</span> <span>Free shipping on orders over $100</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<RiArrowGoBackLine /> <RiArrowGoBackLine size={16} />
<span>30-day return policy</span> <span>30-day return policy</span>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<RiSecurePaymentLine /> <RiSecurePaymentLine size={16} />
<span>Secure payment</span> <span>Secure payment</span>
</div> </div>
</div> </div>

55
components/shopify/product-recommendations.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import React from 'react';
import { useProductRecommendations } from '@/hooks/use-shopify-products';
import ProductCard from './product-card';
interface ProductRecommendationsProps {
productId: string;
}
const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ productId }) => {
const { recommendations, loading, error } = useProductRecommendations(productId);
// Don't show section if we're not loading and have no recommendations
if (!loading && (!recommendations || recommendations.length === 0)) {
return null;
}
return (
<div className="py-16">
<div className="container mx-auto px-4">
<h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
You Might Also Like
</h2>
{loading ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{Array.from({ length: 3 }).map((_, index) => (
<div key={index} className="animate-pulse">
<div className="aspect-square bg-gray-200"></div>
<div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
<div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
</div>
))}
</div>
) : error ? (
<div className="text-center py-8">
<p className="text-gray-500">Recommendations could not be loaded</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{recommendations.slice(0, 3).map((recommendedProduct) => (
<ProductCard
key={recommendedProduct.id}
product={recommendedProduct}
/>
))}
</div>
)}
</div>
</div>
);
};
export default ProductRecommendations;

69
components/Products.tsx → components/shopify/products.tsx
View File

@@ -1,9 +1,10 @@
"use client"; 'use client';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import ProductCard from './ProductCard'; import ProductCard from './product-card';
import { getProducts } from '@/hooks/use-shopify-products'; import { getProducts } from '@/hooks/use-shopify-products';
import { Button } from './ui/button'; import { Button } from '@/components/ui/button';
import { Loader } from '@/components/ui/loader';
interface ProductImage { interface ProductImage {
url: string; url: string;
@@ -49,14 +50,12 @@ interface ProductsProps {
title?: string; title?: string;
limit?: number; limit?: number;
showLoadMore?: boolean; showLoadMore?: boolean;
onViewDetails?: (product: Product) => void;
} }
const Products: React.FC<ProductsProps> = ({ const Products: React.FC<ProductsProps> = ({
title = "Our Products", title = "Shop All",
limit = 12, limit = 12,
showLoadMore = true, showLoadMore = true
onViewDetails
}) => { }) => {
const [products, setProducts] = useState<Product[]>([]); const [products, setProducts] = useState<Product[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -120,24 +119,18 @@ const Products: React.FC<ProductsProps> = ({
if (loading) { if (loading) {
return ( return (
<div className="py-16"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4"> <div className="container mx-auto px-4">
<h2 <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
className="text-4xl font-bold text-center mb-12 font-heading"
>
{title} {title}
</h2> </h2>
{/* Loading Skeleton */} {/* Loading Skeleton */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{Array.from({ length: 8 }).map((_, index) => ( {Array.from({ length: 6 }).map((_, index) => (
<div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"> <div key={index} className="animate-pulse">
<div className="aspect-square bg-gray-200"></div> <div className="aspect-square bg-gray-200"></div>
<div className="p-6"> <div className="mt-3 h-4 w-2/3 bg-gray-200 rounded"></div>
<div className="h-6 bg-gray-200 rounded mb-2"></div> <div className="mt-2 h-4 w-1/4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded mb-4"></div>
<div className="h-8 bg-gray-200 rounded mb-4"></div>
<div className="h-12 bg-gray-200 rounded"></div>
</div>
</div> </div>
))} ))}
</div> </div>
@@ -149,16 +142,14 @@ const Products: React.FC<ProductsProps> = ({
if (error) { if (error) {
return ( return (
<div className="py-16"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<h2 <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
className="text-4xl font-bold mb-8 font-heading"
>
{title} {title}
</h2> </h2>
<div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto"> <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i> <i className="ri-error-warning-line text-4xl text-red-500 mb-4 block"></i>
<h3 className="text-lg font-semibold text-red-800 mb-2"> <h3 className="text-lg font-medium text-red-800 mb-2">
Failed to Load Products Failed to Load Products
</h3> </h3>
<p className="text-red-600 mb-4"> <p className="text-red-600 mb-4">
@@ -179,16 +170,14 @@ const Products: React.FC<ProductsProps> = ({
if (products.length === 0) { if (products.length === 0) {
return ( return (
<div className="py-16"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<h2 <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
className="text-4xl font-bold mb-8 font-heading"
>
{title} {title}
</h2> </h2>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto"> <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i> <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
<h3 className="text-lg font-semibold text-gray-600 mb-2"> <h3 className="text-lg font-medium text-gray-600 mb-2">
No Products Found No Products Found
</h3> </h3>
<p className="text-gray-500"> <p className="text-gray-500">
@@ -201,22 +190,19 @@ const Products: React.FC<ProductsProps> = ({
} }
return ( return (
<div className="py-16 bg-gray-50"> <div className="py-16">
<div className="max-w-7xl mx-auto px-4"> <div className="container mx-auto px-4">
<h2 <h2 className="text-4xl font-medium tracking-tight text-center mb-12 text-gray-900 font-heading">
className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading"
>
{title} {title}
</h2> </h2>
{/* Products Grid */} {/* Products Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-12"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
{products.map((product) => ( {products.map((product) => (
<ProductCard <ProductCard
key={product.id} key={product.id}
product={product} product={product}
onAddToCart={handleAddToCart} onAddToCart={handleAddToCart}
onClick={onViewDetails}
/> />
))} ))}
</div> </div>
@@ -228,10 +214,11 @@ const Products: React.FC<ProductsProps> = ({
onClick={handleLoadMore} onClick={handleLoadMore}
disabled={loadingMore} disabled={loadingMore}
size="lg" size="lg"
className="font-heading"
> >
{loadingMore ? ( {loadingMore ? (
<span className="flex items-center space-x-2"> <span className="flex items-center space-x-2">
<i className="ri-loader-4-line animate-spin"></i> <Loader size={16} />
<span>Loading...</span> <span>Loading...</span>
</span> </span>
) : ( ) : (

55
components/shopify/promo-banner.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import React from 'react';
import Link from 'next/link';
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from '@/components/ui/carousel';
const PROMOS = [
{ text: 'Send a Gift Card', href: '/' },
{ text: 'Free shipping on orders over $100', href: '/' },
{ text: '30-day return policy', href: '/' },
];
const PromoBanner: React.FC = () => {
return (
<div className="bg-muted">
<Carousel opts={{ loop: true }} className="container mx-auto px-4">
<CarouselContent>
{PROMOS.map((promo) => (
<CarouselItem key={promo.text}>
<div className="h-10 flex items-center justify-center">
<Link
href={promo.href}
className="text-xs font-medium text-gray-900 underline underline-offset-2 hover:text-gray-600 transition-colors"
>
{promo.text}
</Link>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious
variant="ghost"
className="left-0 size-7 text-gray-900 hover:text-gray-600"
>
<RiArrowLeftSLine size={16} />
</CarouselPrevious>
<CarouselNext
variant="ghost"
className="right-0 size-7 text-gray-900 hover:text-gray-600"
>
<RiArrowRightSLine size={16} />
</CarouselNext>
</Carousel>
</div>
);
};
export default PromoBanner;

114
components/shopify/search-dialog.tsx Normal file
View File

@@ -0,0 +1,114 @@
'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Command } from 'cmdk';
import { RiSearchLine } from '@remixicon/react';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Loader } from '@/components/ui/loader';
import { getProducts, type Product } from '@/hooks/use-shopify-products';
interface SearchDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
const SearchDialog: React.FC<SearchDialogProps> = ({ open, onOpenChange }) => {
const router = useRouter();
const [products, setProducts] = useState<Product[]>([]);
const [loading, setLoading] = useState(false);
const [query, setQuery] = useState('');
// Load the catalog once per open; cmdk filters it as the user types
useEffect(() => {
if (!open) {
setQuery('');
return;
}
let cancelled = false;
setLoading(true);
getProducts({ first: 100, sortKey: 'TITLE' })
.then((data) => {
if (!cancelled) setProducts(data);
})
.catch((err) => {
console.error('Failed to load products for search:', err);
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
}, [open]);
const handleSelect = (handle: string) => {
onOpenChange(false);
router.push(`/products/${handle}`);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl p-0 gap-0 overflow-hidden [&>button]:hidden">
<DialogTitle className="sr-only">Search products</DialogTitle>
<Command label="Search products">
<div className="flex items-center gap-2 border-b border-gray-200 px-4">
<RiSearchLine size={16} className="text-gray-400 shrink-0" />
<Command.Input
value={query}
onValueChange={setQuery}
placeholder="Search products..."
className="h-12 w-full bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400"
/>
</div>
<Command.List className="max-h-80 overflow-y-auto p-2">
{loading ? (
<div className="flex items-center justify-center py-8">
<Loader size={20} />
</div>
) : (
<>
<Command.Empty className="py-8 text-center text-sm text-gray-500">
No products found.
</Command.Empty>
{products.map((product) => {
const image = product.images.edges[0]?.node;
const price = product.priceRange.minVariantPrice;
return (
<Command.Item
key={product.id}
value={product.title}
onSelect={() => handleSelect(product.handle)}
className="flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm data-[selected=true]:bg-gray-100"
>
<div className="w-10 h-10 bg-gray-100 overflow-hidden shrink-0">
{image && (
<img
src={image.url}
alt={image.altText || product.title}
className="w-full h-full object-cover"
/>
)}
</div>
<span className="flex-1 truncate font-medium text-gray-900">
{product.title}
</span>
<span className="text-gray-500 shrink-0">
${parseFloat(price.amount).toFixed(2)}
</span>
</Command.Item>
);
})}
</>
)}
</Command.List>
</Command>
</DialogContent>
</Dialog>
);
};
export default SearchDialog;

16
components/shopify/shop-footer.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
const Footer: React.FC = () => {
return (
<footer className="bg-white border-t border-gray-200 py-6">
<div className="container mx-auto px-4 flex items-center justify-between text-sm text-gray-500">
<span className="font-medium text-gray-900 font-heading">
Store
</span>
<p>&copy; 2025 Store. All rights reserved.</p>
</div>
</footer>
);
};
export default Footer;

83
components/shopify/shop-header.tsx Normal file
View File

@@ -0,0 +1,83 @@
'use client';
import React, { useState } from 'react';
import Link from 'next/link';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import config from '@/lib/config.json';
import { RiSearchLine, RiShoppingBagLine } from '@remixicon/react';
import SearchDialog from './search-dialog';
const CartIcon: React.FC = () => {
const { toggleCart, itemCount } = useShopifyCart();
return (
<button
onClick={toggleCart}
className="relative p-1 text-black hover:text-gray-600 transition-colors"
>
<RiShoppingBagLine size={20} />
{itemCount > 0 && (
<span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-medium">
{itemCount > 99 ? '99+' : itemCount}
</span>
)}
</button>
);
};
const Header: React.FC = () => {
const [searchOpen, setSearchOpen] = useState(false);
return (
<nav className="bg-white/70 backdrop-blur-md border-b border-gray-200/60 sticky top-0 z-30 h-14">
<div className="container mx-auto px-4 h-full">
<div className="flex justify-between items-center h-full">
{/* Logo */}
<Link href="/" className="text-lg font-medium text-black font-heading">
{config.brand.logo.url ? (
<img
src={config.brand.logo.url}
alt={config.brand.logo.alt || 'Store'}
className="h-8"
/>
) : (
'Store'
)}
</Link>
{/* Navigation Links */}
<div className="flex items-center space-x-6">
<Link
href="/"
className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
>
Products
</Link>
<Link
href="/collections"
className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
>
Collections
</Link>
{/* Search + Cart Icons */}
<div className="flex items-center space-x-2">
<button
onClick={() => setSearchOpen(true)}
className="p-1 text-black hover:text-gray-600 transition-colors"
aria-label="Search products"
>
<RiSearchLine size={20} />
</button>
<CartIcon />
</div>
</div>
</div>
</div>
<SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
</nav>
);
};
export default Header;

195
components/ui/accordion.tsx
View File

@@ -1,197 +1,66 @@
import React, { createContext, useContext, useState, useCallback } from 'react'; "use client"
import { cn } from '@/lib/utils';
interface AccordionContextType { import * as React from "react"
value: string | string[]; import * as AccordionPrimitive from "@radix-ui/react-accordion"
onValueChange: (value: string) => void; import { ChevronDownIcon } from "lucide-react"
type: 'single' | 'multiple';
}
const AccordionContext = createContext<AccordionContextType | undefined>( import { cn } from "@/lib/utils"
undefined
);
interface AccordionItemContextType {
value: string;
}
const AccordionItemContext = createContext<
AccordionItemContextType | undefined
>(undefined);
function useAccordion() {
const context = useContext(AccordionContext);
if (!context) {
throw new Error('Accordion components must be used within an Accordion');
}
return context;
}
function useAccordionItem() {
const context = useContext(AccordionItemContext);
if (!context) {
throw new Error(
'AccordionTrigger and AccordionContent must be used within an AccordionItem'
);
}
return context;
}
interface AccordionProps {
type?: 'single' | 'multiple';
value?: string | string[];
onValueChange?: (value: string | string[]) => void;
children: React.ReactNode;
}
function Accordion({ function Accordion({
type = 'single', ...props
value: controlledValue, }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
onValueChange, return <AccordionPrimitive.Root data-slot="accordion" {...props} />
children,
}: AccordionProps) {
const [internalValue, setInternalValue] = useState<string | string[]>(
type === 'single' ? '' : []
);
const isControlled = controlledValue !== undefined;
const value = isControlled ? controlledValue : internalValue;
const handleValueChange = useCallback(
(itemValue: string) => {
if (type === 'single') {
const newValue = value === itemValue ? '' : itemValue;
if (!isControlled) {
setInternalValue(newValue);
}
onValueChange?.(newValue);
} else {
const valueArray = Array.isArray(value) ? value : [];
const newValue = valueArray.includes(itemValue)
? valueArray.filter((v) => v !== itemValue)
: [...valueArray, itemValue];
if (!isControlled) {
setInternalValue(newValue);
}
onValueChange?.(newValue);
}
},
[value, type, isControlled, onValueChange]
);
return (
<AccordionContext.Provider
value={{ value, onValueChange: handleValueChange, type }}
>
<div data-slot="accordion">{children}</div>
</AccordionContext.Provider>
);
} }
interface AccordionItemProps { function AccordionItem({
value: string; className,
children: React.ReactNode; ...props
className?: string; }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
}
function AccordionItem({ value, children, className }: AccordionItemProps) {
return ( return (
<AccordionItemContext.Provider value={{ value }}> <AccordionPrimitive.Item
<div
data-slot="accordion-item" data-slot="accordion-item"
className={cn('border-b border-border last:border-b-0', className)} className={cn("border-b last:border-b-0", className)}
data-value={value} {...props}
> />
{children} )
</div>
</AccordionItemContext.Provider>
);
}
interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
} }
function AccordionTrigger({ function AccordionTrigger({
className, className,
children, children,
...props ...props
}: AccordionTriggerProps) { }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
const accordion = useAccordion();
const item = useAccordionItem();
const handleClick = () => {
accordion.onValueChange(item.value);
};
const isOpen =
accordion.type === 'single'
? accordion.value === item.value
: Array.isArray(accordion.value) && accordion.value.includes(item.value);
return ( return (
<div className="flex"> <AccordionPrimitive.Header className="flex">
<button <AccordionPrimitive.Trigger
data-slot="accordion-trigger" data-slot="accordion-trigger"
className={cn( className={cn(
'flex flex-1 items-start justify-between gap-4 rounded-md py-4 px-0 text-left text-sm font-medium transition-all outline-none hover:cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-md disabled:pointer-events-none disabled:opacity-50', "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
isOpen && '[&>svg]:rotate-180',
className className
)} )}
onClick={handleClick}
data-state={isOpen ? 'open' : 'closed'}
{...props} {...props}
> >
{children} {children}
<svg <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
xmlns="http://www.w3.org/2000/svg" </AccordionPrimitive.Trigger>
width="24" </AccordionPrimitive.Header>
height="24" )
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
</div>
);
}
interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
} }
function AccordionContent({ function AccordionContent({
className, className,
children, children,
...props ...props
}: AccordionContentProps) { }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
const accordion = useAccordion();
const item = useAccordionItem();
const isOpen =
accordion.type === 'single'
? accordion.value === item.value
: Array.isArray(accordion.value) && accordion.value.includes(item.value);
return ( return (
<div <AccordionPrimitive.Content
data-slot="accordion-content" data-slot="accordion-content"
data-state={isOpen ? 'open' : 'closed'} className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
className={cn(
'overflow-hidden text-sm transition-all duration-200',
isOpen ? 'max-h-96' : 'max-h-0'
)}
{...props} {...props}
> >
<div className={cn('pt-0 pb-4', className)}>{children}</div> <div className={cn("pt-0 pb-4", className)}>{children}</div>
</div> </AccordionPrimitive.Content>
); )
} }
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

144
components/ui/alert-dialog.tsx Normal file
View File

@@ -0,0 +1,144 @@
'use client';
import * as React from 'react';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
import { buttonVariants } from '@/components/ui/button';
import { cn } from '@/lib/utils';
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlay = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
'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',
className
)}
{...props}
ref={ref}
/>
));
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<div className="fixed inset-0 z-50 flex items-center justify-center">
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
'relative grid w-full max-w-lg gap-4 border border-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 sm:rounded-lg',
className
)}
{...props}
/>
</div>
</AlertDialogPortal>
));
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col space-y-2 text-center sm:text-left',
className
)}
{...props}
/>
);
AlertDialogHeader.displayName = 'AlertDialogHeader';
const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className
)}
{...props}
/>
);
AlertDialogFooter.displayName = 'AlertDialogFooter';
const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn('text-lg font-semibold', className)}
{...props}
/>
));
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
{...props}
/>
));
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(
buttonVariants({ variant: 'outline' }),
'mt-2 sm:mt-0',
className
)}
{...props}
/>
));
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
};

26
components/ui/alert.tsx
View File

@@ -1,28 +1,34 @@
import * as React from "react" import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
type AlertVariant = "default" | "destructive" const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
const baseClasses = {
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current" variants: {
variant: {
const variantClasses: Record<AlertVariant, string> = {
default: "bg-card text-card-foreground", default: "bg-card text-card-foreground",
destructive: destructive:
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
} },
},
defaultVariants: {
variant: "default",
},
}
)
function Alert({ function Alert({
className, className,
variant = "default", variant,
...props ...props
}: React.ComponentProps<"div"> & { variant?: AlertVariant }) { }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return ( return (
<div <div
data-slot="alert" data-slot="alert"
role="alert" role="alert"
className={cn(baseClasses, variantClasses[variant], className)} className={cn(alertVariants({ variant }), className)}
{...props} {...props}
/> />
) )

11
components/ui/aspect-ratio.tsx Normal file
View File

@@ -0,0 +1,11 @@
"use client"
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
function AspectRatio({
...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}
export { AspectRatio }

126
components/ui/avatar.tsx
View File

@@ -1,81 +1,109 @@
import React from 'react'; "use client"
import { cn } from '@/lib/utils';
interface AvatarProps extends React.ComponentProps<'div'> { import * as React from "react"
size?: 'sm' | 'md' | 'lg' | 'xl'; import * as AvatarPrimitive from "@radix-ui/react-avatar"
}
const sizeClasses = { import { cn } from "@/lib/utils"
sm: 'size-6',
md: 'size-8',
lg: 'size-10',
xl: 'size-12',
};
function Avatar({ className, size = 'md', ...props }: AvatarProps) {
const [imageError, setImageError] = React.useState(false);
function Avatar({
className,
size = "default",
...props
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
size?: "default" | "sm" | "lg"
}) {
return ( return (
<div <AvatarPrimitive.Root
data-slot="avatar" data-slot="avatar"
data-size={size}
className={cn( className={cn(
'relative flex shrink-0 overflow-hidden rounded-full', "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
sizeClasses[size],
className className
)} )}
{...props} {...props}
/> />
); )
} }
function AvatarImage({ function AvatarImage({
className, className,
onError,
...props ...props
}: React.ComponentProps<'img'>) { }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
const [hasError, setHasError] = React.useState(false);
const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {
setHasError(true);
onError?.(e as any);
};
if (hasError) {
return null;
}
return ( return (
<img <AvatarPrimitive.Image
data-slot="avatar-image" data-slot="avatar-image"
className={cn('aspect-square h-full w-full object-cover', className)} className={cn("aspect-square size-full", className)}
onError={handleError}
{...props} {...props}
/> />
); )
}
interface AvatarFallbackProps extends React.ComponentProps<'div'> {
children: React.ReactNode;
} }
function AvatarFallback({ function AvatarFallback({
className, className,
children,
...props ...props
}: AvatarFallbackProps) { }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return ( return (
<div <AvatarPrimitive.Fallback
data-slot="avatar-fallback" data-slot="avatar-fallback"
className={cn( className={cn(
'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full font-medium text-sm', "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
className className
)} )}
{...props} {...props}
> />
{children} )
</div>
);
} }
export { Avatar, AvatarImage, AvatarFallback }; function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
export type { AvatarProps }; return (
<span
data-slot="avatar-badge"
className={cn(
"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
className
)}
{...props}
/>
)
}
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="avatar-group"
className={cn(
"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
className
)}
{...props}
/>
)
}
function AvatarGroupCount({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="avatar-group-count"
className={cn(
"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
className
)}
{...props}
/>
)
}
export {
Avatar,
AvatarImage,
AvatarFallback,
AvatarBadge,
AvatarGroup,
AvatarGroupCount,
}

73
components/ui/badge.tsx
View File

@@ -1,53 +1,48 @@
import React from 'react'; import * as React from "react"
import { cn } from '@/lib/utils'; import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'; import { cn } from "@/lib/utils"
interface BadgeProps extends React.ComponentProps<'span'> { const badgeVariants = cva(
variant?: BadgeVariant; "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
asChild?: boolean; {
} variants: {
variant: {
const badgeVariants: Record<BadgeVariant, string> = { default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
default:
'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
secondary: secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90', "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive: destructive:
'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: outline:
'text-foreground border-border hover:bg-accent hover:text-accent-foreground', "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
}; ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
link: "text-primary underline-offset-4 [a&]:hover:underline",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({ function Badge({
className, className,
variant = 'default', variant = "default",
asChild = false, asChild = false,
children,
...props ...props
}: BadgeProps) { }: React.ComponentProps<"span"> &
const baseClasses = cn( VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
'inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden', const Comp = asChild ? Slot : "span"
'[&>svg]:size-3 [&>svg]:pointer-events-none [&>svg]:shrink-0'
);
const variantClasses = badgeVariants[variant];
const finalClassName = cn(baseClasses, variantClasses, className);
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement, {
className: cn(children.props.className, finalClassName),
...props,
});
}
return ( return (
<span data-slot="badge" className={finalClassName} {...props}> <Comp
{children} data-slot="badge"
</span> data-variant={variant}
); className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
} }
export { Badge, badgeVariants }; export { Badge, badgeVariants }
export type { BadgeProps };

103
components/ui/breadcrumb.tsx
View File

@@ -1,140 +1,101 @@
import React from 'react'; import * as React from "react"
import { cn } from '@/lib/utils'; import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"
function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { import { cn } from "@/lib/utils"
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
} }
function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
return ( return (
<ol <ol
data-slot="breadcrumb-list" data-slot="breadcrumb-list"
className={cn( className={cn(
'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
className className
)} )}
{...props} {...props}
/> />
); )
} }
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) { function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
return ( return (
<li <li
data-slot="breadcrumb-item" data-slot="breadcrumb-item"
className={cn('inline-flex items-center gap-1.5', className)} className={cn("inline-flex items-center gap-1.5", className)}
{...props} {...props}
/> />
); )
} }
function BreadcrumbLink({ function BreadcrumbLink({
asChild, asChild,
className, className,
children,
...props ...props
}: React.ComponentProps<'a'> & { }: React.ComponentProps<"a"> & {
asChild?: boolean; asChild?: boolean
}) { }) {
if (asChild && React.isValidElement(children)) { const Comp = asChild ? Slot : "a"
return React.cloneElement(children as React.ReactElement, {
className: cn(
'hover:text-foreground transition-colors',
children.props.className,
className
),
...props,
});
}
return ( return (
<a <Comp
data-slot="breadcrumb-link" data-slot="breadcrumb-link"
className={cn('hover:text-foreground transition-colors', className)} className={cn("hover:text-foreground transition-colors", className)}
{...props} {...props}
> />
{children} )
</a>
);
} }
function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="breadcrumb-page" data-slot="breadcrumb-page"
role="link" role="link"
aria-disabled="true" aria-disabled="true"
aria-current="page" aria-current="page"
className={cn('text-foreground font-normal', className)} className={cn("text-foreground font-normal", className)}
{...props} {...props}
/> />
); )
} }
function BreadcrumbSeparator({ function BreadcrumbSeparator({
children, children,
className, className,
...props ...props
}: React.ComponentProps<'li'>) { }: React.ComponentProps<"li">) {
return ( return (
<li <li
data-slot="breadcrumb-separator" data-slot="breadcrumb-separator"
role="presentation" role="presentation"
aria-hidden="true" aria-hidden="true"
className={cn('[&>svg]:size-3.5', className)} className={cn("[&>svg]:size-3.5", className)}
{...props} {...props}
> >
{children ?? ( {children ?? <ChevronRight />}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-3.5"
>
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
)}
</li> </li>
); )
} }
function BreadcrumbEllipsis({ function BreadcrumbEllipsis({
className, className,
...props ...props
}: React.ComponentProps<'span'>) { }: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="breadcrumb-ellipsis" data-slot="breadcrumb-ellipsis"
role="presentation" role="presentation"
aria-hidden="true" aria-hidden="true"
className={cn('flex size-9 items-center justify-center', className)} className={cn("flex size-9 items-center justify-center", className)}
{...props} {...props}
> >
<svg <MoreHorizontal className="size-4" />
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
<span className="sr-only">More</span> <span className="sr-only">More</span>
</span> </span>
); )
} }
export { export {
@@ -145,4 +106,4 @@ export {
BreadcrumbPage, BreadcrumbPage,
BreadcrumbSeparator, BreadcrumbSeparator,
BreadcrumbEllipsis, BreadcrumbEllipsis,
}; }

96
components/ui/button-group.tsx
View File

@@ -1,97 +1,83 @@
import React from 'react'; import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
// Utility function to combine classNames import { cn } from "@/lib/utils"
function cn(...classes: (string | undefined | null | false)[]): string { import { Separator } from "@/components/ui/separator"
return classes.filter(Boolean).join(' ');
}
// Button group variants helper const buttonGroupVariants = cva(
function getButtonGroupVariants( "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
orientation: 'horizontal' | 'vertical' {
): string { variants: {
const baseStyles = orientation: {
'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*="w-"])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2';
const orientationStyles = {
horizontal: horizontal:
'[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none', "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
vertical: vertical:
'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none', "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
}; },
},
return cn(baseStyles, orientationStyles[orientation]); defaultVariants: {
} orientation: "horizontal",
},
interface ButtonGroupProps extends React.ComponentProps<'div'> { }
orientation?: 'horizontal' | 'vertical'; )
}
function ButtonGroup({ function ButtonGroup({
className, className,
orientation = 'horizontal', orientation,
...props ...props
}: ButtonGroupProps) { }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
return ( return (
<div <div
role="group" role="group"
data-slot="button-group" data-slot="button-group"
data-orientation={orientation} data-orientation={orientation}
className={cn(getButtonGroupVariants(orientation), className)} className={cn(buttonGroupVariants({ orientation }), className)}
{...props} {...props}
/> />
); )
}
interface ButtonGroupTextProps extends React.ComponentProps<'div'> {
asChild?: boolean;
} }
function ButtonGroupText({ function ButtonGroupText({
className, className,
asChild = false, asChild = false,
...props ...props
}: ButtonGroupTextProps) { }: React.ComponentProps<"div"> & {
const Comp = asChild ? 'div' : 'div'; asChild?: boolean
}) {
const Comp = asChild ? Slot : "div"
return ( return (
<Comp <Comp
data-slot="button-group-text"
className={cn( className={cn(
'bg-muted flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4', "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...props} {...props}
/> />
); )
}
interface ButtonGroupSeparatorProps extends React.ComponentProps<'div'> {
orientation?: 'horizontal' | 'vertical';
} }
function ButtonGroupSeparator({ function ButtonGroupSeparator({
className, className,
orientation = 'vertical', orientation = "vertical",
...props ...props
}: ButtonGroupSeparatorProps) { }: React.ComponentProps<typeof Separator>) {
const separatorClasses =
orientation === 'vertical' ? 'w-px h-auto' : 'h-px w-auto';
return ( return (
<div <Separator
data-slot="button-group-separator" data-slot="button-group-separator"
orientation={orientation}
className={cn( className={cn(
'bg-border relative !m-0 self-stretch', "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
separatorClasses,
className className
)} )}
{...props} {...props}
/> />
); )
} }
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText }; export {
export type { ButtonGroup,
ButtonGroupProps, ButtonGroupSeparator,
ButtonGroupTextProps, ButtonGroupText,
ButtonGroupSeparatorProps, buttonGroupVariants,
}; }

106
components/ui/button.tsx
View File

@@ -1,70 +1,64 @@
import React from 'react'; import * as React from "react"
import { cn } from '@/lib/utils'; import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { import { cn } from "@/lib/utils"
variant?:
| 'default'
| 'destructive'
| 'outline'
| 'secondary'
| 'ghost'
| 'link';
size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
children?: React.ReactNode;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const buttonVariants = cva(
({ className, variant = 'default', size = 'default', ...props }, ref) => { "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
const baseClasses = cn( {
// Base styles variants: {
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all', variant: {
'disabled:pointer-events-none disabled:opacity-50', default: "bg-primary text-primary-foreground hover:bg-primary/90",
'[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
'shrink-0 [&_svg]:shrink-0',
'outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
);
const variantClasses = {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: destructive:
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: outline:
'border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: ghost:
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: 'text-primary underline-offset-4 hover:underline', link: "text-primary underline-offset-4 hover:underline",
}; },
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8",
"icon-lg": "size-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
const sizeClasses = { function Button({
default: 'h-9 px-4 py-2 has-[>svg]:px-3', className,
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', variant = "default",
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', size = "default",
icon: 'size-9', asChild = false,
'icon-sm': 'size-8', ...props
'icon-lg': 'size-10', }: React.ComponentProps<"button"> &
}; VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot : "button"
return ( return (
<button <Comp
ref={ref}
data-slot="button" data-slot="button"
data-variant={variant} data-variant={variant}
data-size={size} data-size={size}
className={cn( className={cn(buttonVariants({ variant, size, className }))}
baseClasses,
variantClasses[variant],
sizeClasses[size],
className
)}
{...props} {...props}
/> />
); )
} }
);
Button.displayName = 'Button'; export { Button, buttonVariants }
export { Button };
export default Button;

220
components/ui/calendar.tsx Normal file
View File

@@ -0,0 +1,220 @@
"use client"
import * as React from "react"
import {
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from "lucide-react"
import {
DayPicker,
getDefaultClassNames,
type DayButton,
} from "react-day-picker"
import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"
function Calendar({
className,
classNames,
showOutsideDays = true,
captionLayout = "label",
buttonVariant = "ghost",
formatters,
components,
...props
}: React.ComponentProps<typeof DayPicker> & {
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
}) {
const defaultClassNames = getDefaultClassNames()
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn(
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className
)}
captionLayout={captionLayout}
formatters={{
formatMonthDropdown: (date) =>
date.toLocaleString("default", { month: "short" }),
...formatters,
}}
classNames={{
root: cn("w-fit", defaultClassNames.root),
months: cn(
"flex gap-4 flex-col md:flex-row relative",
defaultClassNames.months
),
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
nav: cn(
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
defaultClassNames.nav
),
button_previous: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
defaultClassNames.button_previous
),
button_next: cn(
buttonVariants({ variant: buttonVariant }),
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
defaultClassNames.button_next
),
month_caption: cn(
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
defaultClassNames.month_caption
),
dropdowns: cn(
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
defaultClassNames.dropdowns
),
dropdown_root: cn(
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
defaultClassNames.dropdown_root
),
dropdown: cn(
"absolute bg-popover inset-0 opacity-0",
defaultClassNames.dropdown
),
caption_label: cn(
"select-none font-medium",
captionLayout === "label"
? "text-sm"
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
defaultClassNames.caption_label
),
table: "w-full border-collapse",
weekdays: cn("flex", defaultClassNames.weekdays),
weekday: cn(
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
defaultClassNames.weekday
),
week: cn("flex w-full mt-2", defaultClassNames.week),
week_number_header: cn(
"select-none w-(--cell-size)",
defaultClassNames.week_number_header
),
week_number: cn(
"text-[0.8rem] select-none text-muted-foreground",
defaultClassNames.week_number
),
day: cn(
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
props.showWeekNumber
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
: "[&:first-child[data-selected=true]_button]:rounded-l-md",
defaultClassNames.day
),
range_start: cn(
"rounded-l-md bg-accent",
defaultClassNames.range_start
),
range_middle: cn("rounded-none", defaultClassNames.range_middle),
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
today: cn(
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
defaultClassNames.today
),
outside: cn(
"text-muted-foreground aria-selected:text-muted-foreground",
defaultClassNames.outside
),
disabled: cn(
"text-muted-foreground opacity-50",
defaultClassNames.disabled
),
hidden: cn("invisible", defaultClassNames.hidden),
...classNames,
}}
components={{
Root: ({ className, rootRef, ...props }) => {
return (
<div
data-slot="calendar"
ref={rootRef}
className={cn(className)}
{...props}
/>
)
},
Chevron: ({ className, orientation, ...props }) => {
if (orientation === "left") {
return (
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
)
}
if (orientation === "right") {
return (
<ChevronRightIcon
className={cn("size-4", className)}
{...props}
/>
)
}
return (
<ChevronDownIcon className={cn("size-4", className)} {...props} />
)
},
DayButton: CalendarDayButton,
WeekNumber: ({ children, ...props }) => {
return (
<td {...props}>
<div className="flex size-(--cell-size) items-center justify-center text-center">
{children}
</div>
</td>
)
},
...components,
}}
{...props}
/>
)
}
function CalendarDayButton({
className,
day,
modifiers,
...props
}: React.ComponentProps<typeof DayButton>) {
const defaultClassNames = getDefaultClassNames()
const ref = React.useRef<HTMLButtonElement>(null)
React.useEffect(() => {
if (modifiers.focused) ref.current?.focus()
}, [modifiers.focused])
return (
<Button
ref={ref}
variant="ghost"
size="icon"
data-day={day.date.toLocaleDateString()}
data-selected-single={
modifiers.selected &&
!modifiers.range_start &&
!modifiers.range_end &&
!modifiers.range_middle
}
data-range-start={modifiers.range_start}
data-range-end={modifiers.range_end}
data-range-middle={modifiers.range_middle}
className={cn(
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
defaultClassNames.day,
className
)}
{...props}
/>
)
}
export { Calendar, CalendarDayButton }

2
components/ui/card.tsx
View File

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div <div
data-slot="card" data-slot="card"
className={cn( className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 shadow-sm", "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className className
)} )}
{...props} {...props}

318
components/ui/carousel.tsx
View File

@@ -1,245 +1,243 @@
import React, { "use client"
createContext,
useContext,
useState,
useCallback,
useRef,
useEffect,
} from 'react';
import { cn } from '@/lib/utils';
import { Button } from './button';
interface CarouselContextType { import * as React from "react"
currentIndex: number; import useEmblaCarousel, {
totalItems: number; type UseEmblaCarouselType,
scrollPrev: () => void; } from "embla-carousel-react"
scrollNext: () => void; import { ArrowLeft, ArrowRight } from "lucide-react"
canScrollPrev: boolean;
canScrollNext: boolean; import { cn } from "@/lib/utils"
orientation: 'horizontal' | 'vertical'; import { Button } from "@/components/ui/button"
type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]
type CarouselProps = {
opts?: CarouselOptions
plugins?: CarouselPlugin
orientation?: "horizontal" | "vertical"
setApi?: (api: CarouselApi) => void
} }
const CarouselContext = createContext<CarouselContextType | undefined>( type CarouselContextProps = {
undefined carouselRef: ReturnType<typeof useEmblaCarousel>[0]
); api: ReturnType<typeof useEmblaCarousel>[1]
scrollPrev: () => void
scrollNext: () => void
canScrollPrev: boolean
canScrollNext: boolean
} & CarouselProps
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
function useCarousel() { function useCarousel() {
const context = useContext(CarouselContext); const context = React.useContext(CarouselContext)
if (!context) {
throw new Error('Carousel components must be used within a Carousel');
}
return context;
}
interface CarouselProps { if (!context) {
children: React.ReactNode; throw new Error("useCarousel must be used within a <Carousel />")
orientation?: 'horizontal' | 'vertical'; }
className?: string;
autoPlay?: boolean; return context
autoPlayInterval?: number;
} }
function Carousel({ function Carousel({
children, orientation = "horizontal",
orientation = 'horizontal', opts,
setApi,
plugins,
className, className,
autoPlay = false, children,
autoPlayInterval = 3000, ...props
}: CarouselProps) { }: React.ComponentProps<"div"> & CarouselProps) {
const [currentIndex, setCurrentIndex] = useState(0); const [carouselRef, api] = useEmblaCarousel(
const itemCount = React.Children.count(children); {
const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null); ...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
)
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
const [canScrollNext, setCanScrollNext] = React.useState(false)
const canScrollPrev = currentIndex > 0; const onSelect = React.useCallback((api: CarouselApi) => {
const canScrollNext = currentIndex < itemCount - 1; if (!api) return
setCanScrollPrev(api.canScrollPrev())
setCanScrollNext(api.canScrollNext())
}, [])
const scrollPrev = useCallback(() => { const scrollPrev = React.useCallback(() => {
setCurrentIndex((prev) => Math.max(0, prev - 1)); api?.scrollPrev()
}, []); }, [api])
const scrollNext = useCallback(() => { const scrollNext = React.useCallback(() => {
setCurrentIndex((prev) => Math.min(itemCount - 1, prev + 1)); api?.scrollNext()
}, [itemCount]); }, [api])
useEffect(() => { const handleKeyDown = React.useCallback(
if (!autoPlay) return; (event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === "ArrowLeft") {
autoPlayTimerRef.current = setInterval(() => { event.preventDefault()
setCurrentIndex((prev) => { scrollPrev()
if (prev >= itemCount - 1) { } else if (event.key === "ArrowRight") {
return 0; event.preventDefault()
scrollNext()
} }
return prev + 1; },
}); [scrollPrev, scrollNext]
}, autoPlayInterval); )
React.useEffect(() => {
if (!api || !setApi) return
setApi(api)
}, [api, setApi])
React.useEffect(() => {
if (!api) return
onSelect(api)
api.on("reInit", onSelect)
api.on("select", onSelect)
return () => { return () => {
if (autoPlayTimerRef.current) { api?.off("select", onSelect)
clearInterval(autoPlayTimerRef.current);
} }
}; }, [api, onSelect])
}, [autoPlay, autoPlayInterval, itemCount]);
return ( return (
<CarouselContext.Provider <CarouselContext.Provider
value={{ value={{
currentIndex, carouselRef,
totalItems: itemCount, api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev, scrollPrev,
scrollNext, scrollNext,
canScrollPrev, canScrollPrev,
canScrollNext, canScrollNext,
orientation,
}} }}
> >
<div <div
className={cn('relative', className)} onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region" role="region"
aria-roledescription="carousel" aria-roledescription="carousel"
data-slot="carousel" data-slot="carousel"
{...props}
> >
{children} {children}
</div> </div>
</CarouselContext.Provider> </CarouselContext.Provider>
); )
} }
interface CarouselContentProps { function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
className?: string; const { carouselRef, orientation } = useCarousel()
children: React.ReactNode;
}
function CarouselContent({ className, children }: CarouselContentProps) {
const { currentIndex, orientation } = useCarousel();
return ( return (
<div <div
className={cn('overflow-hidden', className)} ref={carouselRef}
className="overflow-hidden"
data-slot="carousel-content" data-slot="carousel-content"
> >
<div <div
className={cn( className={cn(
'flex transition-transform duration-300 ease-out', "flex",
orientation === 'horizontal' ? 'flex-row' : 'flex-col' orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)} )}
style={{ {...props}
transform: />
orientation === 'horizontal'
? `translateX(-${currentIndex * 100}%)`
: `translateY(-${currentIndex * 100}%)`,
}}
>
{children}
</div> </div>
</div> )
);
} }
interface CarouselItemProps { function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
className?: string; const { orientation } = useCarousel()
children: React.ReactNode;
}
function CarouselItem({ className, children }: CarouselItemProps) {
const { orientation } = useCarousel();
return ( return (
<div <div
role="group" role="group"
aria-roledescription="slide" aria-roledescription="slide"
data-slot="carousel-item" data-slot="carousel-item"
className={cn('min-w-0 shrink-0 grow-0 basis-full', className)} className={cn(
> "min-w-0 shrink-0 grow-0 basis-full",
{children} orientation === "horizontal" ? "pl-4" : "pt-4",
</div> className
); )}
{...props}
/>
)
} }
interface CarouselPreviousProps { function CarouselPrevious({
className?: string; className,
} variant = "outline",
size = "icon",
function CarouselPrevious({ className }: CarouselPreviousProps) { children,
const { scrollPrev, canScrollPrev, orientation } = useCarousel(); ...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return ( return (
<Button <Button
data-slot="carousel-previous" data-slot="carousel-previous"
variant="outline" variant={variant}
onClick={scrollPrev} size={size}
disabled={!canScrollPrev}
className={cn( className={cn(
'absolute size-10 rounded-full p-0 flex items-center justify-center', "absolute size-8 rounded-full",
orientation === 'horizontal' orientation === "horizontal"
? 'top-1/2 left-2 -translate-y-1/2' ? "top-1/2 -left-12 -translate-y-1/2"
: 'top-2 left-1/2 -translate-x-1/2 -rotate-90', : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className className
)} )}
aria-label="Previous slide" disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
> >
<svg {children ?? <ArrowLeft />}
xmlns="http://www.w3.org/2000/svg" <span className="sr-only">Previous slide</span>
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="M15 18l-6-6 6-6" />
</svg>
</Button> </Button>
); )
} }
interface CarouselNextProps { function CarouselNext({
className?: string; className,
} variant = "outline",
size = "icon",
function CarouselNext({ className }: CarouselNextProps) { children,
const { scrollNext, canScrollNext, orientation } = useCarousel(); ...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return ( return (
<Button <Button
data-slot="carousel-next" data-slot="carousel-next"
variant="outline" variant={variant}
onClick={scrollNext} size={size}
disabled={!canScrollNext}
className={cn( className={cn(
'absolute size-10 rounded-full p-0 flex items-center justify-center', "absolute size-8 rounded-full",
orientation === 'horizontal' orientation === "horizontal"
? 'top-1/2 right-2 -translate-y-1/2' ? "top-1/2 -right-12 -translate-y-1/2"
: 'bottom-2 left-1/2 -translate-x-1/2 rotate-90', : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className className
)} )}
aria-label="Next slide" disabled={!canScrollNext}
onClick={scrollNext}
{...props}
> >
<svg {children ?? <ArrowRight />}
xmlns="http://www.w3.org/2000/svg" <span className="sr-only">Next slide</span>
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="M9 18l6-6-6-6" />
</svg>
</Button> </Button>
); )
} }
export { export {
type CarouselApi,
Carousel, Carousel,
CarouselContent, CarouselContent,
CarouselItem, CarouselItem,
CarouselPrevious, CarouselPrevious,
CarouselNext, CarouselNext,
useCarousel, }
};

32
components/ui/checkbox.tsx Normal file
View File

@@ -0,0 +1,32 @@
"use client"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Checkbox({
className,
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none"
>
<CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
)
}
export { Checkbox }

178
components/ui/collapsible.tsx
View File

@@ -1,192 +1,32 @@
"use client" "use client"
import * as React from "react" import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
import { cn } from "@/lib/utils"
interface CollapsibleContextValue {
open: boolean
setOpen: (open: boolean) => void
contentId: string
}
const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
function useCollapsible() {
const context = React.useContext(CollapsibleContext)
if (!context) {
throw new Error("useCollapsible must be used within a Collapsible")
}
return context
}
interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
open?: boolean
defaultOpen?: boolean
onOpenChange?: (open: boolean) => void
disabled?: boolean
}
function Collapsible({ function Collapsible({
children,
open: controlledOpen,
defaultOpen = false,
onOpenChange,
disabled,
className,
...props ...props
}: CollapsibleProps) { }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
const contentId = React.useId()
const isControlled = controlledOpen !== undefined
const open = isControlled ? controlledOpen : uncontrolledOpen
const setOpen = React.useCallback(
(value: boolean) => {
if (disabled) return
if (!isControlled) {
setUncontrolledOpen(value)
}
onOpenChange?.(value)
},
[disabled, isControlled, onOpenChange]
)
return (
<CollapsibleContext.Provider value={{ open, setOpen, contentId }}>
<div
data-slot="collapsible"
data-state={open ? "open" : "closed"}
data-disabled={disabled || undefined}
className={className}
{...props}
>
{children}
</div>
</CollapsibleContext.Provider>
)
}
interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
asChild?: boolean
} }
function CollapsibleTrigger({ function CollapsibleTrigger({
children,
asChild,
className,
...props ...props
}: CollapsibleTriggerProps) { }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
const { open, setOpen, contentId } = useCollapsible()
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
props.onClick?.(e)
if (!e.defaultPrevented) {
setOpen(!open)
}
}
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement<any>, {
onClick: handleClick,
"aria-expanded": open,
"aria-controls": contentId,
"data-state": open ? "open" : "closed",
"data-slot": "collapsible-trigger",
})
}
return ( return (
<button <CollapsiblePrimitive.CollapsibleTrigger
type="button"
data-slot="collapsible-trigger" data-slot="collapsible-trigger"
data-state={open ? "open" : "closed"}
aria-expanded={open}
aria-controls={contentId}
className={className}
onClick={handleClick}
{...props} {...props}
> />
{children}
</button>
) )
} }
interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
forceMount?: boolean
}
function CollapsibleContent({ function CollapsibleContent({
children,
className,
forceMount,
...props ...props
}: CollapsibleContentProps) { }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
const { open, contentId } = useCollapsible()
const contentRef = React.useRef<HTMLDivElement>(null)
const [height, setHeight] = React.useState<number | undefined>(undefined)
const [isAnimating, setIsAnimating] = React.useState(false)
React.useLayoutEffect(() => {
const content = contentRef.current
if (!content) return
if (open) {
// Opening: measure and animate
setIsAnimating(true)
const contentHeight = content.scrollHeight
setHeight(contentHeight)
const timer = setTimeout(() => {
setIsAnimating(false)
setHeight(undefined)
}, 200) // Match animation duration
return () => clearTimeout(timer)
} else {
// Closing: set current height first, then animate to 0
const contentHeight = content.scrollHeight
setHeight(contentHeight)
setIsAnimating(true)
// Force reflow then set to 0
requestAnimationFrame(() => {
requestAnimationFrame(() => {
setHeight(0)
})
})
const timer = setTimeout(() => {
setIsAnimating(false)
}, 200)
return () => clearTimeout(timer)
}
}, [open])
if (!open && !isAnimating && !forceMount) {
return null
}
return ( return (
<div <CollapsiblePrimitive.CollapsibleContent
ref={contentRef}
id={contentId}
data-slot="collapsible-content" data-slot="collapsible-content"
data-state={open ? "open" : "closed"}
hidden={!open && !isAnimating && !forceMount}
className={cn(
"overflow-hidden transition-[height] duration-200 ease-out",
className
)}
style={{
height: isAnimating ? height : open ? "auto" : 0,
}}
{...props} {...props}
> />
{children}
</div>
) )
} }

421
components/ui/command.tsx
View File

@@ -1,421 +0,0 @@
"use client"
import * as React from "react"
import { SearchIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
interface CommandContextValue {
search: string
setSearch: (value: string) => void
selectedIndex: number
setSelectedIndex: (index: number) => void
items: React.RefObject<HTMLDivElement[]>
registerItem: (element: HTMLDivElement | null, index: number) => void
filter: (value: string, search: string) => boolean
}
const CommandContext = React.createContext<CommandContextValue | null>(null)
function useCommand() {
const context = React.useContext(CommandContext)
if (!context) {
throw new Error("useCommand must be used within a Command")
}
return context
}
interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
filter?: (value: string, search: string) => boolean
shouldFilter?: boolean
}
function Command({
className,
children,
filter,
shouldFilter = true,
...props
}: CommandProps) {
const [search, setSearch] = React.useState("")
const [selectedIndex, setSelectedIndex] = React.useState(0)
const items = React.useRef<HTMLDivElement[]>([])
const defaultFilter = React.useCallback((value: string, search: string) => {
if (!shouldFilter) return true
if (search.length === 0) return true
return value.toLowerCase().includes(search.toLowerCase())
}, [shouldFilter])
const registerItem = React.useCallback((element: HTMLDivElement | null, index: number) => {
if (element) {
items.current[index] = element
}
}, [])
const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
const visibleItems = items.current.filter((item) => item && !item.hidden)
switch (e.key) {
case "ArrowDown":
e.preventDefault()
setSelectedIndex((prev) => {
const next = prev + 1
return next >= visibleItems.length ? 0 : next
})
break
case "ArrowUp":
e.preventDefault()
setSelectedIndex((prev) => {
const next = prev - 1
return next < 0 ? visibleItems.length - 1 : next
})
break
case "Enter":
e.preventDefault()
const selectedItem = visibleItems[selectedIndex]
if (selectedItem) {
selectedItem.click()
}
break
case "Home":
e.preventDefault()
setSelectedIndex(0)
break
case "End":
e.preventDefault()
setSelectedIndex(visibleItems.length - 1)
break
}
}, [selectedIndex])
React.useEffect(() => {
setSelectedIndex(0)
}, [search])
return (
<CommandContext.Provider
value={{
search,
setSearch,
selectedIndex,
setSelectedIndex,
items,
registerItem,
filter: filter || defaultFilter,
}}
>
<div
data-slot="command"
className={cn(
"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md border border-border",
className
)}
onKeyDown={handleKeyDown}
{...props}
>
{children}
</div>
</CommandContext.Provider>
)
}
function CommandDialog({
title = "Command Palette",
description = "Search for a command to run...",
children,
className,
showCloseButton = false,
...props
}: React.ComponentProps<typeof Dialog> & {
title?: string
description?: string
className?: string
showCloseButton?: boolean
}) {
return (
<Dialog {...props}>
<DialogHeader className="sr-only">
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent
className={cn("overflow-hidden p-0 bg-transparent border-none shadow-none max-w-[450px]", className)}
showCloseButton={showCloseButton}
>
<Command className="rounded-lg border shadow-md w-full [&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input]]:h-12 [&_[data-slot=command-item]]:px-2 [&_[data-slot=command-item]]:py-3 [&_svg]:h-5 [&_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
)
}
function CommandInput({
className,
...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
const { search, setSearch } = useCommand()
return (
<div
data-slot="command-input-wrapper"
className="flex h-9 items-center gap-2 border-b border-border px-3"
>
<SearchIcon className="size-4 shrink-0 opacity-50" />
<input
data-slot="command-input"
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
className={cn(
"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
)
}
function CommandList({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
data-slot="command-list"
role="listbox"
className={cn(
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
className
)}
{...props}
/>
)
}
function CommandEmpty({
className,
children,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
const { search, items } = useCommand()
const [isEmpty, setIsEmpty] = React.useState(false)
React.useEffect(() => {
const checkEmpty = () => {
const visibleItems = search.length === 0
? items.current.filter((item) => item)
: items.current.filter((item) => item && !item.hidden)
setIsEmpty(search.length > 0 && visibleItems.length === 0)
}
// Use a small delay to let items update their visibility
const timeout = setTimeout(checkEmpty, 10)
return () => clearTimeout(timeout)
}, [search, items])
if (!isEmpty) return null
return (
<div
data-slot="command-empty"
className={cn("py-6 text-center text-sm", className)}
{...props}
>
{children || "No results found."}
</div>
)
}
interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
heading?: React.ReactNode
}
function CommandGroup({
className,
heading,
children,
...props
}: CommandGroupProps) {
const groupRef = React.useRef<HTMLDivElement>(null)
const { search } = useCommand()
const [hasVisibleItems, setHasVisibleItems] = React.useState(true)
React.useEffect(() => {
if (search.length === 0) {
setHasVisibleItems(true)
return
}
const checkVisibility = () => {
if (groupRef.current) {
const items = groupRef.current.querySelectorAll('[data-slot="command-item"]')
const visibleItems = Array.from(items).filter(
(item) => !(item as HTMLElement).hidden
)
setHasVisibleItems(visibleItems.length > 0)
}
}
const timeout = setTimeout(checkVisibility, 10)
return () => clearTimeout(timeout)
}, [search])
return (
<div
ref={groupRef}
data-slot="command-group"
role="group"
hidden={!hasVisibleItems}
className={cn(
"text-foreground overflow-hidden p-1",
className
)}
{...props}
>
{heading && (
<div className="text-muted-foreground px-2 py-1.5 text-xs font-medium">
{heading}
</div>
)}
{children}
</div>
)
}
function CommandSeparator({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
data-slot="command-separator"
role="separator"
className={cn("bg-border -mx-1 h-px", className)}
{...props}
/>
)
}
interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
disabled?: boolean
value?: string
onSelect?: (value: string) => void
keywords?: string[]
}
const itemIndexCounter = { current: 0 }
function getTextFromChildren(children: React.ReactNode): string {
if (typeof children === "string") return children
if (typeof children === "number") return String(children)
if (Array.isArray(children)) return children.map(getTextFromChildren).join(" ")
if (React.isValidElement(children) && children.props.children) {
return getTextFromChildren(children.props.children)
}
return ""
}
function CommandItem({
className,
disabled,
value,
onSelect,
keywords = [],
children,
...props
}: CommandItemProps) {
const { search, selectedIndex, setSelectedIndex, registerItem, filter } = useCommand()
const ref = React.useRef<HTMLDivElement>(null)
const indexRef = React.useRef<number>(-1)
React.useLayoutEffect(() => {
indexRef.current = itemIndexCounter.current++
return () => {
itemIndexCounter.current = Math.max(0, itemIndexCounter.current - 1)
}
}, [])
React.useEffect(() => {
registerItem(ref.current, indexRef.current)
}, [registerItem])
const searchableText = value || getTextFromChildren(children)
const allSearchableText = [searchableText, ...keywords].join(" ")
const isVisible = search.length === 0 ? true : filter(allSearchableText, search)
const isSelected = selectedIndex === indexRef.current && isVisible
const handleSelect = () => {
if (disabled) return
onSelect?.(searchableText)
}
const handleMouseEnter = () => {
if (!disabled) {
setSelectedIndex(indexRef.current)
}
}
return (
<div
ref={ref}
data-slot="command-item"
role="option"
aria-selected={isSelected}
aria-disabled={disabled}
data-selected={isSelected}
data-disabled={disabled}
hidden={!isVisible}
tabIndex={disabled ? -1 : 0}
className={cn(
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
"[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
onClick={handleSelect}
onMouseEnter={handleMouseEnter}
{...props}
>
{children}
</div>
)
}
function CommandShortcut({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) {
return (
<span
data-slot="command-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
}

252
components/ui/context-menu.tsx Normal file
View File

@@ -0,0 +1,252 @@
"use client"
import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function ContextMenu({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
}
function ContextMenuTrigger({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
return (
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
)
}
function ContextMenuGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
return (
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
)
}
function ContextMenuPortal({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
return (
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
)
}
function ContextMenuSub({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
}
function ContextMenuRadioGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
return (
<ContextMenuPrimitive.RadioGroup
data-slot="context-menu-radio-group"
{...props}
/>
)
}
function ContextMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
inset?: boolean
}) {
return (
<ContextMenuPrimitive.SubTrigger
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
</ContextMenuPrimitive.SubTrigger>
)
}
function ContextMenuSubContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
return (
<ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content"
className={cn(
"bg-popover 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props}
/>
)
}
function ContextMenuContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
return (
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Content
data-slot="context-menu-content"
className={cn(
"bg-popover 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props}
/>
</ContextMenuPrimitive.Portal>
)
}
function ContextMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
<ContextMenuPrimitive.Item
data-slot="context-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function ContextMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
return (
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.CheckboxItem>
)
}
function ContextMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
return (
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<ContextMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</ContextMenuPrimitive.ItemIndicator>
</span>
{children}
</ContextMenuPrimitive.RadioItem>
)
}
function ContextMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
inset?: boolean
}) {
return (
<ContextMenuPrimitive.Label
data-slot="context-menu-label"
data-inset={inset}
className={cn(
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function ContextMenuSeparator({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
return (
<ContextMenuPrimitive.Separator
data-slot="context-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function ContextMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="context-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
export {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuGroup,
ContextMenuPortal,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuRadioGroup,
}

306
components/ui/dialog.tsx
View File

@@ -1,274 +1,128 @@
import React, { useState, useCallback, useContext, createContext } from 'react'; 'use client';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion'; import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { RiCloseLine } from '@remixicon/react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
interface DialogContextType { const Dialog = DialogPrimitive.Root;
open: boolean;
setOpen: (open: boolean) => void;
}
const DialogContext = createContext<DialogContextType | undefined>(undefined); const DialogTrigger = DialogPrimitive.Trigger;
function useDialog() { const DialogPortal = DialogPrimitive.Portal;
const context = useContext(DialogContext);
if (!context) {
throw new Error('Dialog components must be used within a Dialog');
}
return context;
}
interface DialogProps { const DialogClose = DialogPrimitive.Close;
open?: boolean;
onOpenChange?: (open: boolean) => void;
children: React.ReactNode;
}
function Dialog({ open: controlledOpen, onOpenChange, children }: DialogProps) { const DialogOverlay = React.forwardRef<
const [internalOpen, setInternalOpen] = useState(false); React.ElementRef<typeof DialogPrimitive.Overlay>,
const isControlled = controlledOpen !== undefined; React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
const open = isControlled ? controlledOpen : internalOpen; >(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
const setOpen = useCallback( ref={ref}
(newOpen: boolean) => { className={cn(
if (!isControlled) { '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',
setInternalOpen(newOpen); className
} )}
onOpenChange?.(newOpen);
},
[isControlled, onOpenChange]
);
return (
<DialogContext.Provider value={{ open, setOpen }}>
{children}
</DialogContext.Provider>
);
}
function DialogTrigger({
children,
asChild,
...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
const { setOpen } = useDialog();
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement, {
...props,
onClick: (e: React.MouseEvent) => {
setOpen(true);
children.props.onClick?.(e);
},
});
}
return (
<button
{...props}
onClick={(e) => {
setOpen(true);
props.onClick?.(e);
}}
>
{children}
</button>
);
}
function DialogPortal({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return createPortal(children, document.body);
}
function DialogClose({
children,
asChild,
...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
const { setOpen } = useDialog();
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement, {
...props,
onClick: (e: React.MouseEvent) => {
setOpen(false);
children.props.onClick?.(e);
},
});
}
return (
<button
{...props}
onClick={(e) => {
setOpen(false);
props.onClick?.(e);
}}
>
{children}
</button>
);
}
interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
function DialogOverlay({ className, onClick, ...props }: DialogOverlayProps) {
const { setOpen } = useDialog();
return (
<motion.div
data-slot="dialog-overlay"
className={cn('fixed inset-0 z-50 bg-black/50', className)}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
onClick={(e) => {
setOpen(false);
onClick?.(e as any);
}}
{...props} {...props}
/> />
); ));
} DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> { const DialogContent = React.forwardRef<
showCloseButton?: boolean; React.ElementRef<typeof DialogPrimitive.Content>,
} React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: DialogContentProps) {
const { open } = useDialog();
return (
<DialogPortal> <DialogPortal>
<AnimatePresence>
{open && (
<>
<DialogOverlay /> <DialogOverlay />
<motion.div {/* Wrapper div handles centering, so animation transforms don't interfere */}
data-slot="dialog-content" <div className="fixed inset-0 z-50 flex items-center justify-center">
<DialogPrimitive.Content
ref={ref}
className={cn( className={cn(
'bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border p-6 shadow-lg', 'relative z-50 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-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',
className className
)} )}
initial={{ opacity: 0, scale: 0.95, y: 0 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 0 }}
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
{...props} {...props}
> >
{children} {children}
{showCloseButton && ( <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background 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">
<DialogClose <RiCloseLine className="h-4 w-4" />
data-slot="dialog-close" <span className="sr-only">Close</span>
className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" </DialogPrimitive.Close>
aria-label="Close" </DialogPrimitive.Content>
> </div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="M18 6l-12 12M6 6l12 12" />
</svg>
</DialogClose>
)}
</motion.div>
</>
)}
</AnimatePresence>
</DialogPortal> </DialogPortal>
); ));
} DialogContent.displayName = DialogPrimitive.Content.displayName;
function DialogHeader({ const DialogHeader = ({
className, className,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) { }: React.HTMLAttributes<HTMLDivElement>) => (
return (
<div <div
data-slot="dialog-header"
className={cn( className={cn(
'flex flex-col gap-2 text-center sm:text-left', 'flex flex-col space-y-1.5 text-center sm:text-left',
className className
)} )}
{...props} {...props}
/> />
); );
} DialogHeader.displayName = 'DialogHeader';
function DialogFooter({ const DialogFooter = ({
className, className,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) { }: React.HTMLAttributes<HTMLDivElement>) => (
return (
<div <div
data-slot="dialog-footer"
className={cn( className={cn(
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className className
)} )}
{...props} {...props}
/> />
); );
} DialogFooter.displayName = 'DialogFooter';
function DialogTitle({ const DialogTitle = React.forwardRef<
className, React.ElementRef<typeof DialogPrimitive.Title>,
...props React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
}: React.HTMLAttributes<HTMLHeadingElement>) { >(({ className, ...props }, ref) => (
return ( <DialogPrimitive.Title
<h2 ref={ref}
data-slot="dialog-title" className={cn(
className={cn('text-lg leading-none font-semibold', className)} 'text-lg font-semibold leading-none tracking-tight',
className
)}
{...props} {...props}
/> />
); ));
} DialogTitle.displayName = DialogPrimitive.Title.displayName;
function DialogDescription({ const DialogDescription = React.forwardRef<
className, React.ElementRef<typeof DialogPrimitive.Description>,
...props React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
}: React.HTMLAttributes<HTMLParagraphElement>) { >(({ className, ...props }, ref) => (
return ( <DialogPrimitive.Description
<p ref={ref}
data-slot="dialog-description" className={cn('text-sm text-muted-foreground', className)}
className={cn('text-muted-foreground text-sm', className)}
{...props} {...props}
/> />
); ));
} DialogDescription.displayName = DialogPrimitive.Description.displayName;
export { export {
Dialog, Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal, DialogPortal,
DialogTitle, DialogOverlay,
DialogClose,
DialogTrigger, DialogTrigger,
AnimatePresence, DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}; };

135
components/ui/drawer.tsx Normal file
View File

@@ -0,0 +1,135 @@
"use client"
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/lib/utils"
function Drawer({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}
function DrawerTrigger({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}
function DrawerPortal({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}
function DrawerClose({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}
function DrawerOverlay({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
return (
<DrawerPrimitive.Overlay
data-slot="drawer-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function DrawerContent({
className,
children,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
return (
<DrawerPortal data-slot="drawer-portal">
<DrawerOverlay />
<DrawerPrimitive.Content
data-slot="drawer-content"
className={cn(
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
className
)}
{...props}
>
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
)
}
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="drawer-header"
className={cn(
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
className
)}
{...props}
/>
)
}
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="drawer-footer"
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)
}
function DrawerTitle({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
return (
<DrawerPrimitive.Title
data-slot="drawer-title"
className={cn("text-foreground font-semibold", className)}
{...props}
/>
)
}
function DrawerDescription({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
return (
<DrawerPrimitive.Description
data-slot="drawer-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
}

531
components/ui/dropdown-menu.tsx
View File

@@ -1,474 +1,161 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import { createPortal } from "react-dom" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
interface DropdownMenuContextValue {
open: boolean
setOpen: (open: boolean) => void
triggerRef: React.RefObject<HTMLButtonElement | null>
}
const DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)
function useDropdownMenu() {
const context = React.useContext(DropdownMenuContext)
if (!context) {
throw new Error("useDropdownMenu must be used within a DropdownMenu")
}
return context
}
interface DropdownMenuProps {
children: React.ReactNode
open?: boolean
defaultOpen?: boolean
onOpenChange?: (open: boolean) => void
}
function DropdownMenu({ function DropdownMenu({
children, ...props
open: controlledOpen, }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
defaultOpen = false, return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
onOpenChange, }
}: DropdownMenuProps) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
const triggerRef = React.useRef<HTMLButtonElement>(null)
const isControlled = controlledOpen !== undefined
const open = isControlled ? controlledOpen : uncontrolledOpen
const setOpen = React.useCallback((value: boolean) => {
if (!isControlled) {
setUncontrolledOpen(value)
}
onOpenChange?.(value)
}, [isControlled, onOpenChange])
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return ( return (
<DropdownMenuContext.Provider value={{ open, setOpen, triggerRef }}> <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
{children}
</DropdownMenuContext.Provider>
) )
} }
function DropdownMenuTrigger({ function DropdownMenuTrigger({
className,
children,
asChild,
...props ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) { }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
const { open, setOpen, triggerRef } = useDropdownMenu()
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
setOpen(!open)
props.onClick?.(e)
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
e.preventDefault()
setOpen(true)
}
props.onKeyDown?.(e)
}
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement<any>, {
ref: triggerRef,
onClick: handleClick,
onKeyDown: handleKeyDown,
"aria-expanded": open,
"aria-haspopup": "menu",
"data-state": open ? "open" : "closed",
})
}
return ( return (
<button <DropdownMenuPrimitive.Trigger
ref={triggerRef}
type="button"
data-slot="dropdown-menu-trigger" data-slot="dropdown-menu-trigger"
aria-expanded={open}
aria-haspopup="menu"
data-state={open ? "open" : "closed"}
className={cn("relative", className)}
onClick={handleClick}
onKeyDown={handleKeyDown}
{...props}
>
{children}
</button>
)
}
function DropdownMenuPortal({ children }: { children: React.ReactNode }) {
return <>{children}</>
}
interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
sideOffset?: number
align?: "start" | "center" | "end"
side?: "top" | "right" | "bottom" | "left"
}
function DropdownMenuContent({
className,
sideOffset = 4,
align = "start",
side = "bottom",
children,
...props
}: DropdownMenuContentProps) {
const { open, setOpen, triggerRef } = useDropdownMenu()
const contentRef = React.useRef<HTMLDivElement>(null)
const [position, setPosition] = React.useState({ top: 0, left: 0 })
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => {
setMounted(true)
}, [])
React.useLayoutEffect(() => {
if (!open || !triggerRef.current || !contentRef.current) return
const trigger = triggerRef.current.getBoundingClientRect()
const content = contentRef.current.getBoundingClientRect()
let top = 0
let left = 0
// Calculate position based on side
switch (side) {
case "top":
top = trigger.top - content.height - sideOffset
break
case "bottom":
top = trigger.bottom + sideOffset
break
case "left":
left = trigger.left - content.width - sideOffset
top = trigger.top
break
case "right":
left = trigger.right + sideOffset
top = trigger.top
break
}
// Calculate alignment for top/bottom
if (side === "top" || side === "bottom") {
switch (align) {
case "start":
left = trigger.left
break
case "center":
left = trigger.left + (trigger.width - content.width) / 2
break
case "end":
left = trigger.right - content.width
break
}
}
// Calculate alignment for left/right
if (side === "left" || side === "right") {
switch (align) {
case "start":
top = trigger.top
break
case "center":
top = trigger.top + (trigger.height - content.height) / 2
break
case "end":
top = trigger.bottom - content.height
break
}
}
setPosition({ top, left })
}, [open, side, align, sideOffset, triggerRef])
React.useEffect(() => {
if (!open) return
const handleClickOutside = (event: MouseEvent) => {
const target = event.target as Node
if (
contentRef.current &&
!contentRef.current.contains(target) &&
triggerRef.current &&
!triggerRef.current.contains(target)
) {
setOpen(false)
}
}
const handleEscape = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setOpen(false)
triggerRef.current?.focus()
}
}
document.addEventListener("mousedown", handleClickOutside)
document.addEventListener("keydown", handleEscape)
return () => {
document.removeEventListener("mousedown", handleClickOutside)
document.removeEventListener("keydown", handleEscape)
}
}, [open, setOpen, triggerRef])
if (!open || !mounted) return null
const slideClasses = {
top: "slide-in-from-bottom-2",
bottom: "slide-in-from-top-2",
left: "slide-in-from-right-2",
right: "slide-in-from-left-2",
}
return createPortal(
<div
ref={contentRef}
data-slot="dropdown-menu-content"
data-state={open ? "open" : "closed"}
role="menu"
className={cn(
"fixed z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
"animate-in fade-in-0 zoom-in-95",
slideClasses[side],
className
)}
style={{
top: position.top,
left: position.left,
}}
{...props}
>
{children}
</div>,
document.body
)
}
function DropdownMenuGroup({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
data-slot="dropdown-menu-group"
role="group"
className={className}
{...props} {...props}
/> />
) )
} }
interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { function DropdownMenuContent({
inset?: boolean className,
variant?: "default" | "destructive" sideOffset = 4,
asChild?: boolean ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"bg-popover 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
)
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
)
} }
function DropdownMenuItem({ function DropdownMenuItem({
className, className,
inset, inset,
variant = "default", variant = "default",
children,
asChild,
...props ...props
}: DropdownMenuItemProps) { }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
const { setOpen } = useDropdownMenu() inset?: boolean
variant?: "default" | "destructive"
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => { }) {
props.onClick?.(e)
if (!e.defaultPrevented) {
setOpen(false)
}
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault()
handleClick(e as unknown as React.MouseEvent<HTMLButtonElement>)
}
props.onKeyDown?.(e)
}
const itemClasses = cn(
"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
variant === "destructive" && "text-destructive focus:bg-destructive/10 focus:text-destructive dark:focus:bg-destructive/20",
inset && "pl-8",
className
)
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement<any>, {
className: itemClasses,
role: "menuitem",
tabIndex: -1,
onClick: handleClick,
onKeyDown: handleKeyDown,
})
}
return ( return (
<button <DropdownMenuPrimitive.Item
type="button"
data-slot="dropdown-menu-item" data-slot="dropdown-menu-item"
data-inset={inset} data-inset={inset}
data-variant={variant} data-variant={variant}
role="menuitem" className={cn(
tabIndex={-1} "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className={itemClasses} className
onClick={handleClick} )}
onKeyDown={handleKeyDown}
{...props} {...props}
> />
{children}
</button>
) )
} }
interface DropdownMenuCheckboxItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "checked"> {
checked?: boolean
onCheckedChange?: (checked: boolean) => void
}
function DropdownMenuCheckboxItem({ function DropdownMenuCheckboxItem({
className, className,
children, children,
checked, checked,
onCheckedChange,
...props ...props
}: DropdownMenuCheckboxItemProps) { }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
onCheckedChange?.(!checked)
props.onClick?.(e)
}
return ( return (
<button <DropdownMenuPrimitive.CheckboxItem
type="button"
data-slot="dropdown-menu-checkbox-item" data-slot="dropdown-menu-checkbox-item"
role="menuitemcheckbox"
aria-checked={checked}
tabIndex={-1}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none", "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
onClick={handleClick} checked={checked}
{...props} {...props}
> >
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
{checked && <CheckIcon className="size-4" />} <DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}
</button> </DropdownMenuPrimitive.CheckboxItem>
) )
} }
interface DropdownMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
value?: string
onValueChange?: (value: string) => void
}
const RadioGroupContext = React.createContext<{
value?: string
onValueChange?: (value: string) => void
} | null>(null)
function DropdownMenuRadioGroup({ function DropdownMenuRadioGroup({
value,
onValueChange,
children,
...props ...props
}: DropdownMenuRadioGroupProps) { }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return ( return (
<RadioGroupContext.Provider value={{ value, onValueChange }}> <DropdownMenuPrimitive.RadioGroup
<div
data-slot="dropdown-menu-radio-group" data-slot="dropdown-menu-radio-group"
role="group"
{...props} {...props}
> />
{children}
</div>
</RadioGroupContext.Provider>
) )
} }
interface DropdownMenuRadioItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
value: string
}
function DropdownMenuRadioItem({ function DropdownMenuRadioItem({
className, className,
children, children,
value,
...props ...props
}: DropdownMenuRadioItemProps) { }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
const context = React.useContext(RadioGroupContext)
const checked = context?.value === value
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
context?.onValueChange?.(value)
props.onClick?.(e)
}
return ( return (
<button <DropdownMenuPrimitive.RadioItem
type="button"
data-slot="dropdown-menu-radio-item" data-slot="dropdown-menu-radio-item"
role="menuitemradio"
aria-checked={checked}
tabIndex={-1}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none", "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
onClick={handleClick}
{...props} {...props}
> >
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"> <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
{checked && <CircleIcon className="size-2 fill-current" />} <DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}
</button> </DropdownMenuPrimitive.RadioItem>
) )
} }
interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
inset?: boolean
}
function DropdownMenuLabel({ function DropdownMenuLabel({
className, className,
inset, inset,
...props ...props
}: DropdownMenuLabelProps) { }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}) {
return ( return (
<div <DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label" data-slot="dropdown-menu-label"
data-inset={inset} data-inset={inset}
className={cn( className={cn(
"px-2 py-1.5 text-sm font-medium", "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
inset && "pl-8",
className className
)} )}
{...props} {...props}
@@ -479,11 +166,10 @@ function DropdownMenuLabel({
function DropdownMenuSeparator({ function DropdownMenuSeparator({
className, className,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return ( return (
<div <DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator" data-slot="dropdown-menu-separator"
role="separator"
className={cn("bg-border -mx-1 my-1 h-px", className)} className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props} {...props}
/> />
@@ -493,7 +179,7 @@ function DropdownMenuSeparator({
function DropdownMenuShortcut({ function DropdownMenuShortcut({
className, className,
...props ...props
}: React.HTMLAttributes<HTMLSpanElement>) { }: React.ComponentProps<"span">) {
return ( return (
<span <span
data-slot="dropdown-menu-shortcut" data-slot="dropdown-menu-shortcut"
@@ -506,27 +192,10 @@ function DropdownMenuShortcut({
) )
} }
interface SubMenuContextValue { function DropdownMenuSub({
open: boolean ...props
setOpen: (open: boolean) => void }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
} return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
const SubMenuContext = React.createContext<SubMenuContextValue | null>(null)
function DropdownMenuSub({ children }: { children: React.ReactNode }) {
const [open, setOpen] = React.useState(false)
return (
<SubMenuContext.Provider value={{ open, setOpen }}>
<div data-slot="dropdown-menu-sub" className="relative">
{children}
</div>
</SubMenuContext.Provider>
)
}
interface DropdownMenuSubTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
inset?: boolean
} }
function DropdownMenuSubTrigger({ function DropdownMenuSubTrigger({
@@ -534,64 +203,36 @@ function DropdownMenuSubTrigger({
inset, inset,
children, children,
...props ...props
}: DropdownMenuSubTriggerProps) { }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
const context = React.useContext(SubMenuContext) inset?: boolean
}) {
const handleMouseEnter = () => {
context?.setOpen(true)
}
const handleMouseLeave = () => {
context?.setOpen(false)
}
return ( return (
<button <DropdownMenuPrimitive.SubTrigger
type="button"
data-slot="dropdown-menu-sub-trigger" data-slot="dropdown-menu-sub-trigger"
data-inset={inset} data-inset={inset}
data-state={context?.open ? "open" : "closed"}
role="menuitem"
aria-haspopup="menu"
aria-expanded={context?.open}
tabIndex={-1}
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"[&_svg:not([class*='text-'])]:text-muted-foreground flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
inset && "pl-8",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
{...props} {...props}
> >
{children} {children}
<ChevronRightIcon className="ml-auto size-4" /> <ChevronRightIcon className="ml-auto size-4" />
</button> </DropdownMenuPrimitive.SubTrigger>
) )
} }
function DropdownMenuSubContent({ function DropdownMenuSubContent({
className, className,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) { }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
const context = React.useContext(SubMenuContext)
if (!context?.open) return null
return ( return (
<div <DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content" data-slot="dropdown-menu-sub-content"
data-state={context.open ? "open" : "closed"}
role="menu"
className={cn( className={cn(
"absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg", "bg-popover 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
"animate-in fade-in-0 zoom-in-95 slide-in-from-left-2",
className className
)} )}
onMouseEnter={() => context.setOpen(true)}
onMouseLeave={() => context.setOpen(false)}
{...props} {...props}
/> />
) )

1
components/ui/empty.tsx
View File

@@ -1,4 +1,3 @@
import React from "react"
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"

248
components/ui/field.tsx Normal file
View File

@@ -0,0 +1,248 @@
"use client"
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
<fieldset
data-slot="field-set"
className={cn(
"flex flex-col gap-6",
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
className
)}
{...props}
/>
)
}
function FieldLegend({
className,
variant = "legend",
...props
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
return (
<legend
data-slot="field-legend"
data-variant={variant}
className={cn(
"mb-3 font-medium",
"data-[variant=legend]:text-base",
"data-[variant=label]:text-sm",
className
)}
{...props}
/>
)
}
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-group"
className={cn(
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
)}
{...props}
/>
)
}
const fieldVariants = cva(
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
{
variants: {
orientation: {
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
responsive: [
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
],
},
},
defaultVariants: {
orientation: "vertical",
},
}
)
function Field({
className,
orientation = "vertical",
...props
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
return (
<div
role="group"
data-slot="field"
data-orientation={orientation}
className={cn(fieldVariants({ orientation }), className)}
{...props}
/>
)
}
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-content"
className={cn(
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
className
)}
{...props}
/>
)
}
function FieldLabel({
className,
...props
}: React.ComponentProps<typeof Label>) {
return (
<Label
data-slot="field-label"
className={cn(
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
className
)}
{...props}
/>
)
}
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="field-label"
className={cn(
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
className
)}
{...props}
/>
)
}
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
return (
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
)}
{...props}
/>
)
}
function FieldSeparator({
children,
className,
...props
}: React.ComponentProps<"div"> & {
children?: React.ReactNode
}) {
return (
<div
data-slot="field-separator"
data-content={!!children}
className={cn(
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
className
)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
{children && (
<span
className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
data-slot="field-separator-content"
>
{children}
</span>
)}
</div>
)
}
function FieldError({
className,
children,
errors,
...props
}: React.ComponentProps<"div"> & {
errors?: Array<{ message?: string } | undefined>
}) {
const content = useMemo(() => {
if (children) {
return children
}
if (!errors?.length) {
return null
}
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
]
if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{uniqueErrors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>
)}
</ul>
)
}, [children, errors])
if (!content) {
return null
}
return (
<div
role="alert"
data-slot="field-error"
className={cn("text-destructive text-sm font-normal", className)}
{...props}
>
{content}
</div>
)
}
export {
Field,
FieldLabel,
FieldDescription,
FieldError,
FieldGroup,
FieldLegend,
FieldSeparator,
FieldSet,
FieldContent,
FieldTitle,
}

248
components/ui/hover-card.tsx
View File

@@ -1,259 +1,43 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import { createPortal } from "react-dom" import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
interface HoverCardContextValue {
open: boolean
setOpen: (open: boolean) => void
triggerRef: React.RefObject<HTMLElement | null>
cancelClose: () => void
}
const HoverCardContext = React.createContext<HoverCardContextValue | null>(null)
function useHoverCard() {
const context = React.useContext(HoverCardContext)
if (!context) {
throw new Error("useHoverCard must be used within a HoverCard")
}
return context
}
interface HoverCardProps {
children: React.ReactNode
open?: boolean
defaultOpen?: boolean
onOpenChange?: (open: boolean) => void
openDelay?: number
closeDelay?: number
}
function HoverCard({ function HoverCard({
children, ...props
open: controlledOpen, }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
defaultOpen = false, return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
onOpenChange,
openDelay = 700,
closeDelay = 300,
}: HoverCardProps) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
const triggerRef = React.useRef<HTMLElement>(null)
const openTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
const closeTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
const isControlled = controlledOpen !== undefined
const open = isControlled ? controlledOpen : uncontrolledOpen
const setOpen = React.useCallback(
(value: boolean) => {
if (openTimeoutRef.current) {
clearTimeout(openTimeoutRef.current)
openTimeoutRef.current = null
}
if (closeTimeoutRef.current) {
clearTimeout(closeTimeoutRef.current)
closeTimeoutRef.current = null
}
if (value) {
openTimeoutRef.current = setTimeout(() => {
if (!isControlled) {
setUncontrolledOpen(true)
}
onOpenChange?.(true)
}, openDelay)
} else {
closeTimeoutRef.current = setTimeout(() => {
if (!isControlled) {
setUncontrolledOpen(false)
}
onOpenChange?.(false)
}, closeDelay)
}
},
[isControlled, onOpenChange, openDelay, closeDelay]
)
const cancelClose = React.useCallback(() => {
if (closeTimeoutRef.current) {
clearTimeout(closeTimeoutRef.current)
closeTimeoutRef.current = null
}
}, [])
React.useEffect(() => {
return () => {
if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)
if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
}
}, [])
return (
<HoverCardContext.Provider value={{ open, setOpen, triggerRef, cancelClose }}>
{children}
</HoverCardContext.Provider>
)
}
interface HoverCardTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {
asChild?: boolean
} }
function HoverCardTrigger({ function HoverCardTrigger({
children,
asChild,
...props ...props
}: HoverCardTriggerProps) { }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
const { setOpen, triggerRef } = useHoverCard()
const handleMouseEnter = () => {
setOpen(true)
}
const handleMouseLeave = () => {
setOpen(false)
}
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement<any>, {
ref: triggerRef,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
"data-slot": "hover-card-trigger",
})
}
return ( return (
<span <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
ref={triggerRef as React.RefObject<HTMLSpanElement>}
data-slot="hover-card-trigger"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
{...props}
>
{children}
</span>
) )
} }
interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
side?: "top" | "right" | "bottom" | "left"
sideOffset?: number
align?: "start" | "center" | "end"
}
function HoverCardContent({ function HoverCardContent({
className, className,
side = "bottom",
sideOffset = 4,
align = "center", align = "center",
children, sideOffset = 4,
...props ...props
}: HoverCardContentProps) { }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
const { open, setOpen, triggerRef, cancelClose } = useHoverCard() return (
const [position, setPosition] = React.useState({ top: 0, left: 0 }) <HoverCardPrimitive.Portal data-slot="hover-card-portal">
const [mounted, setMounted] = React.useState(false) <HoverCardPrimitive.Content
const contentRef = React.useRef<HTMLDivElement>(null)
React.useEffect(() => {
setMounted(true)
}, [])
React.useLayoutEffect(() => {
if (!open || !triggerRef.current || !contentRef.current) return
const trigger = triggerRef.current.getBoundingClientRect()
const content = contentRef.current.getBoundingClientRect()
let top = 0
let left = 0
// Calculate position based on side
switch (side) {
case "top":
top = trigger.top - content.height - sideOffset
break
case "bottom":
top = trigger.bottom + sideOffset
break
case "left":
left = trigger.left - content.width - sideOffset
top = trigger.top + (trigger.height - content.height) / 2
break
case "right":
left = trigger.right + sideOffset
top = trigger.top + (trigger.height - content.height) / 2
break
}
// Calculate alignment for top/bottom
if (side === "top" || side === "bottom") {
switch (align) {
case "start":
left = trigger.left
break
case "center":
left = trigger.left + (trigger.width - content.width) / 2
break
case "end":
left = trigger.right - content.width
break
}
}
// Calculate alignment for left/right
if (side === "left" || side === "right") {
switch (align) {
case "start":
top = trigger.top
break
case "center":
top = trigger.top + (trigger.height - content.height) / 2
break
case "end":
top = trigger.bottom - content.height
break
}
}
setPosition({ top, left })
}, [open, side, align, sideOffset, triggerRef])
if (!open || !mounted) return null
const slideClasses = {
top: "slide-in-from-bottom-2",
bottom: "slide-in-from-top-2",
left: "slide-in-from-right-2",
right: "slide-in-from-left-2",
}
return createPortal(
<div
ref={contentRef}
data-slot="hover-card-content" data-slot="hover-card-content"
data-state={open ? "open" : "closed"} align={align}
data-side={side} sideOffset={sideOffset}
className={cn( className={cn(
"fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none", "bg-popover 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
"animate-in fade-in-0 zoom-in-95",
slideClasses[side],
className className
)} )}
style={{
top: position.top,
left: position.left,
}}
onMouseEnter={cancelClose}
onMouseLeave={() => setOpen(false)}
{...props} {...props}
> />
{children} </HoverCardPrimitive.Portal>
</div>,
document.body
) )
} }

32
components/ui/input-group.tsx
View File

@@ -8,35 +8,26 @@ import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"
interface InputGroupProps extends React.ComponentProps<"div"> { function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
layout?: "inline" | "stacked"
}
function InputGroup({ className, layout, ...props }: InputGroupProps) {
// Detect layout from children if not explicitly set
const hasBlockAddon = React.Children.toArray(props.children).some(
(child) =>
React.isValidElement(child) &&
((child.props as any)?.align === "block-end" ||
(child.props as any)?.align === "block-start")
)
const isStacked = layout === "stacked" || hasBlockAddon
return ( return (
<div <div
data-slot="input-group" data-slot="input-group"
data-layout={isStacked ? "stacked" : "inline"}
role="group" role="group"
className={cn( className={cn(
"group/input-group border-input dark:bg-input/30 relative flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none", "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
isStacked ? "h-auto flex-col" : "h-9 min-w-0 items-center", "h-9 min-w-0 has-[>textarea]:h-auto",
// Variants based on alignment.
"has-[>[data-align=inline-start]]:[&>input]:pl-2",
"has-[>[data-align=inline-end]]:[&>input]:pr-2",
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
// Focus state. // Focus state.
"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
// Error state. // Error state.
"has-[[aria-invalid=true]]:ring-destructive/20 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:ring-destructive/40", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
className className
)} )}
@@ -87,7 +78,6 @@ function InputGroupAddon({
/> />
) )
} }
InputGroupAddon.displayName = "InputGroupAddon"
const inputGroupButtonVariants = cva( const inputGroupButtonVariants = cva(
"text-sm shadow-none flex gap-2 items-center", "text-sm shadow-none flex gap-2 items-center",

57
components/ui/input-otp.tsx
View File

@@ -1,53 +1,57 @@
import React from 'react'; "use client"
import { OTPInput, OTPInputContext } from 'input-otp';
import { cn } from '@/lib/utils'; import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { MinusIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function InputOTP({ function InputOTP({
className, className,
containerClassName, containerClassName,
...props ...props
}: React.ComponentProps<typeof OTPInput> & { }: React.ComponentProps<typeof OTPInput> & {
containerClassName?: string; containerClassName?: string
}) { }) {
return ( return (
<OTPInput <OTPInput
data-slot="input-otp" data-slot="input-otp"
containerClassName={cn( containerClassName={cn(
'flex items-center gap-2 has-disabled:opacity-50', "flex items-center gap-2 has-disabled:opacity-50",
containerClassName containerClassName
)} )}
className={cn('disabled:cursor-not-allowed', className)} className={cn("disabled:cursor-not-allowed", className)}
{...props} {...props}
/> />
); )
} }
function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) { function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="input-otp-group" data-slot="input-otp-group"
className={cn('flex items-center', className)} className={cn("flex items-center", className)}
{...props} {...props}
/> />
); )
} }
function InputOTPSlot({ function InputOTPSlot({
index, index,
className, className,
...props ...props
}: React.ComponentProps<'div'> & { }: React.ComponentProps<"div"> & {
index: number; index: number
}) { }) {
const inputOTPContext = React.useContext(OTPInputContext); const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}; const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
return ( return (
<div <div
data-slot="input-otp-slot" data-slot="input-otp-slot"
data-active={isActive} data-active={isActive}
className={cn( className={cn(
'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r border-border text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l first:border-border last:rounded-r-md last:border-border data-[active=true]:z-10 data-[active=true]:ring-[3px]', "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
className className
)} )}
{...props} {...props}
@@ -59,28 +63,15 @@ function InputOTPSlot({
</div> </div>
)} )}
</div> </div>
); )
} }
function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) { function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
return ( return (
<div data-slot="input-otp-separator" role="separator" {...props}> <div data-slot="input-otp-separator" role="separator" {...props}>
<svg <MinusIcon />
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div> </div>
); )
} }
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }; export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

2
components/ui/input.tsx
View File

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type} type={type}
data-slot="input" data-slot="input"
className={cn( className={cn(
"text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className className

186
components/ui/item.tsx
View File

@@ -1,202 +1,182 @@
import React from 'react'; import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
// Utility function to combine classNames import { cn } from "@/lib/utils"
function cn(...classes: (string | undefined | null | false)[]): string { import { Separator } from "@/components/ui/separator"
return classes.filter(Boolean).join(' ');
}
// Item variants helper function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
function getItemVariants(
variant: 'default' | 'outline' | 'muted',
size: 'default' | 'sm'
): string {
const baseStyles =
'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
const variantStyles = {
default: 'bg-transparent',
outline: 'border-border',
muted: 'bg-muted/50',
};
const sizeStyles = {
default: 'p-4 gap-4',
sm: 'py-3 px-4 gap-2.5',
};
return cn(baseStyles, variantStyles[variant], sizeStyles[size]);
}
// Item media variants helper
function getItemMediaVariants(variant: 'default' | 'icon' | 'image'): string {
const baseStyles =
'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5';
const variantStyles = {
default: 'bg-transparent',
icon: "size-8 border border-border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
image:
'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
};
return cn(baseStyles, variantStyles[variant]);
}
interface ItemGroupProps extends React.ComponentProps<'div'> {}
function ItemGroup({ className, ...props }: ItemGroupProps) {
return ( return (
<div <div
role="list" role="list"
data-slot="item-group" data-slot="item-group"
className={cn('group/item-group flex flex-col', className)} className={cn("group/item-group flex flex-col", className)}
{...props} {...props}
/> />
); )
} }
interface ItemSeparatorProps extends React.ComponentProps<'div'> {} function ItemSeparator({
className,
function ItemSeparator({ className, ...props }: ItemSeparatorProps) { ...props
}: React.ComponentProps<typeof Separator>) {
return ( return (
<div <Separator
data-slot="item-separator" data-slot="item-separator"
className={cn('my-0 border-t border-border', className)} orientation="horizontal"
className={cn("my-0", className)}
{...props} {...props}
/> />
); )
} }
interface ItemProps extends React.ComponentProps<'div'> { const itemVariants = cva(
variant?: 'default' | 'outline' | 'muted'; "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
size?: 'default' | 'sm'; {
asChild?: boolean; variants: {
} variant: {
default: "bg-transparent",
outline: "border-border",
muted: "bg-muted/50",
},
size: {
default: "p-4 gap-4 ",
sm: "py-3 px-4 gap-2.5",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Item({ function Item({
className, className,
variant = 'default', variant = "default",
size = 'default', size = "default",
asChild = false, asChild = false,
...props ...props
}: ItemProps) { }: React.ComponentProps<"div"> &
const Comp = asChild ? 'div' : 'div'; VariantProps<typeof itemVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "div"
return ( return (
<Comp <Comp
data-slot="item" data-slot="item"
data-variant={variant} data-variant={variant}
data-size={size} data-size={size}
className={cn(getItemVariants(variant, size), className)} className={cn(itemVariants({ variant, size, className }))}
{...props} {...props}
/> />
); )
} }
interface ItemMediaProps extends React.ComponentProps<'div'> { const itemMediaVariants = cva(
variant?: 'default' | 'icon' | 'image'; "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
} {
variants: {
variant: {
default: "bg-transparent",
icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
image:
"size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
},
},
defaultVariants: {
variant: "default",
},
}
)
function ItemMedia({ function ItemMedia({
className, className,
variant = 'default', variant = "default",
...props ...props
}: ItemMediaProps) { }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
return ( return (
<div <div
data-slot="item-media" data-slot="item-media"
data-variant={variant} data-variant={variant}
className={cn(getItemMediaVariants(variant), className)} className={cn(itemMediaVariants({ variant, className }))}
{...props} {...props}
/> />
); )
} }
interface ItemContentProps extends React.ComponentProps<'div'> {} function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
function ItemContent({ className, ...props }: ItemContentProps) {
return ( return (
<div <div
data-slot="item-content" data-slot="item-content"
className={cn( className={cn(
'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
className className
)} )}
{...props} {...props}
/> />
); )
} }
interface ItemTitleProps extends React.ComponentProps<'div'> {} function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
function ItemTitle({ className, ...props }: ItemTitleProps) {
return ( return (
<div <div
data-slot="item-title" data-slot="item-title"
className={cn( className={cn(
'flex w-fit items-center gap-2 text-sm leading-snug font-medium', "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
className className
)} )}
{...props} {...props}
/> />
); )
} }
interface ItemDescriptionProps extends React.ComponentProps<'p'> {} function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
function ItemDescription({ className, ...props }: ItemDescriptionProps) {
return ( return (
<p <p
data-slot="item-description" data-slot="item-description"
className={cn( className={cn(
'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance', "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className className
)} )}
{...props} {...props}
/> />
); )
} }
interface ItemActionsProps extends React.ComponentProps<'div'> {} function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
function ItemActions({ className, ...props }: ItemActionsProps) {
return ( return (
<div <div
data-slot="item-actions" data-slot="item-actions"
className={cn('flex items-center gap-2', className)} className={cn("flex items-center gap-2", className)}
{...props} {...props}
/> />
); )
} }
interface ItemHeaderProps extends React.ComponentProps<'div'> {} function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
function ItemHeader({ className, ...props }: ItemHeaderProps) {
return ( return (
<div <div
data-slot="item-header" data-slot="item-header"
className={cn( className={cn(
'flex basis-full items-center justify-between gap-2', "flex basis-full items-center justify-between gap-2",
className className
)} )}
{...props} {...props}
/> />
); )
} }
interface ItemFooterProps extends React.ComponentProps<'div'> {} function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
function ItemFooter({ className, ...props }: ItemFooterProps) {
return ( return (
<div <div
data-slot="item-footer" data-slot="item-footer"
className={cn( className={cn(
'flex basis-full items-center justify-between gap-2', "flex basis-full items-center justify-between gap-2",
className className
)} )}
{...props} {...props}
/> />
); )
} }
export { export {
@@ -210,4 +190,4 @@ export {
ItemDescription, ItemDescription,
ItemHeader, ItemHeader,
ItemFooter, ItemFooter,
}; }

28
components/ui/kbd.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { cn } from "@/lib/utils"
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
return (
<kbd
data-slot="kbd"
className={cn(
"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
"[&_svg:not([class*='size-'])]:size-3",
"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
className
)}
{...props}
/>
)
}
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<kbd
data-slot="kbd-group"
className={cn("inline-flex items-center gap-1", className)}
{...props}
/>
)
}
export { Kbd, KbdGroup }

5
components/ui/label.tsx
View File

@@ -1,15 +1,16 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
function Label({ function Label({
className, className,
...props ...props
}: React.ComponentProps<"label">) { }: React.ComponentProps<typeof LabelPrimitive.Root>) {
return ( return (
<label <LabelPrimitive.Root
data-slot="label" data-slot="label"
className={cn( className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",

96
components/ui/loader.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "react";
interface LoaderIconProps {
size?: number;
}
const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
<svg
height={size}
strokeLinejoin="round"
style={{ color: "currentcolor" }}
viewBox="0 0 16 16"
width={size}
>
<title>Loader</title>
<g clipPath="url(#clip0_2393_1490)">
<path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
<path
d="M8 16V12"
opacity="0.5"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M3.29773 1.52783L5.64887 4.7639"
opacity="0.9"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M12.7023 1.52783L10.3511 4.7639"
opacity="0.1"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M12.7023 14.472L10.3511 11.236"
opacity="0.4"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M3.29773 14.472L5.64887 11.236"
opacity="0.6"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M15.6085 5.52783L11.8043 6.7639"
opacity="0.2"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M0.391602 10.472L4.19583 9.23598"
opacity="0.7"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M15.6085 10.4722L11.8043 9.2361"
opacity="0.3"
stroke="currentColor"
strokeWidth="1.5"
/>
<path
d="M0.391602 5.52783L4.19583 6.7639"
opacity="0.8"
stroke="currentColor"
strokeWidth="1.5"
/>
</g>
<defs>
<clipPath id="clip0_2393_1490">
<rect fill="white" height="16" width="16" />
</clipPath>
</defs>
</svg>
);
export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
size?: number;
};
export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
<div
className={cn(
"inline-flex animate-spin items-center justify-center",
className
)}
{...props}
>
<LoaderIcon size={size} />
</div>
);

276
components/ui/menubar.tsx Normal file
View File

@@ -0,0 +1,276 @@
"use client"
import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Menubar({
className,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
return (
<MenubarPrimitive.Root
data-slot="menubar"
className={cn(
"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
className
)}
{...props}
/>
)
}
function MenubarMenu({
...props
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
}
function MenubarGroup({
...props
}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
}
function MenubarPortal({
...props
}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
}
function MenubarRadioGroup({
...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
return (
<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
)
}
function MenubarTrigger({
className,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
return (
<MenubarPrimitive.Trigger
data-slot="menubar-trigger"
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
className
)}
{...props}
/>
)
}
function MenubarContent({
className,
align = "start",
alignOffset = -4,
sideOffset = 8,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
return (
<MenubarPortal>
<MenubarPrimitive.Content
data-slot="menubar-content"
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
className
)}
{...props}
/>
</MenubarPortal>
)
}
function MenubarItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
<MenubarPrimitive.Item
data-slot="menubar-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function MenubarCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
return (
<MenubarPrimitive.CheckboxItem
data-slot="menubar-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.CheckboxItem>
)
}
function MenubarRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
return (
<MenubarPrimitive.RadioItem
data-slot="menubar-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<MenubarPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</MenubarPrimitive.ItemIndicator>
</span>
{children}
</MenubarPrimitive.RadioItem>
)
}
function MenubarLabel({
className,
inset,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
inset?: boolean
}) {
return (
<MenubarPrimitive.Label
data-slot="menubar-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function MenubarSeparator({
className,
...props
}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
return (
<MenubarPrimitive.Separator
data-slot="menubar-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function MenubarShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="menubar-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
function MenubarSub({
...props
}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
}
function MenubarSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
inset?: boolean
}) {
return (
<MenubarPrimitive.SubTrigger
data-slot="menubar-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto h-4 w-4" />
</MenubarPrimitive.SubTrigger>
)
}
function MenubarSubContent({
className,
...props
}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
return (
<MenubarPrimitive.SubContent
data-slot="menubar-sub-content"
className={cn(
"bg-popover 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props}
/>
)
}
export {
Menubar,
MenubarPortal,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarGroup,
MenubarSeparator,
MenubarLabel,
MenubarItem,
MenubarShortcut,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSub,
MenubarSubTrigger,
MenubarSubContent,
}

53
components/ui/native-select.tsx Normal file
View File

@@ -0,0 +1,53 @@
import * as React from "react"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function NativeSelect({
className,
size = "default",
...props
}: Omit<React.ComponentProps<"select">, "size"> & { size?: "sm" | "default" }) {
return (
<div
className="group/native-select relative w-fit has-[select:disabled]:opacity-50"
data-slot="native-select-wrapper"
>
<select
data-slot="native-select"
data-size={size}
className={cn(
"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className
)}
{...props}
/>
<ChevronDownIcon
className="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
aria-hidden="true"
data-slot="native-select-icon"
/>
</div>
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
}
function NativeSelectOptGroup({
className,
...props
}: React.ComponentProps<"optgroup">) {
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
{...props}
/>
)
}
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

168
components/ui/navigation-menu.tsx Normal file
View File

@@ -0,0 +1,168 @@
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDownIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function NavigationMenu({
className,
children,
viewport = true,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
viewport?: boolean
}) {
return (
<NavigationMenuPrimitive.Root
data-slot="navigation-menu"
data-viewport={viewport}
className={cn(
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}
>
{children}
{viewport && <NavigationMenuViewport />}
</NavigationMenuPrimitive.Root>
)
}
function NavigationMenuList({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
return (
<NavigationMenuPrimitive.List
data-slot="navigation-menu-list"
className={cn(
"group flex flex-1 list-none items-center justify-center gap-1",
className
)}
{...props}
/>
)
}
function NavigationMenuItem({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
return (
<NavigationMenuPrimitive.Item
data-slot="navigation-menu-item"
className={cn("relative", className)}
{...props}
/>
)
}
const navigationMenuTriggerStyle = cva(
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
)
function NavigationMenuTrigger({
className,
children,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
return (
<NavigationMenuPrimitive.Trigger
data-slot="navigation-menu-trigger"
className={cn(navigationMenuTriggerStyle(), "group", className)}
{...props}
>
{children}{" "}
<ChevronDownIcon
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
</NavigationMenuPrimitive.Trigger>
)
}
function NavigationMenuContent({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
return (
<NavigationMenuPrimitive.Content
data-slot="navigation-menu-content"
className={cn(
"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 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
className
)}
{...props}
/>
)
}
function NavigationMenuViewport({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
return (
<div
className={cn(
"absolute top-full left-0 isolate z-50 flex justify-center"
)}
>
<NavigationMenuPrimitive.Viewport
data-slot="navigation-menu-viewport"
className={cn(
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
className
)}
{...props}
/>
</div>
)
}
function NavigationMenuLink({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
return (
<NavigationMenuPrimitive.Link
data-slot="navigation-menu-link"
className={cn(
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function NavigationMenuIndicator({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
return (
<NavigationMenuPrimitive.Indicator
data-slot="navigation-menu-indicator"
className={cn(
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
className
)}
{...props}
>
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
</NavigationMenuPrimitive.Indicator>
)
}
export {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
navigationMenuTriggerStyle,
}

89
components/ui/popover.tsx Normal file
View File

@@ -0,0 +1,89 @@
"use client"
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "@/lib/utils"
function Popover({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />
}
function PopoverTrigger({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}
function PopoverContent({
className,
align = "center",
sideOffset = 4,
...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
return (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
data-slot="popover-content"
align={align}
sideOffset={sideOffset}
className={cn(
"bg-popover 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
)}
{...props}
/>
</PopoverPrimitive.Portal>
)
}
function PopoverAnchor({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="popover-header"
className={cn("flex flex-col gap-1 text-sm", className)}
{...props}
/>
)
}
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
return (
<div
data-slot="popover-title"
className={cn("font-medium", className)}
{...props}
/>
)
}
function PopoverDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
<p
data-slot="popover-description"
className={cn("text-muted-foreground", className)}
{...props}
/>
)
}
export {
Popover,
PopoverTrigger,
PopoverContent,
PopoverAnchor,
PopoverHeader,
PopoverTitle,
PopoverDescription,
}

39
components/ui/progress.tsx
View File

@@ -1,44 +1,31 @@
import React from 'react'; "use client"
// Utility function to combine classNames import * as React from "react"
function cn(...classes: (string | undefined | null | false)[]): string { import * as ProgressPrimitive from "@radix-ui/react-progress"
return classes.filter(Boolean).join(' ');
}
interface ProgressProps extends React.ComponentProps<'div'> { import { cn } from "@/lib/utils"
value?: number;
max?: number;
}
function Progress({ function Progress({
className, className,
value = 0, value,
max = 100,
...props ...props
}: ProgressProps) { }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
return ( return (
<div <ProgressPrimitive.Root
data-slot="progress" data-slot="progress"
className={cn( className={cn(
'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
className className
)} )}
role="progressbar"
aria-valuemin={0}
aria-valuemax={max}
aria-valuenow={value}
{...props} {...props}
> >
<div <ProgressPrimitive.Indicator
data-slot="progress-indicator" data-slot="progress-indicator"
className="bg-primary h-full w-full flex-1 transition-all" className="bg-primary h-full w-full flex-1 transition-all"
style={{ transform: `translateX(-${100 - percentage}%)` }} style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/> />
</div> </ProgressPrimitive.Root>
); )
} }
export { Progress }; export { Progress }
export type { ProgressProps };

45
components/ui/radio-group.tsx Normal file
View File

@@ -0,0 +1,45 @@
"use client"
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function RadioGroup({
className,
...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
return (
<RadioGroupPrimitive.Root
data-slot="radio-group"
className={cn("grid gap-3", className)}
{...props}
/>
)
}
function RadioGroupItem({
className,
...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
return (
<RadioGroupPrimitive.Item
data-slot="radio-group-item"
className={cn(
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
<RadioGroupPrimitive.Indicator
data-slot="radio-group-indicator"
className="relative flex items-center justify-center"
>
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
}
export { RadioGroup, RadioGroupItem }

225
components/ui/scroll-area.tsx
View File

@@ -1,240 +1,57 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "vertical" | "horizontal" | "both"
}
function ScrollArea({ function ScrollArea({
className, className,
children, children,
orientation = "vertical",
...props ...props
}: ScrollAreaProps) { }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
const viewportRef = React.useRef<HTMLDivElement>(null)
const [showVerticalScrollbar, setShowVerticalScrollbar] = React.useState(false)
const [showHorizontalScrollbar, setShowHorizontalScrollbar] = React.useState(false)
const [scrollTop, setScrollTop] = React.useState(0)
const [scrollLeft, setScrollLeft] = React.useState(0)
const [viewportHeight, setViewportHeight] = React.useState(0)
const [viewportWidth, setViewportWidth] = React.useState(0)
const [contentHeight, setContentHeight] = React.useState(0)
const [contentWidth, setContentWidth] = React.useState(0)
React.useEffect(() => {
const viewport = viewportRef.current
if (!viewport) return
const updateScrollInfo = () => {
const hasVerticalScroll = viewport.scrollHeight > viewport.clientHeight
const hasHorizontalScroll = viewport.scrollWidth > viewport.clientWidth
setShowVerticalScrollbar(
hasVerticalScroll && (orientation === "vertical" || orientation === "both")
)
setShowHorizontalScrollbar(
hasHorizontalScroll && (orientation === "horizontal" || orientation === "both")
)
setViewportHeight(viewport.clientHeight)
setViewportWidth(viewport.clientWidth)
setContentHeight(viewport.scrollHeight)
setContentWidth(viewport.scrollWidth)
}
const handleScroll = () => {
setScrollTop(viewport.scrollTop)
setScrollLeft(viewport.scrollLeft)
}
updateScrollInfo()
viewport.addEventListener("scroll", handleScroll)
const resizeObserver = new ResizeObserver(updateScrollInfo)
resizeObserver.observe(viewport)
// Also observe children for content changes
const mutationObserver = new MutationObserver(updateScrollInfo)
mutationObserver.observe(viewport, { childList: true, subtree: true })
return () => {
viewport.removeEventListener("scroll", handleScroll)
resizeObserver.disconnect()
mutationObserver.disconnect()
}
}, [orientation])
return ( return (
<div <ScrollAreaPrimitive.Root
data-slot="scroll-area" data-slot="scroll-area"
className={cn("relative overflow-hidden", className)} className={cn("relative", className)}
{...props} {...props}
> >
<div <ScrollAreaPrimitive.Viewport
ref={viewportRef}
data-slot="scroll-area-viewport" data-slot="scroll-area-viewport"
className={cn( className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
"size-full rounded-[inherit] outline-none",
"focus-visible:ring-ring/50 transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
orientation === "both" && "overflow-auto"
)}
tabIndex={0}
> >
{children} {children}
</div> </ScrollAreaPrimitive.Viewport>
{showVerticalScrollbar && ( <ScrollBar />
<ScrollBar <ScrollAreaPrimitive.Corner />
orientation="vertical" </ScrollAreaPrimitive.Root>
viewportRef={viewportRef}
scrollPosition={scrollTop}
viewportSize={viewportHeight}
contentSize={contentHeight}
/>
)}
{showHorizontalScrollbar && (
<ScrollBar
orientation="horizontal"
viewportRef={viewportRef}
scrollPosition={scrollLeft}
viewportSize={viewportWidth}
contentSize={contentWidth}
/>
)}
</div>
) )
} }
interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "vertical" | "horizontal"
viewportRef?: React.RefObject<HTMLDivElement | null>
scrollPosition?: number
viewportSize?: number
contentSize?: number
}
function ScrollBar({ function ScrollBar({
className, className,
orientation = "vertical", orientation = "vertical",
viewportRef,
scrollPosition = 0,
viewportSize = 0,
contentSize = 0,
...props ...props
}: ScrollBarProps) { }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
const [isDragging, setIsDragging] = React.useState(false)
const [isHovered, setIsHovered] = React.useState(false)
const scrollbarRef = React.useRef<HTMLDivElement>(null)
const startPosRef = React.useRef(0)
const startScrollRef = React.useRef(0)
const thumbSize =
contentSize > 0 ? Math.max((viewportSize / contentSize) * 100, 10) : 0
const thumbPosition =
contentSize > viewportSize
? (scrollPosition / (contentSize - viewportSize)) * (100 - thumbSize)
: 0
const handleThumbMouseDown = (e: React.MouseEvent) => {
e.preventDefault()
setIsDragging(true)
startPosRef.current = orientation === "vertical" ? e.clientY : e.clientX
startScrollRef.current = scrollPosition
}
React.useEffect(() => {
if (!isDragging) return
const handleMouseMove = (e: MouseEvent) => {
const viewport = viewportRef?.current
const scrollbar = scrollbarRef.current
if (!viewport || !scrollbar) return
const currentPos = orientation === "vertical" ? e.clientY : e.clientX
const delta = currentPos - startPosRef.current
const scrollbarSize =
orientation === "vertical"
? scrollbar.clientHeight
: scrollbar.clientWidth
const scrollRatio = (contentSize - viewportSize) / (scrollbarSize * (1 - thumbSize / 100))
const newScrollPos = startScrollRef.current + delta * scrollRatio
if (orientation === "vertical") {
viewport.scrollTop = Math.max(0, Math.min(newScrollPos, contentSize - viewportSize))
} else {
viewport.scrollLeft = Math.max(0, Math.min(newScrollPos, contentSize - viewportSize))
}
}
const handleMouseUp = () => {
setIsDragging(false)
}
document.addEventListener("mousemove", handleMouseMove)
document.addEventListener("mouseup", handleMouseUp)
return () => {
document.removeEventListener("mousemove", handleMouseMove)
document.removeEventListener("mouseup", handleMouseUp)
}
}, [isDragging, orientation, viewportRef, contentSize, viewportSize, thumbSize])
const handleTrackClick = (e: React.MouseEvent) => {
const viewport = viewportRef?.current
const scrollbar = scrollbarRef.current
if (!viewport || !scrollbar || e.target !== scrollbar) return
const rect = scrollbar.getBoundingClientRect()
const clickPos =
orientation === "vertical" ? e.clientY - rect.top : e.clientX - rect.left
const scrollbarSize = orientation === "vertical" ? rect.height : rect.width
const clickRatio = clickPos / scrollbarSize
const targetScroll = clickRatio * contentSize - viewportSize / 2
if (orientation === "vertical") {
viewport.scrollTop = Math.max(0, Math.min(targetScroll, contentSize - viewportSize))
} else {
viewport.scrollLeft = Math.max(0, Math.min(targetScroll, contentSize - viewportSize))
}
}
return ( return (
<div <ScrollAreaPrimitive.ScrollAreaScrollbar
ref={scrollbarRef}
data-slot="scroll-area-scrollbar" data-slot="scroll-area-scrollbar"
data-orientation={orientation} orientation={orientation}
className={cn( className={cn(
"absolute flex touch-none p-px transition-opacity select-none", "flex touch-none p-px transition-colors select-none",
orientation === "vertical" && "right-0 top-0 h-full w-2.5 border-l border-l-transparent", orientation === "vertical" &&
orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col border-t border-t-transparent", "h-full w-2.5 border-l border-l-transparent",
!isHovered && !isDragging && "opacity-0", orientation === "horizontal" &&
(isHovered || isDragging) && "opacity-100", "h-2.5 flex-col border-t border-t-transparent",
className className
)} )}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onClick={handleTrackClick}
{...props} {...props}
> >
<div <ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb" data-slot="scroll-area-thumb"
className={cn( className="bg-border relative flex-1 rounded-full"
"bg-border relative rounded-full transition-colors",
orientation === "vertical" && "w-full",
orientation === "horizontal" && "h-full",
isDragging && "bg-foreground/50"
)}
style={{
[orientation === "vertical" ? "height" : "width"]: `${thumbSize}%`,
[orientation === "vertical" ? "top" : "left"]: `${thumbPosition}%`,
position: "absolute",
}}
onMouseDown={handleThumbMouseDown}
/> />
</div> </ScrollAreaPrimitive.ScrollAreaScrollbar>
) )
} }

383
components/ui/select.tsx
View File

@@ -1,287 +1,190 @@
import React, { "use client"
createContext,
useContext,
useState,
useRef,
useEffect,
useCallback,
} from 'react';
import { cn } from '@/lib/utils';
interface SelectContextType { import * as React from "react"
open: boolean; import * as SelectPrimitive from "@radix-ui/react-select"
setOpen: (open: boolean) => void; import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
value: string;
setValue: (value: string) => void;
}
const SelectContext = createContext<SelectContextType | undefined>(undefined); import { cn } from "@/lib/utils"
function useSelect() {
const context = useContext(SelectContext);
if (!context) {
throw new Error('Select components must be used within a Select');
}
return context;
}
interface SelectProps {
value?: string;
onValueChange?: (value: string) => void;
children: React.ReactNode;
}
function Select({ function Select({
value: controlledValue, ...props
onValueChange, }: React.ComponentProps<typeof SelectPrimitive.Root>) {
children, return <SelectPrimitive.Root data-slot="select" {...props} />
}: SelectProps) {
const [internalValue, setInternalValue] = useState('');
const [open, setOpen] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const isControlled = controlledValue !== undefined;
const value = isControlled ? controlledValue : internalValue;
const handleValueChange = useCallback(
(newValue: string) => {
if (!isControlled) {
setInternalValue(newValue);
}
onValueChange?.(newValue);
setOpen(false);
},
[isControlled, onValueChange]
);
// Handle clicking outside to close the menu
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (
containerRef.current &&
!containerRef.current.contains(event.target as Node)
) {
setOpen(false);
}
}
if (open) {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}
}, [open]);
return (
<SelectContext.Provider
value={{ open, setOpen, value, setValue: handleValueChange }}
>
<div ref={containerRef} data-slot="select" className="relative">
{children}
</div>
</SelectContext.Provider>
);
} }
interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { function SelectGroup({
children: React.ReactNode; ...props
placeholder?: string; }: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />
}
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />
} }
function SelectTrigger({ function SelectTrigger({
className, className,
size = "default",
children, children,
placeholder = 'Select...',
...props ...props
}: SelectTriggerProps) { }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
const { open, setOpen, value } = useSelect(); size?: "sm" | "default"
const triggerRef = useRef<HTMLButtonElement>(null); }) {
return ( return (
<button <SelectPrimitive.Trigger
ref={triggerRef}
data-slot="select-trigger" data-slot="select-trigger"
onClick={() => setOpen(!open)} data-size={size}
className={cn( className={cn(
'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4', "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...props} {...props}
> >
{children || <span className="text-muted-foreground">{placeholder}</span>} {children}
<svg <SelectPrimitive.Icon asChild>
xmlns="http://www.w3.org/2000/svg" <ChevronDownIcon className="size-4 opacity-50" />
width="24" </SelectPrimitive.Icon>
height="24" </SelectPrimitive.Trigger>
viewBox="0 0 24 24" )
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn(
'size-4 opacity-50 transition-transform',
open && 'rotate-180'
)}
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
);
} }
interface SelectValueProps { function SelectContent({
children?: React.ReactNode; className,
placeholder?: string;
}
function SelectValue({
children, children,
placeholder = 'Select...', position = "item-aligned",
}: SelectValueProps) { align = "center",
const { value } = useSelect(); ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
return ( return (
<span data-slot="select-value">{children || value || placeholder}</span> <SelectPrimitive.Portal>
); <SelectPrimitive.Content
}
interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
function SelectContent({ className, children, ...props }: SelectContentProps) {
const { open } = useSelect();
const contentRef = useRef<HTMLDivElement>(null);
if (!open) return null;
return (
<div
ref={contentRef}
data-slot="select-content" data-slot="select-content"
className={cn( className={cn(
'bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border border-border shadow-md overflow-hidden top-full mt-2 left-0', "bg-popover 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className className
)} )}
position={position}
align={align}
{...props} {...props}
> >
<div className="p-1 overflow-y-auto max-h-60">{children}</div> <SelectScrollUpButton />
</div> <SelectPrimitive.Viewport
); className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
)
} }
interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> { function SelectLabel({
value: string; className,
children: React.ReactNode; ...props
disabled?: boolean; }: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
{...props}
/>
)
} }
function SelectItem({ function SelectItem({
value, className,
children, children,
disabled = false, ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
)}
{...props}
>
<span
data-slot="select-item-indicator"
className="absolute right-2 flex size-3.5 items-center justify-center"
>
<SelectPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
)
}
function SelectSeparator({
className, className,
...props ...props
}: SelectItemProps) { }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
const { value: selectedValue, setValue } = useSelect();
const isSelected = selectedValue === value;
return ( return (
<div <SelectPrimitive.Separator
data-slot="select-item"
onClick={() => !disabled && setValue(value)}
className={cn(
'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*="text-"])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none transition-colors',
!disabled &&
'hover:bg-accent hover:text-accent-foreground cursor-pointer',
disabled && 'pointer-events-none opacity-50',
isSelected && 'bg-accent text-accent-foreground',
className
)}
{...props}
>
{isSelected && (
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
)}
{children}
</div>
);
}
interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
function SelectGroup({ className, children, ...props }: SelectGroupProps) {
return (
<div
data-slot="select-group"
className={cn('overflow-hidden', className)}
{...props}
>
{children}
</div>
);
}
interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
function SelectLabel({ className, children, ...props }: SelectLabelProps) {
return (
<div
data-slot="select-label"
className={cn(
'text-muted-foreground px-2 py-1.5 text-xs font-semibold',
className
)}
{...props}
>
{children}
</div>
);
}
interface SelectSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
return (
<div
data-slot="select-separator" data-slot="select-separator"
className={cn( className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
'bg-border pointer-events-none -mx-1 my-1 h-px',
className
)}
{...props} {...props}
/> />
); )
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUpIcon className="size-4" />
</SelectPrimitive.ScrollUpButton>
)
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDownIcon className="size-4" />
</SelectPrimitive.ScrollDownButton>
)
} }
export { export {
Select, Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
SelectContent, }
SelectItem,
SelectGroup,
SelectLabel,
SelectSeparator,
};

18
components/ui/separator.tsx
View File

@@ -1,29 +1,23 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "horizontal" | "vertical"
decorative?: boolean
}
function Separator({ function Separator({
className, className,
orientation = "horizontal", orientation = "horizontal",
decorative = true, decorative = true,
...props ...props
}: SeparatorProps) { }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return ( return (
<div <SeparatorPrimitive.Root
data-slot="separator" data-slot="separator"
role={decorative ? "none" : "separator"} decorative={decorative}
aria-orientation={decorative ? undefined : orientation} orientation={orientation}
data-orientation={orientation}
className={cn( className={cn(
"bg-border shrink-0", "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
className className
)} )}
{...props} {...props}

305
components/ui/sheet.tsx
View File

@@ -1,293 +1,134 @@
import React, { useState, useCallback, useContext, createContext } from 'react'; "use client"
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
interface SheetContextType { import * as React from "react"
open: boolean; import * as SheetPrimitive from "@radix-ui/react-dialog"
setOpen: (open: boolean) => void; import { XIcon } from "lucide-react"
side: 'top' | 'right' | 'bottom' | 'left';
import { cn } from "@/lib/utils"
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />
} }
const SheetContext = createContext<SheetContextType | undefined>(undefined); function SheetTrigger({
...props
function useSheet() { }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
const context = useContext(SheetContext); return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
if (!context) {
throw new Error('Sheet components must be used within a Sheet');
}
return context;
} }
interface SheetProps { function SheetClose({
open?: boolean; ...props
onOpenChange?: (open: boolean) => void; }: React.ComponentProps<typeof SheetPrimitive.Close>) {
children: React.ReactNode; return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
side?: 'top' | 'right' | 'bottom' | 'left';
} }
function Sheet({ function SheetPortal({
open: controlledOpen, ...props
onOpenChange, }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
children, return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
side = 'right',
}: SheetProps) {
const [internalOpen, setInternalOpen] = useState(false);
const isControlled = controlledOpen !== undefined;
const open = isControlled ? controlledOpen : internalOpen;
const setOpen = useCallback(
(newOpen: boolean) => {
if (!isControlled) {
setInternalOpen(newOpen);
}
onOpenChange?.(newOpen);
},
[isControlled, onOpenChange]
);
return (
<SheetContext.Provider value={{ open, setOpen, side }}>
{children}
</SheetContext.Provider>
);
}
function SheetTrigger(
props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
) {
const { setOpen } = useSheet();
const { children, asChild, ...rest } = props;
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement, {
...rest,
onClick: (e: React.MouseEvent) => {
setOpen(true);
children.props.onClick?.(e);
},
});
}
return (
<button
data-slot="sheet-trigger"
{...rest}
onClick={(e) => {
setOpen(true);
props.onClick?.(e);
}}
>
{children}
</button>
);
}
function SheetPortal({ children }: { children: React.ReactNode }) {
return createPortal(children, document.body);
} }
function SheetOverlay({ function SheetOverlay({
className, className,
onClick,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) { }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
const { setOpen } = useSheet();
return ( return (
<motion.div <SheetPrimitive.Overlay
data-slot="sheet-overlay" data-slot="sheet-overlay"
className={cn('fixed inset-0 z-50 bg-black/50', className)} className={cn(
initial={{ opacity: 0 }} "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
animate={{ opacity: 1 }} className
exit={{ opacity: 0 }} )}
transition={{ duration: 0.3 }}
onClick={(e) => {
setOpen(false);
onClick?.(e);
}}
{...props} {...props}
/> />
); )
}
interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
showCloseButton?: boolean;
} }
function SheetContent({ function SheetContent({
className, className,
children, children,
side = "right",
showCloseButton = true, showCloseButton = true,
...props ...props
}: SheetContentProps) { }: React.ComponentProps<typeof SheetPrimitive.Content> & {
const { setOpen, side } = useSheet(); side?: "top" | "right" | "bottom" | "left"
showCloseButton?: boolean
const sideClasses = { }) {
right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
top: 'inset-x-0 top-0 h-auto border-b',
bottom: 'inset-x-0 bottom-0 h-auto border-t',
};
const slideVariants = {
right: {
initial: { x: 400, opacity: 0 },
animate: { x: 0, opacity: 1 },
exit: { x: 400, opacity: 0 },
},
left: {
initial: { x: -400, opacity: 0 },
animate: { x: 0, opacity: 1 },
exit: { x: -400, opacity: 0 },
},
top: {
initial: { y: -400, opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: -400, opacity: 0 },
},
bottom: {
initial: { y: 400, opacity: 0 },
animate: { y: 0, opacity: 1 },
exit: { y: 400, opacity: 0 },
},
};
return ( return (
<SheetPortal> <SheetPortal>
<SheetOverlay /> <SheetOverlay />
<motion.div <SheetPrimitive.Content
data-slot="sheet-content" data-slot="sheet-content"
className={cn( className={cn(
'bg-background fixed z-50 flex flex-col gap-0 shadow-lg', "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
sideClasses[side] side === "right" &&
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
side === "left" &&
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
side === "top" &&
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
side === "bottom" &&
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
className
)} )}
variants={slideVariants[side]}
initial="initial"
animate="animate"
exit="exit"
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
{...props} {...props}
> >
{children} {children}
{showCloseButton && ( {showCloseButton && (
<button <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
data-slot="sheet-close" <XIcon className="size-4" />
onClick={() => setOpen(false)} <span className="sr-only">Close</span>
className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" </SheetPrimitive.Close>
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="size-4"
>
<path d="M18 6l-12 12M6 6l12 12" />
</svg>
</button>
)} )}
</motion.div> </SheetPrimitive.Content>
</SheetPortal> </SheetPortal>
); )
} }
function SheetClose( function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
) {
const { setOpen } = useSheet();
const { children, asChild, ...rest } = props;
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement, {
...rest,
onClick: (e: React.MouseEvent) => {
setOpen(false);
children.props.onClick?.(e);
},
});
}
return (
<button
data-slot="sheet-close"
{...rest}
onClick={(e) => {
setOpen(false);
props.onClick?.(e);
}}
>
{children}
</button>
);
}
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
return ( return (
<div <div
data-slot="sheet-header" data-slot="sheet-header"
className={cn( className={cn("flex flex-col gap-1.5 p-4", className)}
'flex flex-col gap-1.5 p-6 border-b border-border',
className
)}
{...props} {...props}
/> />
); )
} }
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) { function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div
data-slot="sheet-footer" data-slot="sheet-footer"
className={cn( className={cn("mt-auto flex flex-col gap-2 p-4", className)}
'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
className
)}
{...props} {...props}
/> />
); )
} }
function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) { function SheetTitle({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
return ( return (
<h2 <SheetPrimitive.Title
data-slot="sheet-title" data-slot="sheet-title"
className={cn('text-lg leading-none font-semibold', className)} className={cn("text-foreground font-semibold", className)}
{...props} {...props}
/> />
); )
} }
function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) { function SheetDescription({
className,
...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
return ( return (
<p <SheetPrimitive.Description
data-slot="sheet-description" data-slot="sheet-description"
className={cn('text-muted-foreground text-sm', className)} className={cn("text-muted-foreground text-sm", className)}
{...props} {...props}
/> />
); )
}
interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
function SheetBody({ className, children, ...props }: SheetBodyProps) {
return (
<div
data-slot="sheet-body"
className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
{...props}
>
{children}
</div>
);
} }
export { export {
@@ -299,8 +140,4 @@ export {
SheetFooter, SheetFooter,
SheetTitle, SheetTitle,
SheetDescription, SheetDescription,
SheetBody, }
SheetPortal,
SheetOverlay,
AnimatePresence,
};

63
components/ui/slider.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client"
import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"
import { cn } from "@/lib/utils"
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
const _values = React.useMemo(
() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
: [min, max],
[value, defaultValue, min, max]
)
return (
<SliderPrimitive.Root
data-slot="slider"
defaultValue={defaultValue}
value={value}
min={min}
max={max}
className={cn(
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
className
)}
{...props}
>
<SliderPrimitive.Track
data-slot="slider-track"
className={cn(
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
)}
>
<SliderPrimitive.Range
data-slot="slider-range"
className={cn(
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
)}
/>
</SliderPrimitive.Track>
{Array.from({ length: _values.length }, (_, index) => (
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>
)
}
export { Slider }

23
components/ui/sonner.tsx
View File

@@ -1,23 +0,0 @@
import React from 'react';
import { toast } from 'sonner';
import Button from '@/components/ui/button';
export function SonnerDemo() {
return (
<Button
variant="outline"
onClick={() =>
toast('Event has been created', {
description: 'Sunday, December 03, 2023 at 9:00 AM',
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
})
}
>
Show Toast
</Button>
);
}

38
components/ui/spinner.tsx
View File

@@ -1,38 +0,0 @@
import React from 'react';
import { cn } from '@/lib/utils';
interface SpinnerProps extends React.ComponentProps<'svg'> {
size?: 'sm' | 'md' | 'lg' | 'xl';
}
const sizeClasses = {
sm: 'size-3',
md: 'size-4',
lg: 'size-6',
xl: 'size-8',
};
function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
return (
<svg
role="status"
aria-label="Loading"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn('animate-spin', sizeClasses[size], className)}
{...props}
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
);
}
export { Spinner };
export type { SpinnerProps };

81
components/ui/switch.tsx
View File

@@ -1,74 +1,35 @@
import React from 'react'; "use client"
import { cn } from '@/lib/utils';
interface SwitchProps extends Omit< import * as React from "react"
React.InputHTMLAttributes<HTMLInputElement>, import * as SwitchPrimitive from "@radix-ui/react-switch"
'type'
> {
checked?: boolean;
onCheckedChange?: (checked: boolean) => void;
}
const Switch = React.forwardRef<HTMLInputElement, SwitchProps>( import { cn } from "@/lib/utils"
({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
const [isChecked, setIsChecked] = React.useState(checked ?? false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newChecked = e.target.checked;
setIsChecked(newChecked);
onCheckedChange?.(newChecked);
props.onChange?.(e);
};
React.useEffect(() => {
if (checked !== undefined) {
setIsChecked(checked);
}
}, [checked]);
function Switch({
className,
size = "default",
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "sm" | "default"
}) {
return ( return (
<div className="relative inline-flex"> <SwitchPrimitive.Root
<input
ref={ref}
type="checkbox"
checked={isChecked}
onChange={handleChange}
disabled={disabled}
className="sr-only"
{...props}
/>
<div
data-slot="switch" data-slot="switch"
data-size={size}
className={cn( className={cn(
'inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px]', "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
isChecked
? 'bg-primary focus-visible:ring-ring/50 focus-visible:border-ring'
: 'bg-input dark:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring',
disabled && 'cursor-not-allowed opacity-50',
className className
)} )}
onClick={() => { {...props}
if (!disabled) {
setIsChecked(!isChecked);
onCheckedChange?.(!isChecked);
}
}}
> >
<div <SwitchPrimitive.Thumb
data-slot="switch-thumb" data-slot="switch-thumb"
className={cn( className={cn(
'bg-background dark:bg-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform', "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
isChecked
? 'translate-x-[calc(100%-2px)] dark:bg-primary-foreground'
: 'translate-x-0'
)} )}
/> />
</div> </SwitchPrimitive.Root>
</div> )
); }
}
);
Switch.displayName = 'Switch'; export { Switch }
export { Switch };

59
components/ui/table.tsx
View File

@@ -1,104 +1,107 @@
import React from 'react'; "use client"
import { cn } from '@/lib/utils';
function Table({ className, ...props }: React.ComponentProps<'table'>) { import * as React from "react"
import { cn } from "@/lib/utils"
function Table({ className, ...props }: React.ComponentProps<"table">) {
return ( return (
<div <div
data-slot="table-container" data-slot="table-container"
className="relative w-full overflow-x-auto rounded-md border border-border" className="relative w-full overflow-x-auto"
> >
<table <table
data-slot="table" data-slot="table"
className={cn('w-full caption-bottom text-sm', className)} className={cn("w-full caption-bottom text-sm", className)}
{...props} {...props}
/> />
</div> </div>
); )
} }
function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) { function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return ( return (
<thead <thead
data-slot="table-header" data-slot="table-header"
className={cn('[&_tr]:border-b border-border', className)} className={cn("[&_tr]:border-b", className)}
{...props} {...props}
/> />
); )
} }
function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) { function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return ( return (
<tbody <tbody
data-slot="table-body" data-slot="table-body"
className={cn('[&_tr:last-child]:border-0', className)} className={cn("[&_tr:last-child]:border-0", className)}
{...props} {...props}
/> />
); )
} }
function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) { function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return ( return (
<tfoot <tfoot
data-slot="table-footer" data-slot="table-footer"
className={cn( className={cn(
'bg-muted/50 border-t border-border font-medium [&>tr]:last:border-b-0', "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
className className
)} )}
{...props} {...props}
/> />
); )
} }
function TableRow({ className, ...props }: React.ComponentProps<'tr'>) { function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
return ( return (
<tr <tr
data-slot="table-row" data-slot="table-row"
className={cn( className={cn(
'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors', "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
className className
)} )}
{...props} {...props}
/> />
); )
} }
function TableHead({ className, ...props }: React.ComponentProps<'th'>) { function TableHead({ className, ...props }: React.ComponentProps<"th">) {
return ( return (
<th <th
data-slot="table-head" data-slot="table-head"
className={cn( className={cn(
'text-foreground bg-muted/30 h-10 px-4 py-2 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className className
)} )}
{...props} {...props}
/> />
); )
} }
function TableCell({ className, ...props }: React.ComponentProps<'td'>) { function TableCell({ className, ...props }: React.ComponentProps<"td">) {
return ( return (
<td <td
data-slot="table-cell" data-slot="table-cell"
className={cn( className={cn(
'p-4 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className className
)} )}
{...props} {...props}
/> />
); )
} }
function TableCaption({ function TableCaption({
className, className,
...props ...props
}: React.ComponentProps<'caption'>) { }: React.ComponentProps<"caption">) {
return ( return (
<caption <caption
data-slot="table-caption" data-slot="table-caption"
className={cn('text-muted-foreground mt-4 text-sm', className)} className={cn("text-muted-foreground mt-4 text-sm", className)}
{...props} {...props}
/> />
); )
} }
export { export {
@@ -110,4 +113,4 @@ export {
TableRow, TableRow,
TableCell, TableCell,
TableCaption, TableCaption,
}; }

164
components/ui/tabs.tsx
View File

@@ -1,143 +1,91 @@
import React, { createContext, useContext, useState } from 'react'; "use client"
import { cn } from '@/lib/utils';
interface TabsContextType { import * as React from "react"
activeTab: string; import * as TabsPrimitive from "@radix-ui/react-tabs"
setActiveTab: (value: string) => void; import { cva, type VariantProps } from "class-variance-authority"
}
const TabsContext = createContext<TabsContextType | undefined>(undefined); import { cn } from "@/lib/utils"
function useTabs() {
const context = useContext(TabsContext);
if (!context) {
throw new Error('Tabs components must be used within a Tabs component');
}
return context;
}
interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
defaultValue?: string;
value?: string;
onValueChange?: (value: string) => void;
}
function Tabs({ function Tabs({
className, className,
defaultValue, orientation = "horizontal",
value: controlledValue,
onValueChange,
children,
...props ...props
}: TabsProps) { }: React.ComponentProps<typeof TabsPrimitive.Root>) {
const [internalValue, setInternalValue] = useState(defaultValue || '');
const isControlled = controlledValue !== undefined;
const activeTab = isControlled ? controlledValue : internalValue;
const handleValueChange = (newValue: string) => {
if (!isControlled) {
setInternalValue(newValue);
}
onValueChange?.(newValue);
};
return ( return (
<TabsContext.Provider <TabsPrimitive.Root
value={{ activeTab, setActiveTab: handleValueChange }}
>
<div
data-slot="tabs" data-slot="tabs"
className={cn('flex flex-col gap-2', className)} data-orientation={orientation}
{...props} orientation={orientation}
>
{children}
</div>
</TabsContext.Provider>
);
}
interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
function TabsList({ className, children, ...props }: TabsListProps) {
return (
<div
data-slot="tabs-list"
className={cn( className={cn(
'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]', "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
className className
)} )}
role="tablist"
{...props} {...props}
> />
{children} )
</div>
);
} }
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { const tabsListVariants = cva(
value: string; "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
children: React.ReactNode; {
variants: {
variant: {
default: "bg-muted",
line: "gap-1 bg-transparent",
},
},
defaultVariants: {
variant: "default",
},
}
)
function TabsList({
className,
variant = "default",
...props
}: React.ComponentProps<typeof TabsPrimitive.List> &
VariantProps<typeof tabsListVariants>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
data-variant={variant}
className={cn(tabsListVariants({ variant }), className)}
{...props}
/>
)
} }
function TabsTrigger({ function TabsTrigger({
className, className,
value,
children,
...props ...props
}: TabsTriggerProps) { }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
const { activeTab, setActiveTab } = useTabs();
const isActive = activeTab === value;
return ( return (
<button <TabsPrimitive.Trigger
data-slot="tabs-trigger" data-slot="tabs-trigger"
role="tab"
aria-selected={isActive}
aria-controls={`tabs-content-${value}`}
className={cn( className={cn(
'text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4', "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
isActive && "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
'bg-background dark:bg-input/30 dark:border-input shadow-sm', "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
className className
)} )}
onClick={() => setActiveTab(value)}
{...props} {...props}
> />
{children} )
</button>
);
}
interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
value: string;
children: React.ReactNode;
} }
function TabsContent({ function TabsContent({
className, className,
value,
children,
...props ...props
}: TabsContentProps) { }: React.ComponentProps<typeof TabsPrimitive.Content>) {
const { activeTab } = useTabs();
if (activeTab !== value) {
return null;
}
return ( return (
<div <TabsPrimitive.Content
data-slot="tabs-content" data-slot="tabs-content"
role="tabpanel" className={cn("flex-1 outline-none", className)}
id={`tabs-content-${value}`}
className={cn('flex-1 outline-none', className)}
{...props} {...props}
> />
{children} )
</div>
);
} }
export { Tabs, TabsList, TabsTrigger, TabsContent }; export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

83
components/ui/toggle-group.tsx Normal file
View File

@@ -0,0 +1,83 @@
"use client"
import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants> & {
spacing?: number
}
>({
size: "default",
variant: "default",
spacing: 0,
})
function ToggleGroup({
className,
variant,
size,
spacing = 0,
children,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants> & {
spacing?: number
}) {
return (
<ToggleGroupPrimitive.Root
data-slot="toggle-group"
data-variant={variant}
data-size={size}
data-spacing={spacing}
style={{ "--gap": spacing } as React.CSSProperties}
className={cn(
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
className
)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
)
}
function ToggleGroupItem({
className,
children,
variant,
size,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>) {
const context = React.useContext(ToggleGroupContext)
return (
<ToggleGroupPrimitive.Item
data-slot="toggle-group-item"
data-variant={context.variant || variant}
data-size={context.size || size}
data-spacing={context.spacing}
className={cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
className
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
)
}
export { ToggleGroup, ToggleGroupItem }

47
components/ui/toggle.tsx Normal file
View File

@@ -0,0 +1,47 @@
"use client"
import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-9 px-2 min-w-9",
sm: "h-8 px-1.5 min-w-8",
lg: "h-10 px-2.5 min-w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Toggle({
className,
variant,
size,
...props
}: React.ComponentProps<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>) {
return (
<TogglePrimitive.Root
data-slot="toggle"
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Toggle, toggleVariants }

269
components/ui/tooltip.tsx
View File

@@ -1,279 +1,60 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import { createPortal } from "react-dom" import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
interface TooltipContextValue {
open: boolean
setOpen: (open: boolean) => void
triggerRef: React.RefObject<HTMLElement | null>
delayDuration: number
}
const TooltipContext = React.createContext<TooltipContextValue | null>(null)
function useTooltip() {
const context = React.useContext(TooltipContext)
if (!context) {
throw new Error("useTooltip must be used within a Tooltip")
}
return context
}
interface TooltipProviderProps {
children: React.ReactNode
delayDuration?: number
}
const TooltipProviderContext = React.createContext<{ delayDuration: number }>({
delayDuration: 0,
})
function TooltipProvider({ function TooltipProvider({
children,
delayDuration = 0, delayDuration = 0,
}: TooltipProviderProps) { ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return ( return (
<TooltipProviderContext.Provider value={{ delayDuration }}> <TooltipPrimitive.Provider
{children} data-slot="tooltip-provider"
</TooltipProviderContext.Provider> delayDuration={delayDuration}
{...props}
/>
) )
} }
interface TooltipProps {
children: React.ReactNode
open?: boolean
defaultOpen?: boolean
onOpenChange?: (open: boolean) => void
delayDuration?: number
}
function Tooltip({ function Tooltip({
children, ...props
open: controlledOpen, }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
defaultOpen = false,
onOpenChange,
delayDuration: propDelayDuration,
}: TooltipProps) {
const providerContext = React.useContext(TooltipProviderContext)
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
const triggerRef = React.useRef<HTMLElement>(null)
const isControlled = controlledOpen !== undefined
const open = isControlled ? controlledOpen : uncontrolledOpen
const delayDuration = propDelayDuration ?? providerContext.delayDuration
const setOpen = React.useCallback(
(value: boolean) => {
if (!isControlled) {
setUncontrolledOpen(value)
}
onOpenChange?.(value)
},
[isControlled, onOpenChange]
)
return ( return (
<TooltipContext.Provider value={{ open, setOpen, triggerRef, delayDuration }}> <TooltipProvider>
{children} <TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipContext.Provider> </TooltipProvider>
) )
} }
interface TooltipTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {
asChild?: boolean
}
function TooltipTrigger({ function TooltipTrigger({
children,
asChild,
...props ...props
}: TooltipTriggerProps) { }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
const { setOpen, triggerRef, delayDuration } = useTooltip() return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
const handleMouseEnter = () => {
if (delayDuration > 0) {
timeoutRef.current = setTimeout(() => setOpen(true), delayDuration)
} else {
setOpen(true)
}
}
const handleMouseLeave = () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
timeoutRef.current = null
}
setOpen(false)
}
const handleFocus = () => {
setOpen(true)
}
const handleBlur = () => {
setOpen(false)
}
React.useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
}
}
}, [])
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children as React.ReactElement<any>, {
ref: triggerRef,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleFocus,
onBlur: handleBlur,
"data-slot": "tooltip-trigger",
})
}
return (
<span
ref={triggerRef as React.RefObject<HTMLSpanElement>}
data-slot="tooltip-trigger"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onFocus={handleFocus}
onBlur={handleBlur}
{...props}
>
{children}
</span>
)
}
interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {
side?: "top" | "right" | "bottom" | "left"
sideOffset?: number
align?: "start" | "center" | "end"
} }
function TooltipContent({ function TooltipContent({
className, className,
side = "top", sideOffset = 0,
sideOffset = 4,
align = "center",
children, children,
...props ...props
}: TooltipContentProps) { }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
const { open, triggerRef } = useTooltip() return (
const [position, setPosition] = React.useState({ top: 0, left: 0 }) <TooltipPrimitive.Portal>
const [mounted, setMounted] = React.useState(false) <TooltipPrimitive.Content
const contentRef = React.useRef<HTMLDivElement>(null)
React.useEffect(() => {
setMounted(true)
}, [])
React.useLayoutEffect(() => {
if (!open || !triggerRef.current || !contentRef.current) return
const trigger = triggerRef.current.getBoundingClientRect()
const content = contentRef.current.getBoundingClientRect()
let top = 0
let left = 0
// Calculate position based on side
switch (side) {
case "top":
top = trigger.top - content.height - sideOffset
break
case "bottom":
top = trigger.bottom + sideOffset
break
case "left":
left = trigger.left - content.width - sideOffset
top = trigger.top + (trigger.height - content.height) / 2
break
case "right":
left = trigger.right + sideOffset
top = trigger.top + (trigger.height - content.height) / 2
break
}
// Calculate alignment for top/bottom
if (side === "top" || side === "bottom") {
switch (align) {
case "start":
left = trigger.left
break
case "center":
left = trigger.left + (trigger.width - content.width) / 2
break
case "end":
left = trigger.right - content.width
break
}
}
// Calculate alignment for left/right
if (side === "left" || side === "right") {
switch (align) {
case "start":
top = trigger.top
break
case "center":
top = trigger.top + (trigger.height - content.height) / 2
break
case "end":
top = trigger.bottom - content.height
break
}
}
setPosition({ top, left })
}, [open, side, align, sideOffset, triggerRef])
if (!open || !mounted) return null
const slideClasses = {
top: "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
bottom: "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2",
left: "animate-in fade-in-0 zoom-in-95 slide-in-from-right-2",
right: "animate-in fade-in-0 zoom-in-95 slide-in-from-left-2",
}
return createPortal(
<div
ref={contentRef}
data-slot="tooltip-content" data-slot="tooltip-content"
data-state={open ? "open" : "closed"} sideOffset={sideOffset}
data-side={side}
role="tooltip"
className={cn( className={cn(
"fixed z-50 w-max rounded-md bg-foreground px-3 py-1.5 text-xs text-background text-balance", "bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
slideClasses[side],
className className
)} )}
style={{
top: position.top,
left: position.left,
}}
{...props} {...props}
> >
{children} {children}
<div <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
className={cn( </TooltipPrimitive.Content>
"absolute size-2.5 rotate-45 rounded-[2px] bg-foreground", </TooltipPrimitive.Portal>
side === "top" && "top-full left-1/2 -translate-x-1/2 -translate-y-1/2",
side === "bottom" && "bottom-full left-1/2 -translate-x-1/2 translate-y-1/2",
side === "left" && "left-full top-1/2 -translate-x-1/2 -translate-y-1/2",
side === "right" && "right-full top-1/2 translate-x-1/2 -translate-y-1/2"
)}
/>
</div>,
document.body
) )
} }

16
contexts/shopify-context.tsx
View File

@@ -25,17 +25,15 @@ interface CartLine {
name: string; name: string;
value: string; value: string;
}>; }>;
product: { image?: {
title: string;
handle?: string;
images: {
edges: Array<{
node: {
url: string; url: string;
altText: string | null; altText?: string | null;
};
}>;
}; };
product: {
id: string;
title: string;
handle: string;
vendor?: string;
}; };
}; };
} }

1
hooks/use-shopify-products.ts
View File

@@ -41,6 +41,7 @@ export interface Product {
title: string; title: string;
description?: string; description?: string;
descriptionHtml?: string; descriptionHtml?: string;
productType?: string;
handle: string; handle: string;
images: { images: {
edges: Array<{ edges: Array<{

14
index.html
View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=typography,forms"></script>
</head>
<body class="m-0 p-0 font-sans">
<div id="root" class="w-full h-full"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" /> import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

930
package-lock.json generated
View File

@@ -1,930 +0,0 @@
{
"name": "vite-app",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "vite-app",
"version": "0.0.0",
"dependencies": {
"clsx": "^2.1.1",
"lucide-react": "^0.544.0",
"react": "^19.1.1",
"react-dom": "^19.1.1"
},
"devDependencies": {
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^5.0.3",
"typescript": "^4.9.3",
"vite": "^7.1.6"
}
},
"node_modules/@babel/code-frame": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-validator-identifier": "^7.27.1",
"js-tokens": "^4.0.0",
"picocolors": "^1.1.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/compat-data": {
"version": "7.28.4",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/core": {
"version": "7.28.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
"@babel/helper-compilation-targets": "^7.27.2",
"@babel/helper-module-transforms": "^7.28.3",
"@babel/helpers": "^7.28.4",
"@babel/parser": "^7.28.4",
"@babel/template": "^7.27.2",
"@babel/traverse": "^7.28.4",
"@babel/types": "^7.28.4",
"@jridgewell/remapping": "^2.3.5",
"convert-source-map": "^2.0.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.2",
"json5": "^2.2.3",
"semver": "^6.3.1"
},
"engines": {
"node": ">=6.9.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/babel"
}
},
"node_modules/@babel/generator": {
"version": "7.28.3",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.28.3",
"@babel/types": "^7.28.2",
"@jridgewell/gen-mapping": "^0.3.12",
"@jridgewell/trace-mapping": "^0.3.28",
"jsesc": "^3.0.2"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-compilation-targets": {
"version": "7.27.2",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/compat-data": "^7.27.2",
"@babel/helper-validator-option": "^7.27.1",
"browserslist": "^4.24.0",
"lru-cache": "^5.1.1",
"semver": "^6.3.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-globals": {
"version": "7.28.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-module-imports": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/traverse": "^7.27.1",
"@babel/types": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-module-transforms": {
"version": "7.28.3",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-module-imports": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1",
"@babel/traverse": "^7.28.3"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0"
}
},
"node_modules/@babel/helper-plugin-utils": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-string-parser": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-option": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helpers": {
"version": "7.28.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/template": "^7.27.2",
"@babel/types": "^7.28.4"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/parser": {
"version": "7.28.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.28.4"
},
"bin": {
"parser": "bin/babel-parser.js"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@babel/plugin-transform-react-jsx-self": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-react-jsx-source": {
"version": "7.27.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/template": {
"version": "7.27.2",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/parser": "^7.27.2",
"@babel/types": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/traverse": {
"version": "7.28.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
"@babel/helper-globals": "^7.28.0",
"@babel/parser": "^7.28.4",
"@babel/template": "^7.27.2",
"@babel/types": "^7.28.4",
"debug": "^4.3.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/types": {
"version": "7.28.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-string-parser": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@esbuild/darwin-arm64": {
"version": "0.25.10",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=18"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/remapping": {
"version": "2.3.5",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.5",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.38",
"dev": true,
"license": "MIT"
},
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.52.4",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.20.7",
"@babel/types": "^7.20.7",
"@types/babel__generator": "*",
"@types/babel__template": "*",
"@types/babel__traverse": "*"
}
},
"node_modules/@types/babel__generator": {
"version": "7.27.0",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.0.0"
}
},
"node_modules/@types/babel__template": {
"version": "7.4.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.1.0",
"@babel/types": "^7.0.0"
}
},
"node_modules/@types/babel__traverse": {
"version": "7.28.0",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.28.2"
}
},
"node_modules/@types/estree": {
"version": "1.0.8",
"dev": true,
"license": "MIT"
},
"node_modules/@types/react": {
"version": "19.2.2",
"dev": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-dom": {
"version": "19.2.1",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.2.0"
}
},
"node_modules/@vitejs/plugin-react": {
"version": "5.0.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.28.4",
"@babel/plugin-transform-react-jsx-self": "^7.27.1",
"@babel/plugin-transform-react-jsx-source": "^7.27.1",
"@rolldown/pluginutils": "1.0.0-beta.38",
"@types/babel__core": "^7.20.5",
"react-refresh": "^0.17.0"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"peerDependencies": {
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/baseline-browser-mapping": {
"version": "2.8.15",
"dev": true,
"license": "Apache-2.0",
"bin": {
"baseline-browser-mapping": "dist/cli.js"
}
},
"node_modules/browserslist": {
"version": "4.26.3",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"baseline-browser-mapping": "^2.8.9",
"caniuse-lite": "^1.0.30001746",
"electron-to-chromium": "^1.5.227",
"node-releases": "^2.0.21",
"update-browserslist-db": "^1.1.3"
},
"bin": {
"browserslist": "cli.js"
},
"engines": {
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001749",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "CC-BY-4.0"
},
"node_modules/clsx": {
"version": "2.1.1",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/convert-source-map": {
"version": "2.0.0",
"dev": true,
"license": "MIT"
},
"node_modules/csstype": {
"version": "3.1.3",
"dev": true,
"license": "MIT"
},
"node_modules/debug": {
"version": "4.4.3",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.233",
"dev": true,
"license": "ISC"
},
"node_modules/esbuild": {
"version": "0.25.10",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"bin": {
"esbuild": "bin/esbuild"
},
"engines": {
"node": ">=18"
},
"optionalDependencies": {
"@esbuild/aix-ppc64": "0.25.10",
"@esbuild/android-arm": "0.25.10",
"@esbuild/android-arm64": "0.25.10",
"@esbuild/android-x64": "0.25.10",
"@esbuild/darwin-arm64": "0.25.10",
"@esbuild/darwin-x64": "0.25.10",
"@esbuild/freebsd-arm64": "0.25.10",
"@esbuild/freebsd-x64": "0.25.10",
"@esbuild/linux-arm": "0.25.10",
"@esbuild/linux-arm64": "0.25.10",
"@esbuild/linux-ia32": "0.25.10",
"@esbuild/linux-loong64": "0.25.10",
"@esbuild/linux-mips64el": "0.25.10",
"@esbuild/linux-ppc64": "0.25.10",
"@esbuild/linux-riscv64": "0.25.10",
"@esbuild/linux-s390x": "0.25.10",
"@esbuild/linux-x64": "0.25.10",
"@esbuild/netbsd-arm64": "0.25.10",
"@esbuild/netbsd-x64": "0.25.10",
"@esbuild/openbsd-arm64": "0.25.10",
"@esbuild/openbsd-x64": "0.25.10",
"@esbuild/openharmony-arm64": "0.25.10",
"@esbuild/sunos-x64": "0.25.10",
"@esbuild/win32-arm64": "0.25.10",
"@esbuild/win32-ia32": "0.25.10",
"@esbuild/win32-x64": "0.25.10"
}
},
"node_modules/escalade": {
"version": "3.2.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/fdir": {
"version": "6.5.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
"picomatch": "^3 || ^4"
},
"peerDependenciesMeta": {
"picomatch": {
"optional": true
}
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"dev": true,
"license": "MIT"
},
"node_modules/jsesc": {
"version": "3.1.0",
"dev": true,
"license": "MIT",
"bin": {
"jsesc": "bin/jsesc"
},
"engines": {
"node": ">=6"
}
},
"node_modules/json5": {
"version": "2.2.3",
"dev": true,
"license": "MIT",
"bin": {
"json5": "lib/cli.js"
},
"engines": {
"node": ">=6"
}
},
"node_modules/lru-cache": {
"version": "5.1.1",
"dev": true,
"license": "ISC",
"dependencies": {
"yallist": "^3.0.2"
}
},
"node_modules/lucide-react": {
"version": "0.544.0",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/ms": {
"version": "2.1.3",
"dev": true,
"license": "MIT"
},
"node_modules/nanoid": {
"version": "3.3.11",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/node-releases": {
"version": "2.0.23",
"dev": true,
"license": "MIT"
},
"node_modules/picocolors": {
"version": "1.1.1",
"dev": true,
"license": "ISC"
},
"node_modules/picomatch": {
"version": "4.0.3",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/postcss": {
"version": "8.5.6",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/react": {
"version": "19.2.0",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "19.2.0",
"license": "MIT",
"dependencies": {
"scheduler": "^0.27.0"
},
"peerDependencies": {
"react": "^19.2.0"
}
},
"node_modules/react-refresh": {
"version": "0.17.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/rollup": {
"version": "4.52.4",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "1.0.8"
},
"bin": {
"rollup": "dist/bin/rollup"
},
"engines": {
"node": ">=18.0.0",
"npm": ">=8.0.0"
},
"optionalDependencies": {
"@rollup/rollup-android-arm-eabi": "4.52.4",
"@rollup/rollup-android-arm64": "4.52.4",
"@rollup/rollup-darwin-arm64": "4.52.4",
"@rollup/rollup-darwin-x64": "4.52.4",
"@rollup/rollup-freebsd-arm64": "4.52.4",
"@rollup/rollup-freebsd-x64": "4.52.4",
"@rollup/rollup-linux-arm-gnueabihf": "4.52.4",
"@rollup/rollup-linux-arm-musleabihf": "4.52.4",
"@rollup/rollup-linux-arm64-gnu": "4.52.4",
"@rollup/rollup-linux-arm64-musl": "4.52.4",
"@rollup/rollup-linux-loong64-gnu": "4.52.4",
"@rollup/rollup-linux-ppc64-gnu": "4.52.4",
"@rollup/rollup-linux-riscv64-gnu": "4.52.4",
"@rollup/rollup-linux-riscv64-musl": "4.52.4",
"@rollup/rollup-linux-s390x-gnu": "4.52.4",
"@rollup/rollup-linux-x64-gnu": "4.52.4",
"@rollup/rollup-linux-x64-musl": "4.52.4",
"@rollup/rollup-openharmony-arm64": "4.52.4",
"@rollup/rollup-win32-arm64-msvc": "4.52.4",
"@rollup/rollup-win32-ia32-msvc": "4.52.4",
"@rollup/rollup-win32-x64-gnu": "4.52.4",
"@rollup/rollup-win32-x64-msvc": "4.52.4",
"fsevents": "~2.3.2"
}
},
"node_modules/scheduler": {
"version": "0.27.0",
"license": "MIT"
},
"node_modules/semver": {
"version": "6.3.1",
"dev": true,
"license": "ISC",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/tinyglobby": {
"version": "0.2.15",
"dev": true,
"license": "MIT",
"dependencies": {
"fdir": "^6.5.0",
"picomatch": "^4.0.3"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/typescript": {
"version": "4.9.5",
"dev": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/update-browserslist-db": {
"version": "1.1.3",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"escalade": "^3.2.0",
"picocolors": "^1.1.1"
},
"bin": {
"update-browserslist-db": "cli.js"
},
"peerDependencies": {
"browserslist": ">= 4.21.0"
}
},
"node_modules/vite": {
"version": "7.1.9",
"dev": true,
"license": "MIT",
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
"picomatch": "^4.0.3",
"postcss": "^8.5.6",
"rollup": "^4.43.0",
"tinyglobby": "^0.2.15"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"funding": {
"url": "https://github.com/vitejs/vite?sponsor=1"
},
"optionalDependencies": {
"fsevents": "~2.3.3"
},
"peerDependencies": {
"@types/node": "^20.19.0 || >=22.12.0",
"jiti": ">=1.21.0",
"less": "^4.0.0",
"lightningcss": "^1.21.0",
"sass": "^1.70.0",
"sass-embedded": "^1.70.0",
"stylus": ">=0.54.8",
"sugarss": "^5.0.0",
"terser": "^5.16.0",
"tsx": "^4.8.1",
"yaml": "^2.4.2"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
},
"jiti": {
"optional": true
},
"less": {
"optional": true
},
"lightningcss": {
"optional": true
},
"sass": {
"optional": true
},
"sass-embedded": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"terser": {
"optional": true
},
"tsx": {
"optional": true
},
"yaml": {
"optional": true
}
}
},
"node_modules/yallist": {
"version": "3.1.1",
"dev": true,
"license": "ISC"
}
}
}

86
package.json
View File

@@ -1,33 +1,85 @@
{ {
"name": "nextjs-app", "name": "nextjs-shopify-collection",
"version": "0.1.0",
"private": true, "private": true,
"version": "0.0.0",
"type": "module",
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev --turbopack",
"build": "next build", "build": "next build",
"start": "next start" "start": "next start",
"lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@ai-sdk/anthropic": "^3.0.35",
"@ai-sdk/openai": "^3.0.25",
"@ai-sdk/react": "^3.0.70",
"@neondatabase/serverless": "^1.0.2",
"@openrouter/ai-sdk-provider": "^2.1.1",
"@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-alert-dialog": "^1.1.6",
"@radix-ui/react-aspect-ratio": "^1.1.2",
"@radix-ui/react-avatar": "^1.1.3",
"@radix-ui/react-checkbox": "^1.1.4",
"@radix-ui/react-collapsible": "^1.1.3",
"@radix-ui/react-context-menu": "^2.2.6",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-direction": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-hover-card": "^1.1.6",
"@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-menubar": "^1.1.6",
"@radix-ui/react-navigation-menu": "^1.2.5",
"@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-progress": "^1.1.2",
"@radix-ui/react-radio-group": "^1.2.3",
"@radix-ui/react-scroll-area": "^1.2.3",
"@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slider": "^1.2.3",
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-switch": "^1.1.3",
"@radix-ui/react-tabs": "^1.1.3",
"@radix-ui/react-toggle": "^1.1.2",
"@radix-ui/react-toggle-group": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.8",
"@remixicon/react": "^4.6.0",
"@supabase/supabase-js": "^2.95.0",
"@tailwindcss/postcss": "^4.0.0",
"@xyflow/react": "^12.10.0",
"ai": "^6.0.62",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"embla-carousel-react": "^8.6.0", "cmdk": "^1.0.4",
"date-fns": "^4.1.0",
"drizzle-orm": "^0.45.1",
"embla-carousel-react": "^8.5.2",
"framer-motion": "^12.0.0",
"input-otp": "^1.4.2", "input-otp": "^1.4.2",
"lucide-react": "^0.562.0", "lucide-react": "^0.563.0",
"motion": "^12.23.26", "motion": "^12.33.0",
"react": "^19.1.1", "nanoid": "^5.1.6",
"react-dom": "^19.1.1", "next": "^16.1.0",
"openai": "^6.17.0",
"react": "^19.0.0",
"react-day-picker": "^9.5.0",
"react-dom": "^19.0.0",
"react-markdown": "^10.1.0",
"react-resizable-panels": "^4.5.8",
"recharts": "^3.7.0",
"shiki": "^3.21.0",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^3.4.0", "streamdown": "^2.1.0",
"next": "^15.5.7", "tailwind-merge": "^3.0.1",
"tailwindcss": "^4.1.18", "tailwindcss": "^4.0.0",
"@remixicon/react": "^4.7.0", "tokenlens": "^1.3.1",
"@supabase/supabase-js": "^2.51.0", "tw-animate-css": "^1.0.0",
"use-stick-to-bottom": "^1.0.0",
"vaul": "^1.1.2",
"zod": "^4.3.5" "zod": "^4.3.5"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.18", "@types/node": "^25.2.0",
"@types/react": "^19.0.0", "@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0", "@types/react-dom": "^19.0.0",
"typescript": "^4.9.3" "typescript": "^5.7.0"
} }
} }

36
services/shopify/api.ts
View File

@@ -1,36 +0,0 @@
// Main Shopify API service that combines all functionality
export { shopifyFetch, SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_API_URL } from './index.js';
// Product functions
export {
getProducts,
getProduct,
getProductRecommendations,
GET_PRODUCTS_QUERY,
GET_PRODUCT_QUERY,
QUERY_PRODUCT_RECOMMENDATIONS,
ProductFragment
} from '../../graphql/products.js';
// Collection functions
export {
getCollections,
getCollectionProducts,
GET_COLLECTIONS_QUERY,
GET_COLLECTION_PRODUCTS_QUERY
} from '../../graphql/collections.js';
// Cart functions
export {
createCart,
addCartLines,
updateCartLines,
removeCartLines,
getCart,
redirectToCheckout,
CREATE_CART_MUTATION,
ADD_CART_LINES_MUTATION,
UPDATE_CART_LINES_MUTATION,
REMOVE_CART_LINES_MUTATION,
GET_CART_QUERY
} from '../../graphql/cart.js';

48
services/shopify/index.js
View File

@@ -1,48 +0,0 @@
// Shopify Storefront API Service
const SHOPIFY_STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN;
const SHOPIFY_STOREFRONT_ACCESS_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
const SHOPIFY_API_VERSION = process.env.NEXT_PUBLIC_SHOPIFY_API_VERSION || '2025-07';
const SHOPIFY_STOREFRONT_API_URL = `https://${SHOPIFY_STORE_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`;
// Shopify API request with optional access token
async function shopifyFetch({ query, variables = {} }) {
try {
const headers = {
'Content-Type': 'application/json',
};
// Add access token if available
if (SHOPIFY_STOREFRONT_ACCESS_TOKEN) {
headers['X-Shopify-Storefront-Access-Token'] = SHOPIFY_STOREFRONT_ACCESS_TOKEN;
}
const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
method: 'POST',
headers,
body: JSON.stringify({
query,
variables,
}),
cache: 'no-store', // Ensure fresh data for cart operations
});
if (!response.ok) {
const errorBody = await response.text();
throw new Error(`Shopify API HTTP error! Status: ${response.status}, Body: ${errorBody}`);
}
const json = await response.json();
if (json.errors) {
console.error('Shopify API errors:', json.errors);
throw new Error(`Shopify GraphQL errors: ${JSON.stringify(json.errors)}`);
}
return json;
} catch (error) {
console.error('Shopify fetch error:', error);
throw error;
}
}
export { shopifyFetch, SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_API_URL };

18
tsconfig.json
View File

@@ -1,17 +1,10 @@
{ {
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./*"] "@/*": [
"./*"
]
}, },
"target": "ES2017", "target": "ES2017",
"lib": [ "lib": [
@@ -30,7 +23,7 @@
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "react-jsx",
"plugins": [ "plugins": [
{ {
"name": "next" "name": "next"
@@ -41,7 +34,8 @@
"next-env.d.ts", "next-env.d.ts",
".next/types/**/*.ts", ".next/types/**/*.ts",
"**/*.ts", "**/*.ts",
"**/*.tsx" "**/*.tsx",
".next/dev/types/**/*.ts"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"

2755
yarn.lock
View File

File diff suppressed because it is too large Load Diff