@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/order-history/order-history-1.tsx

@@ -0,0 +1,159 @@
+import { Button } from '../../../ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../../../ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table'
+
+export interface OrderHistory1Order {
+  name: string
+  image: string
+  color: string
+  size: string
+  quantity: number
+  price: number
+  orderDate: string
+}
+
+export interface OrderHistory1Props {
+  orders: OrderHistory1Order[]
+  title?: string
+  description?: string
+  totalOrdersLabel?: string
+  lastOrderLabel?: string
+  itemLabel?: string
+  orderDateLabel?: string
+  quantityLabel?: string
+  priceLabel?: string
+  colorLabel?: string
+  sizeLabel?: string
+  viewDetailsLabel?: string
+  downloadInvoiceLabel?: string
+  onViewDetails?: () => void
+  onDownloadInvoice?: () => void
+}
+
+function getLastOrder(orders: OrderHistory1Order[]): string {
+  if (orders.length === 0) return ''
+  return orders.reduce((latest, order) => {
+    const current = new Date(order.orderDate)
+    const previous = new Date(latest)
+    if (Number.isNaN(current.getTime())) return latest
+    if (Number.isNaN(previous.getTime())) return order.orderDate
+    return current > previous ? order.orderDate : latest
+  }, orders[0].orderDate)
+}
+
+export function OrderHistory1({
+  orders,
+  title,
+  description,
+  totalOrdersLabel = 'Total de pedidos',
+  lastOrderLabel = 'Último pedido',
+  itemLabel = 'Artículo',
+  orderDateLabel = 'Fecha',
+  quantityLabel = 'Cantidad',
+  priceLabel = 'Precio',
+  colorLabel = 'Color',
+  sizeLabel = 'Talla',
+  viewDetailsLabel = 'Ver detalles del pedido',
+  downloadInvoiceLabel = 'Descargar factura',
+  onViewDetails,
+  onDownloadInvoice,
+}: OrderHistory1Props) {
+  const totalAmount = orders.reduce((sum, order) => sum + order.price, 0)
+  const lastOrder = getLastOrder(orders)
+
+  return (
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <Card>
+        <CardHeader className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-x-6">
+          <div>
+            <CardTitle className="text-2xl">{title ?? 'Historial de pedidos'}</CardTitle>
+            <CardDescription className="text-balance">
+              {description ?? 'Ver tus pedidos anteriores y su estado'}
+            </CardDescription>
+          </div>
+          <div className="text-end text-sm text-muted-foreground max-sm:text-start">
+            <p>{totalOrdersLabel}: {orders.length}</p>
+            <p>{lastOrderLabel}: {lastOrder}</p>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="font-semibold">{itemLabel}</TableHead>
+                <TableHead className="hidden text-end font-semibold sm:table-cell">{orderDateLabel}</TableHead>
+                <TableHead className="hidden text-end font-semibold md:table-cell">{quantityLabel}</TableHead>
+                <TableHead className="text-end font-semibold">{priceLabel}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {orders.map((order) => (
+                <TableRow key={order.name}>
+                  <TableCell className="flex flex-col gap-3 py-3 sm:flex-row sm:items-center">
+                    <img
+                      src={order.image || undefined}
+                      alt={order.name}
+                      className="h-16 w-16 shrink-0 rounded-md object-cover"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium">{order.name}</p>
+                      <p className="truncate text-sm text-muted-foreground">
+                        {colorLabel}: {order.color} • {sizeLabel}: {order.size}
+                      </p>
+                      <p className="mt-1 text-xs text-muted-foreground sm:hidden">{order.orderDate}</p>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden text-end sm:table-cell">{order.orderDate}</TableCell>
+                  <TableCell className="hidden text-end md:table-cell">{order.quantity}</TableCell>
+                  <TableCell className="text-end">${order.price.toFixed(2)}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter className="bg-transparent">
+              <TableRow className="font-semibold hover:bg-transparent md:hidden">
+                <TableCell colSpan={1} />
+                <TableCell className="text-end">${totalAmount.toFixed(2)}</TableCell>
+              </TableRow>
+              <TableRow className="hidden font-semibold hover:bg-transparent md:table-row">
+                <TableCell colSpan={2} />
+                <TableCell className="text-end">${totalAmount.toFixed(2)}</TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+        </CardContent>
+        <CardFooter className="flex flex-wrap gap-4 border-t-0 bg-transparent pt-0">
+          <Button
+            className="h-9 cursor-pointer px-4 py-2"
+            onClick={onViewDetails}
+          >
+            {viewDetailsLabel}
+          </Button>
+          <Button
+            className="h-9 cursor-pointer px-4 py-2"
+            variant="secondary"
+            onClick={onDownloadInvoice}
+          >
+            {downloadInvoiceLabel}
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+export default OrderHistory1

package/src/blocks/e-commerce/order-history/order-history-2.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../ui/card"
+import { Badge } from "../../../ui/badge"
+import { Button } from "../../../ui/button"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "../../../ui/carousel"
+
+export interface OrderItem {
+  id: string
+  name: string
+  image: string
+  details: string
+  price: string
+  quantity: number
+}
+
+export interface Order {
+  id: string
+  date: string
+  status: string
+  total: string
+  items: OrderItem[]
+}
+
+export interface OrderHistory2Props {
+  orders: Order[]
+  titleLabel?: string
+  descriptionLabel?: string
+  totalOrdersLabel?: string
+  lastOrderLabel?: string
+  orderLabel?: string
+  placedOnLabel?: string
+  trackOrderLabel?: string
+  viewDetailsLabel?: string
+  qtyLabel?: string
+  orderTotalLabel?: string
+  onTrackOrder?: (order: Order) => void
+  onViewDetails?: (order: Order) => void
+}
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: typeof window !== "undefined" ? window.innerWidth : 0,
+  })
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+      })
+    }
+
+    window.addEventListener("resize", handleResize)
+    handleResize()
+
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  return windowSize
+}
+
+function getVisibleItemsCount(width: number) {
+  if (width >= 1024) return 4
+  if (width >= 640) return 2
+  return 1
+}
+
+function formatLabel(label: string, values: Record<string, string | number>): string {
+  return label.replace(/\{(\w+)\}/g, (match, key) => {
+    return key in values ? String(values[key]) : match
+  })
+}
+
+export function OrderHistory2({
+  orders,
+  titleLabel = "Tus pedidos",
+  descriptionLabel = "Consulta y gestiona tus pedidos recientes",
+  totalOrdersLabel = "Total de pedidos: {n}",
+  lastOrderLabel = "Último pedido realizado el {date}",
+  orderLabel = "Pedido {id}",
+  placedOnLabel = "Realizado el {date}",
+  trackOrderLabel = "Seguir pedido",
+  viewDetailsLabel = "Ver detalles",
+  qtyLabel = "Cantidad: {n}",
+  orderTotalLabel = "Total del pedido",
+  onTrackOrder,
+  onViewDetails,
+}: OrderHistory2Props) {
+  const { width } = useWindowSize()
+  const visibleItemsCount = getVisibleItemsCount(width)
+  const hasOrders = orders.length > 0
+
+  const shouldShowArrows = (items: OrderItem[]) => {
+    return items.length > visibleItemsCount
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+      <Card className="overflow-visible border-0 bg-transparent shadow-none ring-0">
+        <CardHeader className="flex flex-col gap-4 px-0 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle className="text-2xl text-balance">{titleLabel}</CardTitle>
+            <CardDescription className="text-balance">
+              {descriptionLabel}
+            </CardDescription>
+          </div>
+          <div className="flex flex-col items-start gap-1 sm:items-end">
+            <p className="text-sm font-medium">{formatLabel(totalOrdersLabel, { n: orders.length })}</p>
+            {hasOrders ? (
+              <p className="text-sm text-muted-foreground">
+                {formatLabel(lastOrderLabel, { date: orders[0].date })}
+              </p>
+            ) : null}
+          </div>
+        </CardHeader>
+        <CardContent className="grid gap-6 p-0">
+          {orders.map((order) => (
+            <Card key={order.id} className="overflow-hidden pt-0">
+              <CardHeader className="flex flex-col gap-4 bg-muted/50 p-6 md:flex-row md:items-center md:justify-between">
+                <div className="flex flex-col gap-1.5">
+                  <div className="flex items-center gap-3">
+                    <CardTitle className="text-lg text-balance">
+                      {formatLabel(orderLabel, { id: order.id })}
+                    </CardTitle>
+                    <Badge
+                      variant={order.status === "Delivered" ? "default" : "secondary"}
+                      className="px-2.5 py-0.5 font-semibold"
+                    >
+                      {order.status}
+                    </Badge>
+                  </div>
+                  <CardDescription className="text-sm text-balance">
+                    {formatLabel(placedOnLabel, { date: order.date })}
+                  </CardDescription>
+                </div>
+                <div className="flex flex-wrap items-center gap-3">
+                  {order.status === "Processing" ? (
+                    <Button
+                      size="sm"
+                      className="h-8 cursor-pointer px-3 text-xs"
+                      onClick={onTrackOrder ? () => onTrackOrder(order) : undefined}
+                    >
+                      {trackOrderLabel}
+                    </Button>
+                  ) : null}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 cursor-pointer px-3 text-xs"
+                    onClick={onViewDetails ? () => onViewDetails(order) : undefined}
+                  >
+                    {viewDetailsLabel}
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent className="px-16">
+                <Carousel opts={{ align: "start", loop: false }} className="w-full [&>div]:p-4">
+                  <CarouselContent className="-ml-5" id={`carousel-${order.id}`}>
+                    {order.items.map((item) => (
+                      <CarouselItem
+                        key={item.id}
+                        className="basis-full pl-5.5 sm:basis-1/2 lg:basis-1/4"
+                      >
+                        <Card className="py-0">
+                          <CardContent className="p-4">
+                            <div className="aspect-square w-full overflow-hidden rounded-lg">
+                              <img
+                                src={item.image || undefined}
+                                alt={item.name}
+                                className="size-full object-contain"
+                              />
+                            </div>
+                            <div className="mt-4 flex flex-col gap-2">
+                              <h4 className="font-medium">{item.name}</h4>
+                              <p className="text-sm text-muted-foreground">{item.details}</p>
+                              <div className="flex items-center justify-between">
+                                <p className="font-medium">{item.price}</p>
+                                <p className="text-sm text-muted-foreground">
+                                  {formatLabel(qtyLabel, { n: item.quantity })}
+                                </p>
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </CarouselItem>
+                    ))}
+                  </CarouselContent>
+
+                  {shouldShowArrows(order.items) ? (
+                    <>
+                      <CarouselPrevious className="-inset-inline-start-10" />
+                      <CarouselNext className="-inset-inline-end-10" />
+                    </>
+                  ) : null}
+                </Carousel>
+                <div className="mt-6 flex items-center justify-between border-t pt-4">
+                  <p className="text-sm text-muted-foreground">{orderTotalLabel}</p>
+                  <p className="text-lg font-semibold">{order.total}</p>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default OrderHistory2

package/src/blocks/e-commerce/product-categories/avatar-group.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+
+import { cn } from '../../../lib/utils'
+
+/**
+ * @title Avatar group
+ * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.
+ *
+ * Adapted from Transitions.dev "Avatar group hover".
+ *
+ * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps
+ * while the rest sit rigid — so the response falls off with distance: the neighbour rises about
+ * half as far, the next barely at all. The falloff is what makes the row read as one soft object.
+ *
+ * The return is deliberately springier than the approach: a strong overshoot curve on the way back
+ * reads as elastic rather than mechanical.
+ */
+const LIFT = -4
+const FALLOFF = 0.45
+const ACTIVE_SCALE = 1.05
+const DURATION = 320
+const EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'
+const EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'
+
+export function AvatarGroup({
+  children,
+  className,
+  overlap = '-ml-2',
+}: {
+  children: React.ReactNode
+  className?: string
+  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */
+  overlap?: string
+}) {
+  const items = React.Children.toArray(children)
+  const [activeIndex, setActiveIndex] = useState<number | null>(null)
+  const [reducedMotion, setReducedMotion] = useState(false)
+
+  useEffect(() => {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const sync = () => setReducedMotion(query.matches)
+
+    sync()
+    query.addEventListener('change', sync)
+    return () => query.removeEventListener('change', sync)
+  }, [])
+
+  const itemStyle = (index: number): React.CSSProperties | undefined => {
+    if (reducedMotion) {
+      return undefined
+    }
+
+    const isActive = index === activeIndex
+    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)
+
+    return {
+      // translateY before scale, so scaling never amplifies the lift distance.
+      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
+      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
+      willChange: 'transform',
+      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
+      zIndex: isActive ? 1 : undefined,
+    }
+  }
+
+  return (
+    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>
+      {items.map((child, index) => (
+        <div
+          // eslint-disable-next-line react/no-array-index-key -- position is the identity here
+          key={index}
+          className={cn('relative', index > 0 && overlap)}
+          style={itemStyle(index)}
+          onMouseEnter={() => setActiveIndex(index)}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AvatarGroup

package/src/blocks/e-commerce/product-categories/product-category-1.tsx

@@ -0,0 +1,126 @@
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+import {
+  ArrowRight,
+  BatteryCharging,
+  Cable,
+  Camera,
+  Lightbulb,
+  ShieldCheck,
+  Smartphone,
+  Sparkles,
+  Wrench,
+  X,
+} from 'lucide-react'
+import type { CTA } from '../../../lib/types'
+
+const categoryIcons = {
+  Smartphone,
+  BatteryCharging,
+  Wrench,
+  Camera,
+  Cable,
+  ShieldCheck,
+  Sparkles,
+  Lightbulb,
+} as const
+
+export type ProductCategory1CategoryIcon =
+  | 'Smartphone'
+  | 'BatteryCharging'
+  | 'Wrench'
+  | 'Camera'
+  | 'Cable'
+  | 'ShieldCheck'
+  | 'Sparkles'
+  | 'Lightbulb'
+
+export interface ProductCategory1Category {
+  id: string
+  name: string
+  subtitle: string
+  icon: ProductCategory1CategoryIcon
+}
+
+export interface ProductCategory1Props {
+  badge?: string
+  title: string
+  description?: string
+  cta?: CTA
+  categories: ProductCategory1Category[]
+  className?: string
+}
+
+export function ProductCategory1({
+  badge,
+  title,
+  description,
+  cta,
+  categories,
+  className,
+}: ProductCategory1Props) {
+  return (
+    <section className={cn('relative w-full py-12 md:py-16 lg:py-20', className)}>
+      <div className='relative z-10 mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <header className='mx-auto mb-12 max-w-5xl'>
+          <div className='flex flex-col items-center justify-between gap-6 md:flex-row md:items-start md:text-start'>
+            <div className='flex flex-col items-center gap-4 text-center md:items-start md:text-start'>
+              {badge ? (
+                <div className='inline-flex'>
+                  <span className='bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium'>
+                    {badge}
+                  </span>
+                </div>
+              ) : null}
+              <div className='flex flex-col gap-2'>
+                <h2 className='text-foreground text-3xl font-bold tracking-tight md:text-4xl'>{title}</h2>
+                {description ? (
+                  <p className='text-muted-foreground max-w-2xl'>{description}</p>
+                ) : null}
+              </div>
+            </div>
+            {cta ? (
+              <Button
+                className='h-10 cursor-pointer whitespace-nowrap px-4'
+                size='lg'
+                asChild
+              >
+                <a href={cta.href}>
+                  {cta.label}
+                  <ArrowRight />
+                </a>
+              </Button>
+            ) : null}
+          </div>
+        </header>
+
+        <div className='mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+          {categories.map(category => {
+            const Icon = categoryIcons[category.icon] ?? X
+            return (
+              <Card
+                key={category.id}
+                className='group relative overflow-hidden py-6 px-2 shadow-xs transition-all hover:shadow-md'
+              >
+                <CardContent>
+                  <div className='flex flex-col gap-4'>
+                    <div className='bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg'>
+                      <Icon className='size-5' strokeWidth={1.5} />
+                    </div>
+                    <div>
+                      <h3 className='text-foreground text-lg font-semibold'>{category.name}</h3>
+                      <p className='text-muted-foreground text-sm'>{category.subtitle}</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ProductCategory1

package/src/blocks/e-commerce/product-categories/product-category-2.tsx

@@ -0,0 +1,100 @@
+import { Card } from '../../../ui/card'
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { ArrowRight, ShoppingBag } from 'lucide-react'
+import type { CTA } from '../../../lib/types'
+
+export interface ProductCategory2Category {
+  id: string
+  handle?: string
+  name: string
+  description: string
+  itemCount: number
+  image: string
+  trending: boolean
+}
+
+export interface ProductCategory2Props {
+  title?: string
+  description?: string
+  categories: ProductCategory2Category[]
+  cta?: CTA
+  onBrowse?: (category: ProductCategory2Category) => void
+}
+
+export function ProductCategory2({
+  title,
+  description,
+  categories,
+  cta,
+  onBrowse,
+}: ProductCategory2Props) {
+  return (
+    <section className='py-12'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {(title || description) && (
+          <div className='mb-12 text-center'>
+            {title ? <h2 className='text-3xl font-bold tracking-tight text-balance'>{title}</h2> : null}
+            {description ? (
+              <p className='text-muted-foreground mt-4 text-lg'>{description}</p>
+            ) : null}
+          </div>
+        )}
+
+        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
+          {categories.map(category => (
+            <Card
+              key={category.id}
+              className='group cursor-pointer overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'
+            >
+              <div className='relative aspect-[5/4] overflow-hidden'>
+                <img
+                  src={category.image || undefined}
+                  alt={category.name}
+                  className='size-full object-cover transition-transform duration-500 group-hover:scale-105'
+                />
+                <div className='absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent' />
+
+                {category.trending ? (
+                  <Badge className='absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold'>
+                    Trending
+                  </Badge>
+                ) : null}
+
+                <div className='absolute right-0 bottom-0 left-0 p-6 text-white'>
+                  <h3 className='mb-1 text-xl font-bold'>{category.name}</h3>
+                  <p className='mb-3 text-sm text-white/90'>{category.description}</p>
+                  <div className='flex items-center justify-between'>
+                    <span className='text-sm'>{category.itemCount.toLocaleString()} items</span>
+                    <Button
+                      size='sm'
+                      variant='secondary'
+                      className='h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30'
+                      onClick={onBrowse ? () => onBrowse(category) : undefined}
+                    >
+                      Browse
+                      <ArrowRight />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {cta ? (
+          <div className='mt-12 text-center'>
+            <Button size='lg' className='h-10 cursor-pointer gap-2 px-4' asChild>
+              <a href={cta.href}>
+                <ShoppingBag className='size-5' />
+                {cta.label}
+              </a>
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+export default ProductCategory2