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

feat: dropzone dragging over effect

Browse source
This commit is contained in:
trafficlunar 2025-05-24 12:04:37 +01:00
parent 6a965ecd66
commit 045308dcef
5 changed files with 82 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/submit-form/edit-form.tsx
View file

@ -3,8 +3,7 @@
import { redirect } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { FileWithPath, useDropzone } from "react-dropzone";
import { Icon } from "@iconify/react";
import { FileWithPath } from "react-dropzone";
import { Mii } from "@prisma/client";
import { nameSchema, tagsSchema } from "@/lib/schemas";
@ -14,6 +13,7 @@ import ImageList from "./image-list";
import LikeButton from "../like-button";
import Carousel from "../carousel";
import SubmitButton from "../submit-button";
import Dropzone from "../dropzone";
interface Props {
mii: Mii;
@ -33,14 +33,6 @@ export default function EditForm({ mii, likes }: Props) {
[files.length]
);
const { getRootProps, getInputProps } = useDropzone({
onDrop: handleDrop,
maxFiles: 3,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp"],
},
});
const [error, setError] = useState<string | undefined>(undefined);
const [name, setName] = useState(mii.name);
@ -197,20 +189,13 @@ export default function EditForm({ mii, likes }: Props) {
</div>
<div className="max-w-md w-full self-center">
<div
{...getRootProps({
className:
"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full",
})}
>
<input {...getInputProps()} />
<Icon icon="material-symbols:upload" fontSize={48} />
<Dropzone onDrop={handleDrop}>
<p className="text-center text-sm">
Drag and drop your images here
<br />
or click to open
</p>
</div>
</Dropzone>
</div>
<ImageList files={files} setFiles={setFiles} />

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

@ -3,7 +3,7 @@
import { redirect } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { FileWithPath, useDropzone } from "react-dropzone";
import { FileWithPath } from "react-dropzone";
import { Icon } from "@iconify/react";
import qrcode from "qrcode-generator";
@ -21,6 +21,7 @@ import SubmitTutorialButton from "../tutorial/submit";
import LikeButton from "../like-button";
import Carousel from "../carousel";
import SubmitButton from "../submit-button";
import Dropzone from "../dropzone";
export default function SubmitForm() {
const [files, setFiles] = useState<FileWithPath[]>([]);
@ -33,14 +34,6 @@ export default function SubmitForm() {
[files.length]
);
const { getRootProps, getInputProps } = useDropzone({
onDrop: handleDrop,
maxFiles: 3,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp"],
},
});
const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
const [studioUrl, setStudioUrl] = useState<string | undefined>();
const [generatedQrCodeUrl, setGeneratedQrCodeUrl] = useState<string | undefined>();
@ -234,20 +227,13 @@ export default function SubmitForm() {
</div>
<div className="max-w-md w-full self-center">
<div
{...getRootProps({
className:
"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full",
})}
>
<input {...getInputProps()} />
<Icon icon="material-symbols:upload" fontSize={48} />
<Dropzone onDrop={handleDrop}>
<p className="text-center text-sm">
Drag and drop your images here
<br />
or click to open
</p>
</div>
</Dropzone>
</div>
<ImageList files={files} setFiles={setFiles} />

25
src/components/submit-form/qr-upload.tsx
View file

@ -1,9 +1,9 @@
"use client";
import { useCallback, useRef } from "react";
import { FileWithPath, useDropzone } from "react-dropzone";
import { Icon } from "@iconify/react";
import { FileWithPath } from "react-dropzone";
import jsQR from "jsqr";
import Dropzone from "../dropzone";
interface Props {
setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
@ -12,7 +12,7 @@ interface Props {
export default function QrUpload({ setQrBytesRaw }: Props) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const onDrop = useCallback(
const handleDrop = useCallback(
(acceptedFiles: FileWithPath[]) => {
acceptedFiles.forEach((file) => {
// Scan QR code
@ -44,30 +44,17 @@ export default function QrUpload({ setQrBytesRaw }: Props) {
[setQrBytesRaw]
);
const { getRootProps, getInputProps } = useDropzone({
onDrop,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp", ".heic"],
},
});
return (
<div className="max-w-md w-full">
<div
{...getRootProps({
className:
"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full",
})}
>
<input {...getInputProps({ multiple: false })} />
<Icon icon="material-symbols:upload" fontSize={48} />
<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
<p className="text-center text-sm">
Drag and drop your QR code image here
<br />
or click to open
</p>
</div>
</Dropzone>
{/* Canvas is used to scan the QR code */}
<canvas ref={canvasRef} className="hidden" />
</div>
);