raul/wedding-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial draft and components creation

Browse Source
This commit is contained in:
Raul Lugo
2026-09-06 12:49:29 +02:00
parent 7a45111420
commit 64fb24d87c
44 changed files with 1922 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/invite/photo-upload.tsx
+18 -15
View File
@@ -99,40 +99,43 @@ export function PhotoUpload({
}
return (
<section className="rounded-[2rem] border bg-white p-6 shadow-sm md:p-8">
<div className="border-b pb-6">
<h2 className="text-2xl font-semibold">{labels.title}</h2>
<p className="mt-2 text-stone-600">{labels.description}</p>
<p className="mt-2 text-sm text-stone-500">{labels.requirements}</p>
<section className="border-t border-wedding-line pt-10">
<div className="grid gap-4 wedding-layout:grid-cols-3">
<p className="wedding-section-label">04</p>
<div>
<h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2>
<p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{labels.description}</p>
</div>
<p className="font-wedding-ui text-sm">{labels.requirements}</p>
</div>
<div className="mt-6 space-y-4">
<div className="mt-6 wedding-layout:ml-60">
{filename ? (
<p className="rounded-2xl bg-stone-100 px-4 py-3 text-sm text-stone-700">
<p className="bg-wedding-cream px-4 py-3 font-wedding-ui text-sm text-wedding-ink">
{labels.current.replace("{filename}", filename)}
</p>
) : null}
{disabled ? (
<p className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
<p className="border border-wedding-line bg-wedding-cream px-4 py-3 font-wedding-ui text-sm">
{labels.disabled}
</p>
) : (
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<label className="flex-1 space-y-2">
<span className="text-sm font-medium">{labels.choose}</span>
<div className="mt-4 flex flex-col gap-4 wedding-phone:flex-row wedding-phone:items-end">
<label className="flex-1 font-wedding-ui text-sm">
<span>{labels.choose}</span>
<input
ref={inputRef}
type="file"
accept={allowedImageContentTypes.join(",")}
className="w-full rounded-xl border bg-white px-3 py-2"
className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"
/>
</label>
<button
type="button"
onClick={uploadSelectedFile}
disabled={status === "uploading"}
className="rounded-full bg-stone-950 px-6 py-3 font-medium text-white transition hover:bg-stone-800 disabled:cursor-not-allowed disabled:opacity-60 sm:self-end"
className="wedding-primary-cta disabled:cursor-not-allowed disabled:opacity-60"
>
{status === "uploading"
? labels.uploading
@@ -144,9 +147,9 @@ export function PhotoUpload({
)}
{status === "success" ? (
<p className="text-sm text-emerald-700">{labels.success}</p>
<p className="mt-4 font-wedding-ui text-sm text-wedding-olive">{labels.success}</p>
) : null}
{status === "error" ? <p className="text-sm text-red-700">{labels.error}</p> : null}
{status === "error" ? <p className="mt-4 font-wedding-ui text-sm text-wedding-terracotta">{labels.error}</p> : null}
</div>
</section>
)