mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-21 02:51:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): Fix and improve mobile display of submission form (#1291)

Browse Source 
* feat(web): Fix and improve mobile display of submission form

* fix(web): Run Biome checks and apply fixes

* Update web/src/components/icon-search.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Bjorn Lammers <bjorn@lammers.media>

---------

Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Bjorn Lammers
2025-04-26 22:56:39 +02:00
committed by GitHub
parent 09a30fd4fa
commit e7284241c9
3 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/icon-submission-form.tsx
View File

@@ -52,12 +52,12 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer transition-all duration-300"
asChild
>
<div>
<div className="w-full">
<div className="flex w-full items-center justify-between">
<span className="font-medium transition-all duration-300">{template.name}</span>
<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300" />
<span className="font-medium transition-all duration-300 whitespace-normal text-wrap">{template.name}</span>
<ExternalLink className="h-4 w-4 text-muted-foreground transition-all duration-300 flex-shrink-0 ml-2" />
</div>
<span className="text-xs text-muted-foreground">{template.description}</span>
<span className="text-xs text-muted-foreground whitespace-normal text-wrap break-words">{template.description}</span>
</div>
</Button>
</Link>
@@ -66,22 +66,26 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
</div>
)
}
export function IconSubmissionForm() {
export function IconSubmissionForm({ trigger }: { trigger?: React.ReactNode }) {
const [open, setOpen] = useState(false)
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300">
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
</Button>
</DialogTrigger>
<DialogContent className="md:max-w-4xl backdrop-blur-2xl bg-background">
{trigger ? (
<DialogTrigger asChild>{trigger}</DialogTrigger>
) : (
<DialogTrigger asChild>
<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300 items-center gap-2">
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Submit icon(s)
</Button>
</DialogTrigger>
)}
<DialogContent className="w-[calc(100%-2rem)] max-w-sm md:w-full md:max-w-4xl p-6 backdrop-blur-2xl bg-background flex flex-col gap-4">
<DialogHeader>
<DialogTitle>Submit an icon</DialogTitle>
<DialogDescription>Select an option below to submit or update an icon.</DialogDescription>
</DialogHeader>
<div className="mt-4">
<div className="overflow-y-auto max-h-[calc(85vh-10rem)] pr-2">
<IconSubmissionContent onClose={() => setOpen(false)} />
</div>
</DialogContent>