trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 06:34:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update packages

Browse source 
also accidentally prettified some code along the way
This commit is contained in:
trafficlunar 2026-01-28 19:06:00 +00:00
parent 4656b969d6
commit e05533b19a
6 changed files with 1150 additions and 850 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/submit-form/index.tsx
View file

@ -31,12 +31,14 @@ export default function SubmitForm() {
if (files.length >= 3) return;
setFiles((prev) => [...prev, ...acceptedFiles]);
},
[files.length]
[files.length],
);
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
const [studioUrl, setStudioUrl] = useState<string | undefined>();
const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<string | undefined>();
const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<
string | undefined
>();
const [error, setError] = useState<string | undefined>(undefined);
@ -76,7 +78,7 @@ export default function SubmitForm() {
const { id, error } = await response.json();
if (!response.ok) {
setError(error);
setError(String(error)); // app can crash if error message is not a string
return;
}
@ -127,16 +129,29 @@ export default function SubmitForm() {
<form className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
<div className="flex justify-center">
<div className="w-75 h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
<Carousel images={[studioUrl ?? "/loading.svg", generatedQrCodeUrl ?? "/loading.svg", ...files.map((file) => URL.createObjectURL(file))]} />
<Carousel
images={[
studioUrl ?? "/loading.svg",
generatedQrCodeUrl ?? "/loading.svg",
...files.map((file) => URL.createObjectURL(file)),
]}
/>
<div className="p-4 flex flex-col gap-1 h-full">
<h1 className="font-bold text-2xl line-clamp-1" title={name}>
{name || "Mii name"}
</h1>
<div id="tags" className="flex flex-wrap gap-1">
{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
{tags.length == 0 && (
<span className="px-2 py-1 bg-orange-300 rounded-full text-xs">
tag
</span>
)}
{tags.map((tag) => (
<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
<span
key={tag}
className="px-2 py-1 bg-orange-300 rounded-full text-xs"
>
{tag}
</span>
))}
@ -152,7 +167,9 @@ export default function SubmitForm() {
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
<div>
<h2 className="text-2xl font-bold">Submit your Mii</h2>
<p className="text-sm text-zinc-500">Share your creation for others to see.</p>
<p className="text-sm text-zinc-500">
Share your creation for others to see.
</p>
</div>
{/* Separator */}
@ -210,15 +227,26 @@ export default function SubmitForm() {
<QrUpload setQrBytesRaw={setQrBytesRaw} />
<span>or</span>
<button type="button" aria-label="Use your camera" onClick={() => setIsQrScannerOpen(true)} className="pill button gap-2">
<button
type="button"
aria-label="Use your camera"
onClick={() => setIsQrScannerOpen(true)}
className="pill button gap-2"
>
<Icon icon="mdi:camera" fontSize={20} />
Use your camera
</button>
<QrScanner isOpen={isQrScannerOpen} setIsOpen={setIsQrScannerOpen} setQrBytesRaw={setQrBytesRaw} />
<QrScanner
isOpen={isQrScannerOpen}
setIsOpen={setIsQrScannerOpen}
setQrBytesRaw={setQrBytesRaw}
/>
<SubmitTutorialButton />
<span className="text-xs text-zinc-400">For emulators, aes_keys.txt is required.</span>
<span className="text-xs text-zinc-400">
For emulators, aes_keys.txt is required.
</span>
</div>
{/* Separator */}
@ -237,14 +265,18 @@ export default function SubmitForm() {
</p>
</Dropzone>
<span className="text-xs text-zinc-400 mt-2">Animated images currently not supported.</span>
<span className="text-xs text-zinc-400 mt-2">
Animated images currently not supported.
</span>
</div>
<ImageList files={files} setFiles={setFiles} />
<hr className="border-zinc-300 my-2" />
<div className="flex justify-between items-center">
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
{error && (
<span className="text-red-400 font-bold">Error: {error}</span>
)}
<SubmitButton onClick={handleSubmit} className="ml-auto" />
</div>