+ {product.title} +

+ + {/* Price */} +

+ + {formatPrice(price)} + + {hasDiscount && compareAtPrice && ( + <> + + {formatPrice(compareAtPrice)} + +

+ {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF +

+ + )} +

+ + {/* Description */} + {product.description && ( +

+ {product.descriptionHtml ? ( +

+ ) : ( +

{product.description}

+ )} +

+ )} + + {/* Product Options */} + {product.options + .filter(option => option.name !== 'Title') + .map(option => ( +

+ + {option.name} + +

+ {option.values.map(value => ( + + ))} +

+ ))} + + {/* Quantity Selector */} +

+ + Quantity + +

+ + {quantity} + +

+ + {/* Add to Cart Button */} + + + {/* Additional Info */} +

+ + Free shipping on orders over $100 +

+ + 30-day return policy +

+ + Secure payment +

+ ); +}; + +export default ProductDetailInfo; \ No newline at end of file diff --git a/components/product-detail/ProductRecommendations.tsx b/components/product-detail/ProductRecommendations.tsx new file mode 100644 index 0000000..da6845b --- /dev/null +++ b/components/product-detail/ProductRecommendations.tsx @@ -0,0 +1,85 @@ +"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 = ({ productId }) => { + const [recommendedProducts, setRecommendedProducts] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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 ( +

+ You Might Also Like +

+ + {loading ? ( +

+ {Array.from({ length: 4 }).map((_, index) => ( +

+ ))} +

+ ) : error ? ( +

Recommendations could not be loaded

+ ) : ( +

+ {recommendedProducts.slice(0, 4).map((recommendedProduct) => ( + + ))} +

+ )} +

+ ); +}; + +export default ProductRecommendations; \ No newline at end of file diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..9d3232c --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,197 @@ +import React, { createContext, useContext, useState, useCallback } from 'react'; +import { cn } from '@/lib/utils'; + +interface AccordionContextType { + value: string | string[]; + onValueChange: (value: string) => void; + type: 'single' | 'multiple'; +} + +const AccordionContext = createContext( + 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({ + type = 'single', + value: controlledValue, + onValueChange, + children, +}: AccordionProps) { + const [internalValue, setInternalValue] = useState( + 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 ( + +

{children}

+ + ); +} + +interface AccordionItemProps { + value: string; + children: React.ReactNode; + className?: string; +} + +function AccordionItem({ value, children, className }: AccordionItemProps) { + return ( + +

+ {children} +

+ + ); +} + +interface AccordionTriggerProps extends React.ButtonHTMLAttributes { + children: React.ReactNode; +} + +function AccordionTrigger({ + className, + children, + ...props +}: AccordionTriggerProps) { + 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 ( +

+ +

+ ); +} + +interface AccordionContentProps extends React.HTMLAttributes { + children: React.ReactNode; +} + +function AccordionContent({ + className, + children, + ...props +}: AccordionContentProps) { + 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 ( +

{children}

+ ); +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..3c5a3e4 --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,60 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +type AlertVariant = "default" | "destructive" + +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" + +const variantClasses: Record = { + default: "bg-card text-card-foreground", + destructive: + "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", +} + +function Alert({ + className, + variant = "default", + ...props +}: React.ComponentProps<"div"> & { variant?: AlertVariant }) { + return ( +

+ ) +} + +function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +

+ ) +} + +function AlertDescription({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +

+ ) +} + +export { Alert, AlertTitle, AlertDescription } diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..6cd2e95 --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { cn } from '@/lib/utils'; + +interface AvatarProps extends React.ComponentProps<'div'> { + size?: 'sm' | 'md' | 'lg' | 'xl'; +} + +const sizeClasses = { + 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); + + return ( +

+ ); +} + +function AvatarImage({ + className, + onError, + ...props +}: React.ComponentProps<'img'>) { + const [hasError, setHasError] = React.useState(false); + + const handleError = (e: React.SyntheticEvent) => { + setHasError(true); + onError?.(e as any); + }; + + if (hasError) { + return null; + } + + return ( + + ); +} + +interface AvatarFallbackProps extends React.ComponentProps<'div'> { + children: React.ReactNode; +} + +function AvatarFallback({ + className, + children, + ...props +}: AvatarFallbackProps) { + return ( +

+ {children} +

+ ); +} + +export { Avatar, AvatarImage, AvatarFallback }; +export type { AvatarProps }; diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..ef46f46 --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { cn } from '@/lib/utils'; + +type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'; + +interface BadgeProps extends React.ComponentProps<'span'> { + variant?: BadgeVariant; + asChild?: boolean; +} + +const badgeVariants: Record = { + default: + 'border-transparent bg-primary text-primary-foreground hover:bg-primary/90', + secondary: + 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90', + 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', + outline: + 'text-foreground border-border hover:bg-accent hover:text-accent-foreground', +}; + +function Badge({ + className, + variant = 'default', + asChild = false, + children, + ...props +}: BadgeProps) { + const baseClasses = cn( + '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', + '[&>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 ( + + {children} + + ); +} + +export { Badge, badgeVariants }; +export type { BadgeProps }; diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..cbe7189 --- /dev/null +++ b/components/ui/breadcrumb.tsx @@ -0,0 +1,148 @@ +import React from 'react'; +import { cn } from '@/lib/utils'; + +function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { + return

; +} + +function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { + return ( +

+ ); +} + +function BreadcrumbLink({ + asChild, + className, + children, + ...props +}: React.ComponentProps<'a'> & { + asChild?: boolean; +}) { + if (asChild && React.isValidElement(children)) { + return React.cloneElement(children as React.ReactElement, { + className: cn( + 'hover:text-foreground transition-colors', + children.props.className, + className + ), + ...props, + }); + } + + return ( + + {children} + + ); +} + +function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { + return ( + + ); +} + +function BreadcrumbSeparator({ + children, + className, + ...props +}: React.ComponentProps<'li'>) { + return ( +
svg]:size-3.5', className)} + {...props} + > + {children ?? ( + + )} +

+ ); +} + +interface ButtonGroupTextProps extends React.ComponentProps<'div'> { + asChild?: boolean; +} + +function ButtonGroupText({ + className, + asChild = false, + ...props +}: ButtonGroupTextProps) { + const Comp = asChild ? 'div' : 'div'; + return ( + + ); +} + +interface ButtonGroupSeparatorProps extends React.ComponentProps<'div'> { + orientation?: 'horizontal' | 'vertical'; +} + +function ButtonGroupSeparator({ + className, + orientation = 'vertical', + ...props +}: ButtonGroupSeparatorProps) { + const separatorClasses = + orientation === 'vertical' ? 'w-px h-auto' : 'h-px w-auto'; + + return ( +

+ ); +} + +export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText }; +export type { + ButtonGroupProps, + ButtonGroupTextProps, + ButtonGroupSeparatorProps, +}; diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..d5ed246 --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { cn } from '@/lib/utils'; + +interface ButtonProps extends React.ButtonHTMLAttributes { + variant?: + | 'default' + | 'destructive' + | 'outline' + | 'secondary' + | 'ghost' + | 'link'; + size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'; + children?: React.ReactNode; +} + +const Button = React.forwardRef( + ({ className, variant = 'default', size = 'default', ...props }, ref) => { + const baseClasses = cn( + // Base styles + 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all', + '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 variantClasses = { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: + 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', + 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', + secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: + 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', + link: 'text-primary underline-offset-4 hover:underline', + }; + + const sizeClasses = { + default: 'h-9 px-4 py-2 has-[>svg]:px-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-sm': 'size-8', + 'icon-lg': 'size-10', + }; + + return ( + + ); +} + +interface CarouselNextProps { + className?: string; +} + +function CarouselNext({ className }: CarouselNextProps) { + const { scrollNext, canScrollNext, orientation } = useCarousel(); + + return ( + + ); +} + +export { + Carousel, + CarouselContent, + CarouselItem, + CarouselPrevious, + CarouselNext, + useCarousel, +}; diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx new file mode 100644 index 0000000..113199e --- /dev/null +++ b/components/ui/collapsible.tsx @@ -0,0 +1,193 @@ +"use client" + +import * as React from "react" + +import { cn } from "@/lib/utils" + +interface CollapsibleContextValue { + open: boolean + setOpen: (open: boolean) => void + contentId: string +} + +const CollapsibleContext = React.createContext(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 { + open?: boolean + defaultOpen?: boolean + onOpenChange?: (open: boolean) => void + disabled?: boolean +} + +function Collapsible({ + children, + open: controlledOpen, + defaultOpen = false, + onOpenChange, + disabled, + className, + ...props +}: CollapsibleProps) { + const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) + 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 ( + +

+ {children} +

+ + ) +} + +interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes { + asChild?: boolean +} + +function CollapsibleTrigger({ + children, + asChild, + className, + ...props +}: CollapsibleTriggerProps) { + const { open, setOpen, contentId } = useCollapsible() + + const handleClick = (e: React.MouseEvent) => { + props.onClick?.(e) + if (!e.defaultPrevented) { + setOpen(!open) + } + } + + if (asChild && React.isValidElement(children)) { + return React.cloneElement(children as React.ReactElement, { + onClick: handleClick, + "aria-expanded": open, + "aria-controls": contentId, + "data-state": open ? "open" : "closed", + "data-slot": "collapsible-trigger", + }) + } + + return ( + + ) +} + +interface CollapsibleContentProps extends React.HTMLAttributes { + forceMount?: boolean +} + +function CollapsibleContent({ + children, + className, + forceMount, + ...props +}: CollapsibleContentProps) { + const { open, contentId } = useCollapsible() + const contentRef = React.useRef(null) + const [height, setHeight] = React.useState(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 ( + + ) +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/components/ui/command.tsx b/components/ui/command.tsx new file mode 100644 index 0000000..c199d7b --- /dev/null +++ b/components/ui/command.tsx @@ -0,0 +1,421 @@ +"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 + registerItem: (element: HTMLDivElement | null, index: number) => void + filter: (value: string, search: string) => boolean +} + +const CommandContext = React.createContext(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 { + 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([]) + + 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 ( + +

+ {children} +

+ + ) +} + +function CommandDialog({ + title = "Command Palette", + description = "Search for a command to run...", + children, + className, + showCloseButton = false, + ...props +}: React.ComponentProps & { + title?: string + description?: string + className?: string + showCloseButton?: boolean +}) { + return ( + + ) +} + +function CommandInput({ + className, + ...props +}: React.InputHTMLAttributes) { + const { search, setSearch } = useCommand() + + return ( +

+ + 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} + /> +

+ ) +} + +function CommandList({ + className, + ...props +}: React.HTMLAttributes) { + return ( +

Your cart is empty

+ {item.merchandise.product.title} +

+ {collection.title} +

+ Collection +

+ Collection Not Found +

+ {collection.title} +

+ No Products in Collection +

+ Our Collections +

+ Our Collections +

+ Failed to Load Collections +

+ Our Collections +

+ No Collections Found +

+ Our Collections +

+ {truncate(product.title, 60)} +

+ {title} +

+ {title} +

+ Failed to Load Products +

+ {title} +

+ No Products Found +

+ {title} +

+ Product Not Found +

+ {product.title} +

+ You Might Also Like +