Files
supabase/apps/ui-library/components/icons.tsx
Ivan Vasilov 33127bb6ab feat: Library (#34294)
* Copy the design-system app into a new one for ui-library.

* Remove unneeded content.

* Add supabase config.

* Cleanup the css.

* Add bunch of packages.

* Cleanup the registry.

* Regenerate the registry.

* Add needed components for documenting components.

* Add the pages for the components.

* Fix the RegistryBlock.

* Various fixes.

* Add a turbo definition for ui-library.

* Rename Remix to React Router.

* Reorder the pages for all frameworks.

* Remove the bottom pager.

* Fix the pages and command menu.

* Various fixes.

* Minor fixes.

* Add ai editor rules.

* Various fixes.

* Add local supabase env vars.

* Try to fix a package error.

* Bunch of various fixes.

* Fix lint errors.
2025-03-20 22:11:07 +01:00

70 lines
2.3 KiB
TypeScript

import { Index } from 'icons/__registry__/index'
import { Copy } from 'lucide-react'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
import { Grid, GridItem } from './grid'
function Icons() {
return (
<>
<Grid>
{Index.map((icon: any, i: number) => (
<DropdownMenu key={i} modal={false}>
<DropdownMenuTrigger asChild>
<GridItem>
<icon.component
strokeWidth={1.5}
size={21}
className="group-data-[state=open]:scale-125 transition-all"
/>
<span className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground">
{icon.name}
</span>
</GridItem>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48">
<DropdownMenuGroup>
<DropdownMenuItem
className="flex items-center gap-2"
onSelect={() => navigator.clipboard.writeText(icon.name)}
>
<Copy size={14} strokeWidth={1} />
Copy name
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onSelect={() => navigator.clipboard.writeText(icon.jsx)}
>
<Copy size={14} strokeWidth={1} />
Copy JSX
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onSelect={() => navigator.clipboard.writeText(icon.import)}
>
<Copy size={14} strokeWidth={1} />
Copy import path
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2"
onSelect={() => navigator.clipboard.writeText(icon.svg)}
>
<Copy size={14} strokeWidth={1} />
Copy SVG
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
))}
</Grid>
</>
)
}
export { Icons }