repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
Projectflow
stars
latest
clone command
git clone gitlawb://did:key:z6Mkfh4Y...QBEi/projectflowgit clone gitlawb://did:key:z6Mkfh4Y.../projectflowb3cded1async from playground1d ago| #1 | import type { ReactNode } from "react"; |
| #2 | import clsx from "clsx"; |
| #3 | |
| #4 | export function Dropdown({ |
| #5 | trigger, |
| #6 | children, |
| #7 | align = "left", |
| #8 | }: { |
| #9 | trigger: ReactNode; |
| #10 | children: ReactNode; |
| #11 | align?: "left" | "right"; |
| #12 | }) { |
| #13 | return ( |
| #14 | <div className="relative group"> |
| #15 | {trigger} |
| #16 | <div |
| #17 | className={clsx( |
| #18 | "absolute top-full mt-1 z-40 min-w-[180px] rounded-lg border border-border bg-surface-2 shadow-xl shadow-black/30 py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-100", |
| #19 | align === "right" ? "right-0" : "left-0" |
| #20 | )} |
| #21 | > |
| #22 | {children} |
| #23 | </div> |
| #24 | </div> |
| #25 | ); |
| #26 | } |
| #27 | |
| #28 | export function DropdownItem({ |
| #29 | onClick, |
| #30 | children, |
| #31 | danger, |
| #32 | }: { |
| #33 | onClick: () => void; |
| #34 | children: ReactNode; |
| #35 | danger?: boolean; |
| #36 | }) { |
| #37 | return ( |
| #38 | <button |
| #39 | onClick={onClick} |
| #40 | className={clsx( |
| #41 | "w-full text-left px-3 py-2 text-sm transition-colors flex items-center gap-2", |
| #42 | danger |
| #43 | ? "text-red-400 hover:bg-red-500/10" |
| #44 | : "text-zinc-300 hover:bg-surface-3 hover:text-zinc-100" |
| #45 | )} |
| #46 | > |
| #47 | {children} |
| #48 | </button> |
| #49 | ); |
| #50 | } |
| #51 |