mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-27 13:39:03 +08:00
feat(website): enhance website
This commit is contained in:
Bjorn Lammers
committed by
Thomas Camlong
Thomas Camlong
parent
6e3a39a4cf
commit
63349f7490
@@ -2,7 +2,6 @@
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { REPO_PATH } from "@/constants"
|
||||
import { DialogDescription } from "@radix-ui/react-dialog"
|
||||
import { ExternalLink, PlusCircle } from "lucide-react"
|
||||
@@ -13,31 +12,31 @@ export const ISSUE_TEMPLATES = [
|
||||
{
|
||||
id: "add_monochrome_icon",
|
||||
name: "Add light & dark icon",
|
||||
description: "Use this template to add a new icon to the project. Monochrome icons need both light and dark versions.",
|
||||
description: "Submit a new icon with both light and dark versions for optimal theme compatibility.",
|
||||
url: `${REPO_PATH}/issues/new?template=add_monochrome_icon.yml`,
|
||||
},
|
||||
{
|
||||
id: "add_normal_icon",
|
||||
name: "Add normal icon",
|
||||
description: "Use this template to add a new icon to the project. Normal icons work for both light and dark themes.",
|
||||
description: "Submit a new icon that works well across both light and dark themes.",
|
||||
url: `${REPO_PATH}/issues/new?template=add_normal_icon.yml`,
|
||||
},
|
||||
{
|
||||
id: "update_monochrome_icon",
|
||||
name: "Update light & dark icon",
|
||||
description: "Use this template to update an existing icon. Monochrome icons need both light and dark versions.",
|
||||
description: "Improve an existing icon by updating both light and dark versions.",
|
||||
url: `${REPO_PATH}/issues/new?template=update_monochrome_icon.yml`,
|
||||
},
|
||||
{
|
||||
id: "update_normal_icon",
|
||||
name: "Update normal icon",
|
||||
description: "Use this template to update an existing icon. Normal icons work for both light and dark themes.",
|
||||
description: "Improve an existing icon that works across both light and dark themes.",
|
||||
url: `${REPO_PATH}/issues/new?template=update_normal_icon.yml`,
|
||||
},
|
||||
{
|
||||
id: "blank_issue",
|
||||
name: "Something else",
|
||||
description: "You'd like to do something else? Use this template to create a new issue.",
|
||||
description: "Create a custom issue for other suggestions, bug reports, or improvements.",
|
||||
url: `${REPO_PATH}/issues/new?template=BLANK_ISSUE`,
|
||||
},
|
||||
]
|
||||
@@ -46,15 +45,15 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
{ISSUE_TEMPLATES.map((template) => (
|
||||
<Link key={template.id} href={template.url} className="w-full" target="_blank" rel="noopener noreferrer">
|
||||
<Link key={template.id} href={template.url} className="w-full group" target="_blank" rel="noopener noreferrer">
|
||||
<Button
|
||||
key={template.id}
|
||||
variant="outline"
|
||||
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-colors duration-200"
|
||||
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="font-medium">{template.name}</span>
|
||||
<ExternalLink className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium group-hover:text-rose-500 transition-all duration-300">{template.name}</span>
|
||||
<ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-rose-500 transition-all duration-300" />
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{template.description}</span>
|
||||
</Button>
|
||||
@@ -69,27 +68,18 @@ export function IconSubmissionForm() {
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hidden md:inline-flex cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
|
||||
>
|
||||
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Suggest new icon
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Suggest a new icon</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="hidden md:inline-flex cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
|
||||
>
|
||||
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="md:max-w-4xl backdrop-blur-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Suggest a new icon</DialogTitle>
|
||||
<DialogDescription>You can suggest a new icon by creating an issue on GitHub using one of the templates below.</DialogDescription>
|
||||
<DialogTitle>Contribute a new icon</DialogTitle>
|
||||
<DialogDescription>Choose a template below to suggest a new icon or improve an existing one.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="mt-4">
|
||||
<IconSubmissionContent onClose={() => setOpen(false)} />
|
||||
|
||||
Reference in New Issue
Block a user