15 lines
4.1 KiB
JSON
15 lines
4.1 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "hexagon-background",
|
|
"type": "registry:ui",
|
|
"title": "Hexagon Background",
|
|
"description": "A background component featuring an interactive hexagon grid.",
|
|
"files": [
|
|
{
|
|
"path": "registry/backgrounds/hexagon/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype HexagonBackgroundProps = React.ComponentProps<'div'> & {\n children?: React.ReactNode;\n hexagonProps?: React.ComponentProps<'div'>;\n hexagonSize?: number; // value greater than 50\n hexagonMargin?: number;\n};\n\nfunction HexagonBackground({\n className,\n children,\n hexagonProps,\n hexagonSize = 75,\n hexagonMargin = 3,\n ...props\n}: HexagonBackgroundProps) {\n const hexagonWidth = hexagonSize;\n const hexagonHeight = hexagonSize * 1.1;\n const rowSpacing = hexagonSize * 0.8;\n const baseMarginTop = -36 - 0.275 * (hexagonSize - 100);\n const computedMarginTop = baseMarginTop + hexagonMargin;\n const oddRowMarginLeft = -(hexagonSize / 2);\n const evenRowMarginLeft = hexagonMargin / 2;\n\n const [gridDimensions, setGridDimensions] = React.useState({\n rows: 0,\n columns: 0,\n });\n\n const updateGridDimensions = React.useCallback(() => {\n const rows = Math.ceil(window.innerHeight / rowSpacing);\n const columns = Math.ceil(window.innerWidth / hexagonWidth) + 1;\n setGridDimensions({ rows, columns });\n }, [rowSpacing, hexagonWidth]);\n\n React.useEffect(() => {\n updateGridDimensions();\n window.addEventListener('resize', updateGridDimensions);\n return () => window.removeEventListener('resize', updateGridDimensions);\n }, [updateGridDimensions]);\n\n return (\n <div\n data-slot=\"hexagon-background\"\n className={cn(\n 'relative size-full overflow-hidden dark:bg-neutral-900 bg-neutral-100',\n className,\n )}\n {...props}\n >\n <style>{`:root { --hexagon-margin: ${hexagonMargin}px; }`}</style>\n <div className=\"absolute top-0 -left-0 size-full overflow-hidden\">\n {Array.from({ length: gridDimensions.rows }).map((_, rowIndex) => (\n <div\n key={`row-${rowIndex}`}\n style={{\n marginTop: computedMarginTop,\n marginLeft:\n ((rowIndex + 1) % 2 === 0\n ? evenRowMarginLeft\n : oddRowMarginLeft) - 10,\n }}\n className=\"inline-flex\"\n >\n {Array.from({ length: gridDimensions.columns }).map(\n (_, colIndex) => (\n <div\n key={`hexagon-${rowIndex}-${colIndex}`}\n {...hexagonProps}\n style={{\n width: hexagonWidth,\n height: hexagonHeight,\n marginLeft: hexagonMargin,\n ...hexagonProps?.style,\n }}\n className={cn(\n 'relative',\n '[clip-path:polygon(50%_0%,_100%_25%,_100%_75%,_50%_100%,_0%_75%,_0%_25%)]',\n \"before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full dark:before:bg-neutral-950 before:bg-white before:opacity-100 before:transition-all before:duration-1000\",\n \"after:content-[''] after:absolute after:inset-[var(--hexagon-margin)] dark:after:bg-neutral-950 after:bg-white\",\n 'after:[clip-path:polygon(50%_0%,_100%_25%,_100%_75%,_50%_100%,_0%_75%,_0%_25%)]',\n 'hover:before:bg-neutral-200 dark:hover:before:bg-neutral-800 hover:before:opacity-100 hover:before:duration-0 dark:hover:after:bg-neutral-900 hover:after:bg-neutral-100 hover:after:opacity-100 hover:after:duration-0',\n hexagonProps?.className,\n )}\n />\n ),\n )}\n </div>\n ))}\n </div>\n {children}\n </div>\n );\n}\n\nexport { HexagonBackground, type HexagonBackgroundProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/backgrounds/hexagon.tsx"
|
|
}
|
|
]
|
|
} |