mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
147 lines
3.5 KiB
TypeScript
147 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { type IconLibraryName } from "shadcn/icons"
|
|
|
|
import { Card, CardContent } from "@/registry/bases/radix/ui/card"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
const PREVIEW_ICONS = [
|
|
{
|
|
lucide: "CopyIcon",
|
|
tabler: "IconCopy",
|
|
hugeicons: "Copy01Icon",
|
|
phosphor: "CopyIcon",
|
|
remixicon: "RiFileCopyLine",
|
|
},
|
|
{
|
|
lucide: "CircleAlertIcon",
|
|
tabler: "IconExclamationCircle",
|
|
hugeicons: "AlertCircleIcon",
|
|
phosphor: "WarningCircleIcon",
|
|
remixicon: "RiErrorWarningLine",
|
|
},
|
|
{
|
|
lucide: "TrashIcon",
|
|
tabler: "IconTrash",
|
|
hugeicons: "Delete02Icon",
|
|
phosphor: "TrashIcon",
|
|
remixicon: "RiDeleteBinLine",
|
|
},
|
|
{
|
|
lucide: "ShareIcon",
|
|
tabler: "IconShare",
|
|
hugeicons: "Share03Icon",
|
|
phosphor: "ShareIcon",
|
|
remixicon: "RiShareLine",
|
|
},
|
|
{
|
|
lucide: "ShoppingBagIcon",
|
|
tabler: "IconShoppingBag",
|
|
hugeicons: "ShoppingBag01Icon",
|
|
phosphor: "BagIcon",
|
|
remixicon: "RiShoppingBagLine",
|
|
},
|
|
{
|
|
lucide: "MoreHorizontalIcon",
|
|
tabler: "IconDots",
|
|
hugeicons: "MoreHorizontalCircle01Icon",
|
|
phosphor: "DotsThreeIcon",
|
|
remixicon: "RiMoreLine",
|
|
},
|
|
{
|
|
lucide: "Loader2Icon",
|
|
tabler: "IconLoader",
|
|
hugeicons: "Loading03Icon",
|
|
phosphor: "SpinnerIcon",
|
|
remixicon: "RiLoaderLine",
|
|
},
|
|
{
|
|
lucide: "PlusIcon",
|
|
tabler: "IconPlus",
|
|
hugeicons: "PlusSignIcon",
|
|
phosphor: "PlusIcon",
|
|
remixicon: "RiAddLine",
|
|
},
|
|
{
|
|
lucide: "MinusIcon",
|
|
tabler: "IconMinus",
|
|
hugeicons: "MinusSignIcon",
|
|
phosphor: "MinusIcon",
|
|
remixicon: "RiSubtractLine",
|
|
},
|
|
{
|
|
lucide: "ArrowLeftIcon",
|
|
tabler: "IconArrowLeft",
|
|
hugeicons: "ArrowLeft02Icon",
|
|
phosphor: "ArrowLeftIcon",
|
|
remixicon: "RiArrowLeftLine",
|
|
},
|
|
{
|
|
lucide: "ArrowRightIcon",
|
|
tabler: "IconArrowRight",
|
|
hugeicons: "ArrowRight02Icon",
|
|
phosphor: "ArrowRightIcon",
|
|
remixicon: "RiArrowRightLine",
|
|
},
|
|
{
|
|
lucide: "CheckIcon",
|
|
tabler: "IconCheck",
|
|
hugeicons: "Tick02Icon",
|
|
phosphor: "CheckIcon",
|
|
remixicon: "RiCheckLine",
|
|
},
|
|
{
|
|
lucide: "ChevronDownIcon",
|
|
tabler: "IconChevronDown",
|
|
hugeicons: "ArrowDown01Icon",
|
|
phosphor: "CaretDownIcon",
|
|
remixicon: "RiArrowDownSLine",
|
|
},
|
|
{
|
|
lucide: "ChevronRightIcon",
|
|
tabler: "IconChevronRight",
|
|
hugeicons: "ArrowRight01Icon",
|
|
phosphor: "CaretRightIcon",
|
|
remixicon: "RiArrowRightSLine",
|
|
},
|
|
{
|
|
lucide: "SearchIcon",
|
|
tabler: "IconSearch",
|
|
hugeicons: "Search01Icon",
|
|
phosphor: "MagnifyingGlassIcon",
|
|
remixicon: "RiSearchLine",
|
|
},
|
|
{
|
|
lucide: "SettingsIcon",
|
|
tabler: "IconSettings",
|
|
hugeicons: "Settings01Icon",
|
|
phosphor: "GearIcon",
|
|
remixicon: "RiSettingsLine",
|
|
},
|
|
] satisfies Record<IconLibraryName, string>[]
|
|
|
|
export function IconPreviewGrid() {
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<div className="grid grid-cols-8 place-items-center gap-4">
|
|
{PREVIEW_ICONS.map((icon, index) => (
|
|
<Card
|
|
key={index}
|
|
className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
|
|
>
|
|
<IconPlaceholder
|
|
lucide={icon.lucide}
|
|
tabler={icon.tabler}
|
|
hugeicons={icon.hugeicons}
|
|
phosphor={icon.phosphor}
|
|
remixicon={icon.remixicon}
|
|
/>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|