mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
Refactor snippet files to load data from JSON
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
1
src/data/seed-snippets.json
Normal file
1
src/data/seed-snippets.json
Normal file
@@ -0,0 +1 @@
|
||||
[]
|
||||
1
src/data/seed-templates.json
Normal file
1
src/data/seed-templates.json
Normal file
@@ -0,0 +1 @@
|
||||
[]
|
||||
15
src/data/snippets/atoms.json
Normal file
15
src/data/snippets/atoms.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"buttonDefault": "interface ButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction DefaultButton({ children = \"Default\", onClick }: ButtonProps) {\n return <Button onClick={onClick}>{children}</Button>\n}",
|
||||
"buttonSecondary": "interface ButtonProps {\n children?: string\n variant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\" | \"ghost\" | \"link\"\n onClick?: () => void\n}\n\nfunction CustomButton({ children = \"Secondary\", variant = \"secondary\", onClick }: ButtonProps) {\n return <Button variant={variant} onClick={onClick}>{children}</Button>\n}",
|
||||
"buttonDestructive": "interface DestructiveButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction DestructiveButton({ children = \"Destructive\", onClick }: DestructiveButtonProps) {\n return <Button variant=\"destructive\" onClick={onClick}>{children}</Button>\n}",
|
||||
"buttonOutline": "interface OutlineButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction OutlineButton({ children = \"Outline\", onClick }: OutlineButtonProps) {\n return <Button variant=\"outline\" onClick={onClick}>{children}</Button>\n}",
|
||||
"buttonGhost": "interface GhostButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction GhostButton({ children = \"Ghost\", onClick }: GhostButtonProps) {\n return <Button variant=\"ghost\" onClick={onClick}>{children}</Button>\n}",
|
||||
"buttonLink": "interface LinkButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction LinkButton({ children = \"Link\", onClick }: LinkButtonProps) {\n return <Button variant=\"link\" onClick={onClick}>{children}</Button>\n}",
|
||||
"buttonSizes": "interface ButtonSizesProps {\n smallText?: string\n defaultText?: string\n largeText?: string\n onSmallClick?: () => void\n onDefaultClick?: () => void\n onLargeClick?: () => void\n onIconClick?: () => void\n}\n\nfunction ButtonSizes({ \n smallText = \"Small\", \n defaultText = \"Default\", \n largeText = \"Large\",\n onSmallClick,\n onDefaultClick,\n onLargeClick,\n onIconClick\n}: ButtonSizesProps) {\n return (\n <>\n <Button size=\"sm\" onClick={onSmallClick}>{smallText}</Button>\n <Button size=\"default\" onClick={onDefaultClick}>{defaultText}</Button>\n <Button size=\"lg\" onClick={onLargeClick}>{largeText}</Button>\n <Button size=\"icon\" onClick={onIconClick}>\n <Heart weight=\"fill\" />\n </Button>\n </>\n )\n}",
|
||||
"buttonWithIcons": "interface IconButtonProps {\n primaryText?: string\n secondaryText?: string\n onPrimaryClick?: () => void\n onSecondaryClick?: () => void\n}\n\nfunction IconButtons({ \n primaryText = \"Favorite\", \n secondaryText = \"Add Item\",\n onPrimaryClick,\n onSecondaryClick\n}: IconButtonProps) {\n return (\n <>\n <Button onClick={onPrimaryClick}>\n <Star weight=\"fill\" />\n {primaryText}\n </Button>\n <Button variant=\"outline\" onClick={onSecondaryClick}>\n <Plus weight=\"bold\" />\n {secondaryText}\n </Button>\n </>\n )\n}",
|
||||
"badgeVariants": "interface BadgeVariantsProps {\n defaultText?: string\n secondaryText?: string\n destructiveText?: string\n outlineText?: string\n}\n\nfunction BadgeVariants({ \n defaultText = \"Default\",\n secondaryText = \"Secondary\",\n destructiveText = \"Destructive\",\n outlineText = \"Outline\"\n}: BadgeVariantsProps) {\n return (\n <>\n <Badge>{defaultText}</Badge>\n <Badge variant=\"secondary\">{secondaryText}</Badge>\n <Badge variant=\"destructive\">{destructiveText}</Badge>\n <Badge variant=\"outline\">{outlineText}</Badge>\n </>\n )\n}",
|
||||
"badgeWithIcons": "interface IconBadgeProps {\n completedText?: string\n failedText?: string\n}\n\nfunction IconBadges({ \n completedText = \"Completed\",\n failedText = \"Failed\"\n}: IconBadgeProps) {\n return (\n <>\n <Badge>\n <Check weight=\"bold\" className=\"mr-1\" />\n {completedText}\n </Badge>\n <Badge variant=\"destructive\">\n <X weight=\"bold\" className=\"mr-1\" />\n {failedText}\n </Badge>\n </>\n )\n}",
|
||||
"inputBasic": "interface InputProps {\n placeholder?: string\n value?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction BasicInput({ placeholder = \"Default input\", value, onChange }: InputProps) {\n return <Input placeholder={placeholder} value={value} onChange={onChange} />\n}",
|
||||
"inputWithIcon": "interface SearchInputProps {\n placeholder?: string\n value?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction SearchInput({ placeholder = \"Search...\", value, onChange }: SearchInputProps) {\n return (\n <div className=\"relative\">\n <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n </div>\n )\n}",
|
||||
"inputTypes": "interface TypedInputsProps {\n textPlaceholder?: string\n emailPlaceholder?: string\n passwordPlaceholder?: string\n numberPlaceholder?: string\n onTextChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n onEmailChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n onNumberChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction TypedInputs({ \n textPlaceholder = \"Text input\",\n emailPlaceholder = \"email@example.com\",\n passwordPlaceholder = \"Password\",\n numberPlaceholder = \"123\",\n onTextChange,\n onEmailChange,\n onPasswordChange,\n onNumberChange\n}: TypedInputsProps) {\n return (\n <>\n <Input type=\"text\" placeholder={textPlaceholder} onChange={onTextChange} />\n <Input type=\"email\" placeholder={emailPlaceholder} onChange={onEmailChange} />\n <Input type=\"password\" placeholder={passwordPlaceholder} onChange={onPasswordChange} />\n <Input type=\"number\" placeholder={numberPlaceholder} onChange={onNumberChange} />\n </>\n )\n}"
|
||||
}
|
||||
9
src/data/snippets/molecules.json
Normal file
9
src/data/snippets/molecules.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"formField": "interface FormFieldProps {\n label?: string\n placeholder?: string\n helperText?: string\n id?: string\n value?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction EmailFormField({ \n label = \"Email Address\",\n placeholder = \"john@example.com\",\n helperText = \"We'll never share your email with anyone else.\",\n id = \"email\",\n value,\n onChange\n}: FormFieldProps) {\n return (\n <div className=\"space-y-2\">\n <Label htmlFor={id}>{label}</Label>\n <div className=\"relative\">\n <Envelope className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n <Input id={id} type=\"email\" placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n </div>\n <p className=\"text-sm text-muted-foreground\">\n {helperText}\n </p>\n </div>\n )\n}",
|
||||
"searchBar": "interface SearchBarProps {\n placeholder?: string\n value?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nfunction SearchBar({ placeholder = \"Search...\", value, onChange }: SearchBarProps) {\n return (\n <div className=\"relative\">\n <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n </div>\n )\n}",
|
||||
"searchBarWithButton": "interface SearchBarWithButtonProps {\n placeholder?: string\n buttonText?: string\n value?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n onSearch?: () => void\n}\n\nfunction SearchBarWithButton({ \n placeholder = \"Search...\",\n buttonText = \"Search\",\n value,\n onChange,\n onSearch\n}: SearchBarWithButtonProps) {\n return (\n <div className=\"flex gap-2\">\n <div className=\"relative flex-1\">\n <MagnifyingGlass className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n <Input placeholder={placeholder} className=\"pl-10\" value={value} onChange={onChange} />\n </div>\n <Button onClick={onSearch}>{buttonText}</Button>\n </div>\n )\n}",
|
||||
"userCard": "interface UserCardProps {\n name?: string\n username?: string\n bio?: string\n avatarUrl?: string\n avatarFallback?: string\n buttonText?: string\n onButtonClick?: () => void\n}\n\nfunction UserCard({ \n name = \"Alex Morgan\",\n username = \"@alexmorgan\",\n bio = \"Product designer passionate about creating delightful user experiences.\",\n avatarUrl = \"https://i.pravatar.cc/150?img=1\",\n avatarFallback = \"AM\",\n buttonText = \"Follow\",\n onButtonClick\n}: UserCardProps) {\n return (\n <Card className=\"p-6\">\n <div className=\"flex items-start gap-4\">\n <Avatar className=\"h-12 w-12\">\n <AvatarImage src={avatarUrl} />\n <AvatarFallback>{avatarFallback}</AvatarFallback>\n </Avatar>\n <div className=\"flex-1 min-w-0\">\n <h3 className=\"font-semibold text-lg\">{name}</h3>\n <p className=\"text-sm text-muted-foreground\">{username}</p>\n <p className=\"text-sm mt-2\">\n {bio}\n </p>\n </div>\n <Button size=\"sm\" variant=\"outline\" onClick={onButtonClick}>\n {buttonText}\n </Button>\n </div>\n </Card>\n )\n}",
|
||||
"socialActions": "interface SocialActionsProps {\n likeText?: string\n commentText?: string\n shareText?: string\n onLike?: () => void\n onComment?: () => void\n onShare?: () => void\n}\n\nfunction SocialActions({ \n likeText = \"Like\",\n commentText = \"Comment\",\n shareText = \"Share\",\n onLike,\n onComment,\n onShare\n}: SocialActionsProps) {\n return (\n <div className=\"flex items-center gap-2\">\n <Button variant=\"ghost\" size=\"sm\" onClick={onLike}>\n <Heart className=\"mr-2\" />\n {likeText}\n </Button>\n <Button variant=\"ghost\" size=\"sm\" onClick={onComment}>\n <ChatCircle className=\"mr-2\" />\n {commentText}\n </Button>\n <Button variant=\"ghost\" size=\"sm\" onClick={onShare}>\n <Share className=\"mr-2\" />\n {shareText}\n </Button>\n </div>\n )\n}",
|
||||
"statusIndicator": "interface StatusIndicatorProps {\n statusText?: string\n badgeText?: string\n isActive?: boolean\n}\n\nfunction StatusIndicator({ \n statusText = \"System Online\",\n badgeText = \"Active\",\n isActive = true\n}: StatusIndicatorProps) {\n return (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <div className={cn(\n \"h-3 w-3 rounded-full bg-accent\",\n isActive && \"animate-pulse\"\n )} />\n <span className=\"font-medium\">{statusText}</span>\n </div>\n <Badge>{badgeText}</Badge>\n </div>\n )\n}",
|
||||
"contentCard": "interface ContentCardProps {\n title?: string\n description?: string\n date?: string\n readTime?: string\n tags?: string[]\n}\n\nfunction ContentCard({ \n title = \"Building Scalable Design Systems\",\n description = \"Learn how to create and maintain design systems that grow with your team.\",\n date = \"Mar 15, 2024\",\n readTime = \"5 min read\",\n tags = [\"Design\", \"System\"]\n}: ContentCardProps) {\n return (\n <Card className=\"p-6 hover:shadow-lg transition-shadow\">\n <div className=\"space-y-4\">\n <div className=\"flex items-start justify-between gap-4\">\n <div className=\"space-y-1\">\n <h3 className=\"font-semibold text-lg line-clamp-2\">\n {title}\n </h3>\n <p className=\"text-sm text-muted-foreground\">\n {description}\n </p>\n </div>\n </div>\n <div className=\"flex items-center gap-4 text-sm text-muted-foreground\">\n <div className=\"flex items-center gap-1\">\n <Calendar className=\"h-4 w-4\" />\n <span>{date}</span>\n </div>\n <span>•</span>\n <span>{readTime}</span>\n </div>\n <div className=\"flex gap-2\">\n {tags.map((tag) => (\n <Badge key={tag} variant=\"outline\">{tag}</Badge>\n ))}\n </div>\n </div>\n </Card>\n )\n}"
|
||||
}
|
||||
7
src/data/snippets/organisms.json
Normal file
7
src/data/snippets/organisms.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBar": "interface NavigationBarProps {\n brandName?: string\n navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }>\n avatarUrl?: string\n avatarFallback?: string\n onNotificationClick?: () => void\n onSettingsClick?: () => void\n}\n\nfunction NavigationBar({ \n brandName = \"BrandName\",\n navItems = [\n { label: \"Home\", icon: <House className=\"mr-2\" /> },\n { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" /> },\n { label: \"Projects\", icon: <Folder className=\"mr-2\" /> }\n ],\n avatarUrl = \"https://i.pravatar.cc/150?img=3\",\n avatarFallback = \"U\",\n onNotificationClick,\n onSettingsClick\n}: NavigationBarProps) {\n return (\n <div className=\"border-b border-border bg-card p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-6\">\n <h3 className=\"text-xl font-bold\">{brandName}</h3>\n <nav className=\"hidden md:flex items-center gap-1\">\n {navItems.map((item) => (\n <Button key={item.label} variant=\"ghost\" size=\"sm\" onClick={item.onClick}>\n {item.icon}\n {item.label}\n </Button>\n ))}\n </nav>\n </div>\n <div className=\"flex items-center gap-2\">\n <Button variant=\"ghost\" size=\"icon\" onClick={onNotificationClick}>\n <Bell />\n </Button>\n <Button variant=\"ghost\" size=\"icon\" onClick={onSettingsClick}>\n <Gear />\n </Button>\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={avatarUrl} />\n <AvatarFallback>{avatarFallback}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n </div>\n )\n}",
|
||||
"dataTable": "interface Transaction {\n id: string\n status: string\n statusVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n description: string\n date: string\n amount: string\n isNegative?: boolean\n}\n\ninterface DataTableProps {\n title?: string\n exportButtonText?: string\n transactions?: Transaction[]\n onExport?: () => void\n}\n\nfunction DataTable({ \n title = \"Recent Transactions\",\n exportButtonText = \"Export\",\n transactions = [\n { id: \"1\", status: \"Completed\", description: \"Payment received\", date: \"Mar 15, 2024\", amount: \"$250.00\" }\n ],\n onExport\n}: DataTableProps) {\n return (\n <Card>\n <div className=\"p-4 border-b border-border\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"font-semibold text-lg\">{title}</h3>\n <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n {exportButtonText}\n </Button>\n </div>\n </div>\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Status</TableHead>\n <TableHead>Transaction</TableHead>\n <TableHead>Date</TableHead>\n <TableHead className=\"text-right\">Amount</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {transactions.map((transaction) => (\n <TableRow key={transaction.id}>\n <TableCell>\n <Badge variant={transaction.statusVariant}>{transaction.status}</Badge>\n </TableCell>\n <TableCell className=\"font-medium\">{transaction.description}</TableCell>\n <TableCell>{transaction.date}</TableCell>\n <TableCell className={cn(\n \"text-right\",\n transaction.isNegative && \"text-destructive\"\n )}>{transaction.amount}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </Card>\n )\n}",
|
||||
"form": "interface CreateAccountFormProps {\n title?: string\n description?: string\n firstNameLabel?: string\n lastNameLabel?: string\n emailLabel?: string\n firstNamePlaceholder?: string\n lastNamePlaceholder?: string\n emailPlaceholder?: string\n cancelButtonText?: string\n submitButtonText?: string\n onCancel?: () => void\n onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void\n}\n\nfunction CreateAccountForm({ \n title = \"Create Account\",\n description = \"Fill in your details to get started\",\n firstNameLabel = \"First Name\",\n lastNameLabel = \"Last Name\",\n emailLabel = \"Email\",\n firstNamePlaceholder = \"John\",\n lastNamePlaceholder = \"Doe\",\n emailPlaceholder = \"john@example.com\",\n cancelButtonText = \"Cancel\",\n submitButtonText = \"Create Account\",\n onCancel,\n onSubmit\n}: CreateAccountFormProps) {\n const [firstName, setFirstName] = useState(\"\")\n const [lastName, setLastName] = useState(\"\")\n const [email, setEmail] = useState(\"\")\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault()\n onSubmit?.({ firstName, lastName, email })\n }\n\n return (\n <Card className=\"p-6\">\n <form className=\"space-y-6\" onSubmit={handleSubmit}>\n <div>\n <h3 className=\"text-xl font-semibold mb-4\">{title}</h3>\n <p className=\"text-sm text-muted-foreground\">\n {description}\n </p>\n </div>\n <Separator />\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"firstName\">{firstNameLabel}</Label>\n <Input \n id=\"firstName\" \n placeholder={firstNamePlaceholder}\n value={firstName}\n onChange={(e) => setFirstName(e.target.value)}\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"lastName\">{lastNameLabel}</Label>\n <Input \n id=\"lastName\" \n placeholder={lastNamePlaceholder}\n value={lastName}\n onChange={(e) => setLastName(e.target.value)}\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">{emailLabel}</Label>\n <div className=\"relative\">\n <Envelope className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n <Input \n id=\"email\" \n type=\"email\" \n placeholder={emailPlaceholder} \n className=\"pl-10\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n />\n </div>\n </div>\n <Separator />\n <div className=\"flex items-center justify-between gap-4\">\n <Button variant=\"outline\" type=\"button\" onClick={onCancel}>\n {cancelButtonText}\n </Button>\n <Button type=\"submit\">\n {submitButtonText}\n <ArrowRight className=\"ml-2\" />\n </Button>\n </div>\n </form>\n </Card>\n )\n}",
|
||||
"taskList": "interface Task {\n id: string\n title: string\n description: string\n status: string\n statusColor?: \"accent\" | \"destructive\"\n badgeText: string\n badgeVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n icon: React.ReactNode\n}\n\ninterface TaskListProps {\n title?: string\n addButtonText?: string\n tasks?: Task[]\n onAddTask?: () => void\n}\n\nfunction TaskList({ \n title = \"Project Tasks\",\n addButtonText = \"Add Task\",\n tasks = [\n {\n id: \"1\",\n title: \"Design system documentation\",\n description: \"Complete the component library documentation\",\n status: \"Completed\",\n statusColor: \"accent\" as const,\n badgeText: \"Design\",\n badgeVariant: \"secondary\" as const,\n icon: <CheckCircle weight=\"fill\" className=\"h-6 w-6 text-accent mt-0.5\" />\n }\n ],\n onAddTask\n}: TaskListProps) {\n return (\n <Card>\n <div className=\"p-4 border-b border-border\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"font-semibold text-lg\">{title}</h3>\n <Button size=\"sm\" onClick={onAddTask}>\n <Plus className=\"mr-2\" />\n {addButtonText}\n </Button>\n </div>\n </div>\n <div className=\"divide-y divide-border\">\n {tasks.map((task) => (\n <div key={task.id} className=\"p-4 hover:bg-muted/50 transition-colors\">\n <div className=\"flex items-start gap-4\">\n {task.icon}\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-medium\">{task.title}</h4>\n <p className=\"text-sm text-muted-foreground mt-1\">\n {task.description}\n </p>\n <div className=\"flex items-center gap-4 mt-3\">\n <Badge variant={task.badgeVariant}>{task.badgeText}</Badge>\n <span className=\"text-xs text-muted-foreground\">{task.status}</span>\n </div>\n </div>\n </div>\n </div>\n ))}\n </div>\n </Card>\n )\n}",
|
||||
"sidebarNavigation": "interface SidebarNavItem {\n label: string\n icon: React.ReactNode\n variant?: \"default\" | \"ghost\"\n onClick?: () => void\n}\n\ninterface SidebarNavigationProps {\n title?: string\n navItems?: SidebarNavItem[]\n contentText?: string\n}\n\nfunction SidebarNavigation({ \n title = \"Dashboard\",\n navItems = [\n { label: \"Home\", icon: <House className=\"mr-2\" />, variant: \"ghost\" as const },\n { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" />, variant: \"default\" as const },\n { label: \"Projects\", icon: <Folder className=\"mr-2\" />, variant: \"ghost\" as const }\n ],\n contentText = \"Main content area\"\n}: SidebarNavigationProps) {\n return (\n <div className=\"flex\">\n <aside className=\"w-64 border-r border-border bg-card/50 p-4\">\n <div className=\"space-y-6\">\n <div className=\"flex items-center gap-2 px-2\">\n <div className=\"h-8 w-8 rounded-lg bg-accent\" />\n <span className=\"font-bold\">{title}</span>\n </div>\n <nav className=\"space-y-1\">\n {navItems.map((item) => (\n <Button \n key={item.label}\n variant={item.variant || \"ghost\"} \n className=\"w-full justify-start\"\n onClick={item.onClick}\n >\n {item.icon}\n {item.label}\n </Button>\n ))}\n </nav>\n </div>\n </aside>\n <div className=\"flex-1 p-6\">\n <p className=\"text-sm text-muted-foreground\">\n {contentText}\n </p>\n </div>\n </div>\n )\n}"
|
||||
}
|
||||
6
src/data/snippets/templates.json
Normal file
6
src/data/snippets/templates.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"dashboardLayout": "interface StatCard {\n label: string\n value: string\n trend?: string\n}\n\ninterface DashboardLayoutProps {\n title?: string\n navItems?: Array<{ label: string; icon: React.ReactNode; variant?: \"default\" | \"ghost\" }>\n avatarUrl?: string\n avatarFallback?: string\n stats?: StatCard[]\n onNotificationClick?: () => void\n}\n\nfunction DashboardLayout({ \n title = \"Dashboard\",\n navItems = [\n { label: \"Overview\", icon: <House className=\"mr-2\" />, variant: \"default\" as const },\n { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" />, variant: \"ghost\" as const }\n ],\n avatarUrl,\n avatarFallback = \"U\",\n stats = [\n { label: \"Total Revenue\", value: \"$45,231\", trend: \"+20.1% from last month\" }\n ],\n onNotificationClick\n}: DashboardLayoutProps) {\n return (\n <div className=\"min-h-screen bg-background\">\n <div className=\"border-b border-border bg-card p-4\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-xl font-bold\">{title}</h3>\n <div className=\"flex items-center gap-2\">\n <Button variant=\"ghost\" size=\"icon\" onClick={onNotificationClick}>\n <Bell />\n </Button>\n <Avatar className=\"h-8 w-8\">\n {avatarUrl && <AvatarImage src={avatarUrl} />}\n <AvatarFallback>{avatarFallback}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n </div>\n <div className=\"flex\">\n <aside className=\"w-64 border-r border-border bg-card/30 p-4\">\n <nav className=\"space-y-1\">\n {navItems.map((item) => (\n <Button \n key={item.label}\n variant={item.variant || \"ghost\"} \n className=\"w-full justify-start\"\n >\n {item.icon}\n {item.label}\n </Button>\n ))}\n </nav>\n </aside>\n <main className=\"flex-1 p-6\">\n <h1 className=\"text-3xl font-bold\">Overview</h1>\n <div className=\"grid grid-cols-3 gap-6 mt-6\">\n {stats.map((stat) => (\n <Card key={stat.label} className=\"p-6\">\n <p className=\"text-sm text-muted-foreground\">{stat.label}</p>\n <p className=\"text-3xl font-bold mt-2\">{stat.value}</p>\n {stat.trend && (\n <p className=\"text-sm text-accent mt-2\">{stat.trend}</p>\n )}\n </Card>\n ))}\n </div>\n </main>\n </div>\n </div>\n )\n}",
|
||||
"landingPage": "interface LandingPageProps {\n brandName?: string\n navItems?: string[]\n badge?: string\n headline?: string\n description?: string\n primaryCta?: string\n secondaryCta?: string\n onPrimaryCta?: () => void\n onSecondaryCta?: () => void\n}\n\nfunction LandingPage({ \n brandName = \"ProductName\",\n navItems = [\"Features\", \"Sign Up\"],\n badge = \"New Release\",\n headline = \"Build Amazing Products Faster\",\n description = \"The complete toolkit for modern product development.\",\n primaryCta = \"Get Started\",\n secondaryCta,\n onPrimaryCta,\n onSecondaryCta\n}: LandingPageProps) {\n return (\n <div className=\"min-h-screen\">\n <div className=\"border-b border-border bg-card p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <div className=\"h-8 w-8 rounded-lg bg-accent\" />\n <h3 className=\"text-xl font-bold\">{brandName}</h3>\n </div>\n <div className=\"flex items-center gap-2\">\n {navItems.map((item) => (\n <Button key={item} variant=\"ghost\" size=\"sm\">{item}</Button>\n ))}\n </div>\n </div>\n </div>\n <div className=\"p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20\">\n <Badge className=\"mb-4\">{badge}</Badge>\n <h1 className=\"text-5xl font-bold mb-6\">\n {headline}\n </h1>\n <p className=\"text-xl text-muted-foreground mb-8 max-w-2xl mx-auto\">\n {description}\n </p>\n <div className=\"flex items-center justify-center gap-4\">\n <Button size=\"lg\" onClick={onPrimaryCta}>\n {primaryCta}\n <ArrowRight className=\"ml-2\" />\n </Button>\n {secondaryCta && (\n <Button size=\"lg\" variant=\"outline\" onClick={onSecondaryCta}>\n {secondaryCta}\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}",
|
||||
"ecommercePage": "interface EcommercePageProps {\n storeName?: string\n productBadge?: string\n productName?: string\n productPrice?: string\n originalPrice?: string\n onAddToCart?: () => void\n}\n\nfunction EcommercePage({ \n storeName = \"Store\",\n productBadge = \"New Arrival\",\n productName = \"Premium Product\",\n productPrice = \"$299.00\",\n originalPrice,\n onAddToCart\n}: EcommercePageProps) {\n return (\n <div className=\"min-h-screen\">\n <div className=\"border-b border-border bg-card p-4\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-xl font-bold\">{storeName}</h3>\n <Button variant=\"ghost\" size=\"icon\">\n <ShoppingCart />\n </Button>\n </div>\n </div>\n <div className=\"p-8\">\n <div className=\"grid grid-cols-2 gap-12\">\n <div className=\"aspect-square rounded-lg bg-gradient-to-br from-primary to-accent\" />\n <div className=\"space-y-6\">\n <Badge>{productBadge}</Badge>\n <h1 className=\"text-4xl font-bold\">{productName}</h1>\n <div className=\"flex items-baseline gap-3\">\n <span className=\"text-3xl font-bold\">{productPrice}</span>\n {originalPrice && (\n <span className=\"text-lg text-muted-foreground line-through\">\n {originalPrice}\n </span>\n )}\n </div>\n <Button size=\"lg\" className=\"w-full\" onClick={onAddToCart}>\n <ShoppingCart className=\"mr-2\" />\n Add to Cart\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}",
|
||||
"blogArticle": "interface BlogArticleProps {\n blogName?: string\n tags?: string[]\n title?: string\n authorName?: string\n authorAvatar?: string\n authorFallback?: string\n date?: string\n readTime?: string\n excerpt?: string\n}\n\nfunction BlogArticle({ \n blogName = \"Blog\",\n tags = [\"Design\", \"Tutorial\"],\n title = \"Building a Comprehensive Component Library\",\n authorName = \"Alex Writer\",\n authorAvatar,\n authorFallback = \"AW\",\n date = \"March 15, 2024\",\n readTime = \"10 min read\",\n excerpt = \"Design systems have become an essential part of modern product development.\"\n}: BlogArticleProps) {\n return (\n <div className=\"min-h-screen\">\n <div className=\"border-b border-border bg-card p-4\">\n <h3 className=\"text-xl font-bold\">{blogName}</h3>\n </div>\n <div className=\"p-8\">\n <div className=\"max-w-4xl mx-auto space-y-6\">\n <div className=\"flex gap-2\">\n {tags.map((tag, idx) => (\n <Badge key={tag} variant={idx === 0 ? \"default\" : \"secondary\"}>\n {tag}\n </Badge>\n ))}\n </div>\n <h1 className=\"text-5xl font-bold\">\n {title}\n </h1>\n <div className=\"flex items-center gap-4\">\n <Avatar className=\"h-12 w-12\">\n {authorAvatar && <AvatarImage src={authorAvatar} />}\n <AvatarFallback>{authorFallback}</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"font-medium\">{authorName}</p>\n <p className=\"text-sm text-muted-foreground\">\n {date} · {readTime}\n </p>\n </div>\n </div>\n <div className=\"aspect-video rounded-lg bg-gradient-to-br from-primary to-accent\" />\n <p className=\"text-lg text-muted-foreground leading-relaxed\">\n {excerpt}\n </p>\n </div>\n </div>\n </div>\n )\n}"
|
||||
}
|
||||
@@ -1,209 +1,9 @@
|
||||
/**
|
||||
* Atoms - Basic UI building blocks code snippets
|
||||
* Data loaded from JSON for better maintainability
|
||||
*/
|
||||
|
||||
export const atomsCodeSnippets = {
|
||||
buttonDefault: `interface ButtonProps {
|
||||
children?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
import atomsData from '@/data/snippets/atoms.json'
|
||||
|
||||
function DefaultButton({ children = "Default", onClick }: ButtonProps) {
|
||||
return <Button onClick={onClick}>{children}</Button>
|
||||
}`,
|
||||
buttonSecondary: `interface ButtonProps {
|
||||
children?: string
|
||||
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
function CustomButton({ children = "Secondary", variant = "secondary", onClick }: ButtonProps) {
|
||||
return <Button variant={variant} onClick={onClick}>{children}</Button>
|
||||
}`,
|
||||
buttonDestructive: `interface DestructiveButtonProps {
|
||||
children?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
function DestructiveButton({ children = "Destructive", onClick }: DestructiveButtonProps) {
|
||||
return <Button variant="destructive" onClick={onClick}>{children}</Button>
|
||||
}`,
|
||||
buttonOutline: `interface OutlineButtonProps {
|
||||
children?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
function OutlineButton({ children = "Outline", onClick }: OutlineButtonProps) {
|
||||
return <Button variant="outline" onClick={onClick}>{children}</Button>
|
||||
}`,
|
||||
buttonGhost: `interface GhostButtonProps {
|
||||
children?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
function GhostButton({ children = "Ghost", onClick }: GhostButtonProps) {
|
||||
return <Button variant="ghost" onClick={onClick}>{children}</Button>
|
||||
}`,
|
||||
buttonLink: `interface LinkButtonProps {
|
||||
children?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
function LinkButton({ children = "Link", onClick }: LinkButtonProps) {
|
||||
return <Button variant="link" onClick={onClick}>{children}</Button>
|
||||
}`,
|
||||
buttonSizes: `interface ButtonSizesProps {
|
||||
smallText?: string
|
||||
defaultText?: string
|
||||
largeText?: string
|
||||
onSmallClick?: () => void
|
||||
onDefaultClick?: () => void
|
||||
onLargeClick?: () => void
|
||||
onIconClick?: () => void
|
||||
}
|
||||
|
||||
function ButtonSizes({
|
||||
smallText = "Small",
|
||||
defaultText = "Default",
|
||||
largeText = "Large",
|
||||
onSmallClick,
|
||||
onDefaultClick,
|
||||
onLargeClick,
|
||||
onIconClick
|
||||
}: ButtonSizesProps) {
|
||||
return (
|
||||
<>
|
||||
<Button size="sm" onClick={onSmallClick}>{smallText}</Button>
|
||||
<Button size="default" onClick={onDefaultClick}>{defaultText}</Button>
|
||||
<Button size="lg" onClick={onLargeClick}>{largeText}</Button>
|
||||
<Button size="icon" onClick={onIconClick}>
|
||||
<Heart weight="fill" />
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}`,
|
||||
buttonWithIcons: `interface IconButtonProps {
|
||||
primaryText?: string
|
||||
secondaryText?: string
|
||||
onPrimaryClick?: () => void
|
||||
onSecondaryClick?: () => void
|
||||
}
|
||||
|
||||
function IconButtons({
|
||||
primaryText = "Favorite",
|
||||
secondaryText = "Add Item",
|
||||
onPrimaryClick,
|
||||
onSecondaryClick
|
||||
}: IconButtonProps) {
|
||||
return (
|
||||
<>
|
||||
<Button onClick={onPrimaryClick}>
|
||||
<Star weight="fill" />
|
||||
{primaryText}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={onSecondaryClick}>
|
||||
<Plus weight="bold" />
|
||||
{secondaryText}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}`,
|
||||
badgeVariants: `interface BadgeVariantsProps {
|
||||
defaultText?: string
|
||||
secondaryText?: string
|
||||
destructiveText?: string
|
||||
outlineText?: string
|
||||
}
|
||||
|
||||
function BadgeVariants({
|
||||
defaultText = "Default",
|
||||
secondaryText = "Secondary",
|
||||
destructiveText = "Destructive",
|
||||
outlineText = "Outline"
|
||||
}: BadgeVariantsProps) {
|
||||
return (
|
||||
<>
|
||||
<Badge>{defaultText}</Badge>
|
||||
<Badge variant="secondary">{secondaryText}</Badge>
|
||||
<Badge variant="destructive">{destructiveText}</Badge>
|
||||
<Badge variant="outline">{outlineText}</Badge>
|
||||
</>
|
||||
)
|
||||
}`,
|
||||
badgeWithIcons: `interface IconBadgeProps {
|
||||
completedText?: string
|
||||
failedText?: string
|
||||
}
|
||||
|
||||
function IconBadges({
|
||||
completedText = "Completed",
|
||||
failedText = "Failed"
|
||||
}: IconBadgeProps) {
|
||||
return (
|
||||
<>
|
||||
<Badge>
|
||||
<Check weight="bold" className="mr-1" />
|
||||
{completedText}
|
||||
</Badge>
|
||||
<Badge variant="destructive">
|
||||
<X weight="bold" className="mr-1" />
|
||||
{failedText}
|
||||
</Badge>
|
||||
</>
|
||||
)
|
||||
}`,
|
||||
inputBasic: `interface InputProps {
|
||||
placeholder?: string
|
||||
value?: string
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
|
||||
function BasicInput({ placeholder = "Default input", value, onChange }: InputProps) {
|
||||
return <Input placeholder={placeholder} value={value} onChange={onChange} />
|
||||
}`,
|
||||
inputWithIcon: `interface SearchInputProps {
|
||||
placeholder?: string
|
||||
value?: string
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
|
||||
function SearchInput({ placeholder = "Search...", value, onChange }: SearchInputProps) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
inputTypes: `interface TypedInputsProps {
|
||||
textPlaceholder?: string
|
||||
emailPlaceholder?: string
|
||||
passwordPlaceholder?: string
|
||||
numberPlaceholder?: string
|
||||
onTextChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
onEmailChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
onNumberChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
|
||||
function TypedInputs({
|
||||
textPlaceholder = "Text input",
|
||||
emailPlaceholder = "email@example.com",
|
||||
passwordPlaceholder = "Password",
|
||||
numberPlaceholder = "123",
|
||||
onTextChange,
|
||||
onEmailChange,
|
||||
onPasswordChange,
|
||||
onNumberChange
|
||||
}: TypedInputsProps) {
|
||||
return (
|
||||
<>
|
||||
<Input type="text" placeholder={textPlaceholder} onChange={onTextChange} />
|
||||
<Input type="email" placeholder={emailPlaceholder} onChange={onEmailChange} />
|
||||
<Input type="password" placeholder={passwordPlaceholder} onChange={onPasswordChange} />
|
||||
<Input type="number" placeholder={numberPlaceholder} onChange={onNumberChange} />
|
||||
</>
|
||||
)
|
||||
}`,
|
||||
}
|
||||
export const atomsCodeSnippets: Record<string, string> = atomsData
|
||||
|
||||
|
||||
@@ -1,219 +1,8 @@
|
||||
/**
|
||||
* Molecules - Composite UI components code snippets
|
||||
* Data loaded from JSON for better maintainability
|
||||
*/
|
||||
|
||||
export const moleculesCodeSnippets = {
|
||||
formField: `interface FormFieldProps {
|
||||
label?: string
|
||||
placeholder?: string
|
||||
helperText?: string
|
||||
id?: string
|
||||
value?: string
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
|
||||
function EmailFormField({
|
||||
label = "Email Address",
|
||||
placeholder = "john@example.com",
|
||||
helperText = "We'll never share your email with anyone else.",
|
||||
id = "email",
|
||||
value,
|
||||
onChange
|
||||
}: FormFieldProps) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
<div className="relative">
|
||||
<Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input id={id} type="email" placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{helperText}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
searchBar: `interface SearchBarProps {
|
||||
placeholder?: string
|
||||
value?: string
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
|
||||
function SearchBar({ placeholder = "Search...", value, onChange }: SearchBarProps) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
searchBarWithButton: `interface SearchBarWithButtonProps {
|
||||
placeholder?: string
|
||||
buttonText?: string
|
||||
value?: string
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
onSearch?: () => void
|
||||
}
|
||||
|
||||
function SearchBarWithButton({
|
||||
placeholder = "Search...",
|
||||
buttonText = "Search",
|
||||
value,
|
||||
onChange,
|
||||
onSearch
|
||||
}: SearchBarWithButtonProps) {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input placeholder={placeholder} className="pl-10" value={value} onChange={onChange} />
|
||||
</div>
|
||||
<Button onClick={onSearch}>{buttonText}</Button>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
userCard: `interface UserCardProps {
|
||||
name?: string
|
||||
username?: string
|
||||
bio?: string
|
||||
avatarUrl?: string
|
||||
avatarFallback?: string
|
||||
buttonText?: string
|
||||
onButtonClick?: () => void
|
||||
}
|
||||
|
||||
function UserCard({
|
||||
name = "Alex Morgan",
|
||||
username = "@alexmorgan",
|
||||
bio = "Product designer passionate about creating delightful user experiences.",
|
||||
avatarUrl = "https://i.pravatar.cc/150?img=1",
|
||||
avatarFallback = "AM",
|
||||
buttonText = "Follow",
|
||||
onButtonClick
|
||||
}: UserCardProps) {
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<Avatar className="h-12 w-12">
|
||||
<AvatarImage src={avatarUrl} />
|
||||
<AvatarFallback>{avatarFallback}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-lg">{name}</h3>
|
||||
<p className="text-sm text-muted-foreground">{username}</p>
|
||||
<p className="text-sm mt-2">
|
||||
{bio}
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={onButtonClick}>
|
||||
{buttonText}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}`,
|
||||
socialActions: `interface SocialActionsProps {
|
||||
likeText?: string
|
||||
commentText?: string
|
||||
shareText?: string
|
||||
onLike?: () => void
|
||||
onComment?: () => void
|
||||
onShare?: () => void
|
||||
}
|
||||
|
||||
function SocialActions({
|
||||
likeText = "Like",
|
||||
commentText = "Comment",
|
||||
shareText = "Share",
|
||||
onLike,
|
||||
onComment,
|
||||
onShare
|
||||
}: SocialActionsProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" onClick={onLike}>
|
||||
<Heart className="mr-2" />
|
||||
{likeText}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={onComment}>
|
||||
<ChatCircle className="mr-2" />
|
||||
{commentText}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={onShare}>
|
||||
<Share className="mr-2" />
|
||||
{shareText}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
statusIndicator: `interface StatusIndicatorProps {
|
||||
statusText?: string
|
||||
badgeText?: string
|
||||
isActive?: boolean
|
||||
}
|
||||
|
||||
function StatusIndicator({
|
||||
statusText = "System Online",
|
||||
badgeText = "Active",
|
||||
isActive = true
|
||||
}: StatusIndicatorProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn(
|
||||
"h-3 w-3 rounded-full bg-accent",
|
||||
isActive && "animate-pulse"
|
||||
)} />
|
||||
<span className="font-medium">{statusText}</span>
|
||||
</div>
|
||||
<Badge>{badgeText}</Badge>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
contentCard: `interface ContentCardProps {
|
||||
title?: string
|
||||
description?: string
|
||||
date?: string
|
||||
readTime?: string
|
||||
tags?: string[]
|
||||
}
|
||||
|
||||
function ContentCard({
|
||||
title = "Building Scalable Design Systems",
|
||||
description = "Learn how to create and maintain design systems that grow with your team.",
|
||||
date = "Mar 15, 2024",
|
||||
readTime = "5 min read",
|
||||
tags = ["Design", "System"]
|
||||
}: ContentCardProps) {
|
||||
return (
|
||||
<Card className="p-6 hover:shadow-lg transition-shadow">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold text-lg line-clamp-2">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>{date}</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<span>{readTime}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{tags.map((tag) => (
|
||||
<Badge key={tag} variant="outline">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}`,
|
||||
}
|
||||
import moleculesData from '@/data/snippets/molecules.json'
|
||||
|
||||
export const moleculesCodeSnippets: Record<string, string> = moleculesData
|
||||
|
||||
@@ -1,338 +1,8 @@
|
||||
/**
|
||||
* Organisms - Complex UI patterns code snippets
|
||||
* Data loaded from JSON for better maintainability
|
||||
*/
|
||||
|
||||
export const organismsCodeSnippets = {
|
||||
navigationBar: `interface NavigationBarProps {
|
||||
brandName?: string
|
||||
navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }>
|
||||
avatarUrl?: string
|
||||
avatarFallback?: string
|
||||
onNotificationClick?: () => void
|
||||
onSettingsClick?: () => void
|
||||
}
|
||||
|
||||
function NavigationBar({
|
||||
brandName = "BrandName",
|
||||
navItems = [
|
||||
{ label: "Home", icon: <House className="mr-2" /> },
|
||||
{ label: "Analytics", icon: <ChartBar className="mr-2" /> },
|
||||
{ label: "Projects", icon: <Folder className="mr-2" /> }
|
||||
],
|
||||
avatarUrl = "https://i.pravatar.cc/150?img=3",
|
||||
avatarFallback = "U",
|
||||
onNotificationClick,
|
||||
onSettingsClick
|
||||
}: NavigationBarProps) {
|
||||
return (
|
||||
<div className="border-b border-border bg-card p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-6">
|
||||
<h3 className="text-xl font-bold">{brandName}</h3>
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{navItems.map((item) => (
|
||||
<Button key={item.label} variant="ghost" size="sm" onClick={item.onClick}>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
</Button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" onClick={onNotificationClick}>
|
||||
<Bell />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={onSettingsClick}>
|
||||
<Gear />
|
||||
</Button>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={avatarUrl} />
|
||||
<AvatarFallback>{avatarFallback}</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
dataTable: `interface Transaction {
|
||||
id: string
|
||||
status: string
|
||||
statusVariant?: "default" | "secondary" | "destructive" | "outline"
|
||||
description: string
|
||||
date: string
|
||||
amount: string
|
||||
isNegative?: boolean
|
||||
}
|
||||
|
||||
interface DataTableProps {
|
||||
title?: string
|
||||
exportButtonText?: string
|
||||
transactions?: Transaction[]
|
||||
onExport?: () => void
|
||||
}
|
||||
|
||||
function DataTable({
|
||||
title = "Recent Transactions",
|
||||
exportButtonText = "Export",
|
||||
transactions = [
|
||||
{ id: "1", status: "Completed", description: "Payment received", date: "Mar 15, 2024", amount: "$250.00" }
|
||||
],
|
||||
onExport
|
||||
}: DataTableProps) {
|
||||
return (
|
||||
<Card>
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-lg">{title}</h3>
|
||||
<Button variant="outline" size="sm" onClick={onExport}>
|
||||
{exportButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Transaction</TableHead>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead className="text-right">Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{transactions.map((transaction) => (
|
||||
<TableRow key={transaction.id}>
|
||||
<TableCell>
|
||||
<Badge variant={transaction.statusVariant}>{transaction.status}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{transaction.description}</TableCell>
|
||||
<TableCell>{transaction.date}</TableCell>
|
||||
<TableCell className={cn(
|
||||
"text-right",
|
||||
transaction.isNegative && "text-destructive"
|
||||
)}>{transaction.amount}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
)
|
||||
}`,
|
||||
form: `interface CreateAccountFormProps {
|
||||
title?: string
|
||||
description?: string
|
||||
firstNameLabel?: string
|
||||
lastNameLabel?: string
|
||||
emailLabel?: string
|
||||
firstNamePlaceholder?: string
|
||||
lastNamePlaceholder?: string
|
||||
emailPlaceholder?: string
|
||||
cancelButtonText?: string
|
||||
submitButtonText?: string
|
||||
onCancel?: () => void
|
||||
onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void
|
||||
}
|
||||
|
||||
function CreateAccountForm({
|
||||
title = "Create Account",
|
||||
description = "Fill in your details to get started",
|
||||
firstNameLabel = "First Name",
|
||||
lastNameLabel = "Last Name",
|
||||
emailLabel = "Email",
|
||||
firstNamePlaceholder = "John",
|
||||
lastNamePlaceholder = "Doe",
|
||||
emailPlaceholder = "john@example.com",
|
||||
cancelButtonText = "Cancel",
|
||||
submitButtonText = "Create Account",
|
||||
onCancel,
|
||||
onSubmit
|
||||
}: CreateAccountFormProps) {
|
||||
const [firstName, setFirstName] = useState("")
|
||||
const [lastName, setLastName] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
onSubmit?.({ firstName, lastName, email })
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-4">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="firstName">{firstNameLabel}</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
placeholder={firstNamePlaceholder}
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="lastName">{lastNameLabel}</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
placeholder={lastNamePlaceholder}
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">{emailLabel}</Label>
|
||||
<div className="relative">
|
||||
<Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder={emailPlaceholder}
|
||||
className="pl-10"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<Button variant="outline" type="button" onClick={onCancel}>
|
||||
{cancelButtonText}
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
{submitButtonText}
|
||||
<ArrowRight className="ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}`,
|
||||
taskList: `interface Task {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
status: string
|
||||
statusColor?: "accent" | "destructive"
|
||||
badgeText: string
|
||||
badgeVariant?: "default" | "secondary" | "destructive" | "outline"
|
||||
icon: React.ReactNode
|
||||
}
|
||||
|
||||
interface TaskListProps {
|
||||
title?: string
|
||||
addButtonText?: string
|
||||
tasks?: Task[]
|
||||
onAddTask?: () => void
|
||||
}
|
||||
|
||||
function TaskList({
|
||||
title = "Project Tasks",
|
||||
addButtonText = "Add Task",
|
||||
tasks = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Design system documentation",
|
||||
description: "Complete the component library documentation",
|
||||
status: "Completed",
|
||||
statusColor: "accent" as const,
|
||||
badgeText: "Design",
|
||||
badgeVariant: "secondary" as const,
|
||||
icon: <CheckCircle weight="fill" className="h-6 w-6 text-accent mt-0.5" />
|
||||
}
|
||||
],
|
||||
onAddTask
|
||||
}: TaskListProps) {
|
||||
return (
|
||||
<Card>
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-lg">{title}</h3>
|
||||
<Button size="sm" onClick={onAddTask}>
|
||||
<Plus className="mr-2" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-border">
|
||||
{tasks.map((task) => (
|
||||
<div key={task.id} className="p-4 hover:bg-muted/50 transition-colors">
|
||||
<div className="flex items-start gap-4">
|
||||
{task.icon}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium">{task.title}</h4>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{task.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-3">
|
||||
<Badge variant={task.badgeVariant}>{task.badgeText}</Badge>
|
||||
<span className="text-xs text-muted-foreground">{task.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}`,
|
||||
sidebarNavigation: `interface SidebarNavItem {
|
||||
label: string
|
||||
icon: React.ReactNode
|
||||
variant?: "default" | "ghost"
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
interface SidebarNavigationProps {
|
||||
title?: string
|
||||
navItems?: SidebarNavItem[]
|
||||
contentText?: string
|
||||
}
|
||||
|
||||
function SidebarNavigation({
|
||||
title = "Dashboard",
|
||||
navItems = [
|
||||
{ label: "Home", icon: <House className="mr-2" />, variant: "ghost" as const },
|
||||
{ label: "Analytics", icon: <ChartBar className="mr-2" />, variant: "default" as const },
|
||||
{ label: "Projects", icon: <Folder className="mr-2" />, variant: "ghost" as const }
|
||||
],
|
||||
contentText = "Main content area"
|
||||
}: SidebarNavigationProps) {
|
||||
return (
|
||||
<div className="flex">
|
||||
<aside className="w-64 border-r border-border bg-card/50 p-4">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2 px-2">
|
||||
<div className="h-8 w-8 rounded-lg bg-accent" />
|
||||
<span className="font-bold">{title}</span>
|
||||
</div>
|
||||
<nav className="space-y-1">
|
||||
{navItems.map((item) => (
|
||||
<Button
|
||||
key={item.label}
|
||||
variant={item.variant || "ghost"}
|
||||
className="w-full justify-start"
|
||||
onClick={item.onClick}
|
||||
>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
</Button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
<div className="flex-1 p-6">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{contentText}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
}
|
||||
import organismsData from '@/data/snippets/organisms.json'
|
||||
|
||||
export const organismsCodeSnippets: Record<string, string> = organismsData
|
||||
|
||||
@@ -1,256 +1,8 @@
|
||||
/**
|
||||
* Templates - Complete page layouts code snippets
|
||||
* Data loaded from JSON for better maintainability
|
||||
*/
|
||||
|
||||
export const templatesCodeSnippets = {
|
||||
dashboardLayout: `interface StatCard {
|
||||
label: string
|
||||
value: string
|
||||
trend?: string
|
||||
}
|
||||
import templatesData from '@/data/snippets/templates.json'
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
title?: string
|
||||
navItems?: Array<{ label: string; icon: React.ReactNode; variant?: "default" | "ghost" }>
|
||||
avatarUrl?: string
|
||||
avatarFallback?: string
|
||||
stats?: StatCard[]
|
||||
onNotificationClick?: () => void
|
||||
}
|
||||
|
||||
function DashboardLayout({
|
||||
title = "Dashboard",
|
||||
navItems = [
|
||||
{ label: "Overview", icon: <House className="mr-2" />, variant: "default" as const },
|
||||
{ label: "Analytics", icon: <ChartBar className="mr-2" />, variant: "ghost" as const }
|
||||
],
|
||||
avatarUrl,
|
||||
avatarFallback = "U",
|
||||
stats = [
|
||||
{ label: "Total Revenue", value: "$45,231", trend: "+20.1% from last month" }
|
||||
],
|
||||
onNotificationClick
|
||||
}: DashboardLayoutProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="border-b border-border bg-card p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xl font-bold">{title}</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" onClick={onNotificationClick}>
|
||||
<Bell />
|
||||
</Button>
|
||||
<Avatar className="h-8 w-8">
|
||||
{avatarUrl && <AvatarImage src={avatarUrl} />}
|
||||
<AvatarFallback>{avatarFallback}</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<aside className="w-64 border-r border-border bg-card/30 p-4">
|
||||
<nav className="space-y-1">
|
||||
{navItems.map((item) => (
|
||||
<Button
|
||||
key={item.label}
|
||||
variant={item.variant || "ghost"}
|
||||
className="w-full justify-start"
|
||||
>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
</Button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
<main className="flex-1 p-6">
|
||||
<h1 className="text-3xl font-bold">Overview</h1>
|
||||
<div className="grid grid-cols-3 gap-6 mt-6">
|
||||
{stats.map((stat) => (
|
||||
<Card key={stat.label} className="p-6">
|
||||
<p className="text-sm text-muted-foreground">{stat.label}</p>
|
||||
<p className="text-3xl font-bold mt-2">{stat.value}</p>
|
||||
{stat.trend && (
|
||||
<p className="text-sm text-accent mt-2">{stat.trend}</p>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
landingPage: `interface LandingPageProps {
|
||||
brandName?: string
|
||||
navItems?: string[]
|
||||
badge?: string
|
||||
headline?: string
|
||||
description?: string
|
||||
primaryCta?: string
|
||||
secondaryCta?: string
|
||||
onPrimaryCta?: () => void
|
||||
onSecondaryCta?: () => void
|
||||
}
|
||||
|
||||
function LandingPage({
|
||||
brandName = "ProductName",
|
||||
navItems = ["Features", "Sign Up"],
|
||||
badge = "New Release",
|
||||
headline = "Build Amazing Products Faster",
|
||||
description = "The complete toolkit for modern product development.",
|
||||
primaryCta = "Get Started",
|
||||
secondaryCta,
|
||||
onPrimaryCta,
|
||||
onSecondaryCta
|
||||
}: LandingPageProps) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<div className="border-b border-border bg-card p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-lg bg-accent" />
|
||||
<h3 className="text-xl font-bold">{brandName}</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{navItems.map((item) => (
|
||||
<Button key={item} variant="ghost" size="sm">{item}</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20">
|
||||
<Badge className="mb-4">{badge}</Badge>
|
||||
<h1 className="text-5xl font-bold mb-6">
|
||||
{headline}
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||||
{description}
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Button size="lg" onClick={onPrimaryCta}>
|
||||
{primaryCta}
|
||||
<ArrowRight className="ml-2" />
|
||||
</Button>
|
||||
{secondaryCta && (
|
||||
<Button size="lg" variant="outline" onClick={onSecondaryCta}>
|
||||
{secondaryCta}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
ecommercePage: `interface EcommercePageProps {
|
||||
storeName?: string
|
||||
productBadge?: string
|
||||
productName?: string
|
||||
productPrice?: string
|
||||
originalPrice?: string
|
||||
onAddToCart?: () => void
|
||||
}
|
||||
|
||||
function EcommercePage({
|
||||
storeName = "Store",
|
||||
productBadge = "New Arrival",
|
||||
productName = "Premium Product",
|
||||
productPrice = "$299.00",
|
||||
originalPrice,
|
||||
onAddToCart
|
||||
}: EcommercePageProps) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<div className="border-b border-border bg-card p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xl font-bold">{storeName}</h3>
|
||||
<Button variant="ghost" size="icon">
|
||||
<ShoppingCart />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8">
|
||||
<div className="grid grid-cols-2 gap-12">
|
||||
<div className="aspect-square rounded-lg bg-gradient-to-br from-primary to-accent" />
|
||||
<div className="space-y-6">
|
||||
<Badge>{productBadge}</Badge>
|
||||
<h1 className="text-4xl font-bold">{productName}</h1>
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-3xl font-bold">{productPrice}</span>
|
||||
{originalPrice && (
|
||||
<span className="text-lg text-muted-foreground line-through">
|
||||
{originalPrice}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button size="lg" className="w-full" onClick={onAddToCart}>
|
||||
<ShoppingCart className="mr-2" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
blogArticle: `interface BlogArticleProps {
|
||||
blogName?: string
|
||||
tags?: string[]
|
||||
title?: string
|
||||
authorName?: string
|
||||
authorAvatar?: string
|
||||
authorFallback?: string
|
||||
date?: string
|
||||
readTime?: string
|
||||
excerpt?: string
|
||||
}
|
||||
|
||||
function BlogArticle({
|
||||
blogName = "Blog",
|
||||
tags = ["Design", "Tutorial"],
|
||||
title = "Building a Comprehensive Component Library",
|
||||
authorName = "Alex Writer",
|
||||
authorAvatar,
|
||||
authorFallback = "AW",
|
||||
date = "March 15, 2024",
|
||||
readTime = "10 min read",
|
||||
excerpt = "Design systems have become an essential part of modern product development."
|
||||
}: BlogArticleProps) {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<div className="border-b border-border bg-card p-4">
|
||||
<h3 className="text-xl font-bold">{blogName}</h3>
|
||||
</div>
|
||||
<div className="p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div className="flex gap-2">
|
||||
{tags.map((tag, idx) => (
|
||||
<Badge key={tag} variant={idx === 0 ? "default" : "secondary"}>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<h1 className="text-5xl font-bold">
|
||||
{title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="h-12 w-12">
|
||||
{authorAvatar && <AvatarImage src={authorAvatar} />}
|
||||
<AvatarFallback>{authorFallback}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="font-medium">{authorName}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{date} · {readTime}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-video rounded-lg bg-gradient-to-br from-primary to-accent" />
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
{excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}`,
|
||||
}
|
||||
export const templatesCodeSnippets: Record<string, string> = templatesData
|
||||
|
||||
Reference in New Issue
Block a user