trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-08-12 12:29:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: .ltd files

Browse source 
no automatic instructions
This commit is contained in:
trafficlunar 2026-04-26 22:49:29 +01:00
parent a000447b0a
commit 817bda4993
36 changed files with 1733 additions and 1037 deletions
Download patch file Download diff file Expand all files Collapse all files

156
frontend/src/components/submit-form/switch-file-upload.tsx
View file

@ -1,73 +1,83 @@
import { useCallback, useState } from "react";
import { type FileWithPath } from "react-dropzone";
import { Icon } from "@iconify/react";
import Dropzone from "../dropzone";
import Camera from "./camera";
import ImageEditorPortrait from "./image-editor";
interface Props {
text: string;
forceCrop?: boolean;
image?: string | undefined;
setImage: (value: string | undefined) => void;
}
export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
const [isCameraOpen, setIsCameraOpen] = useState(false);
const [isCropOpen, setIsCropOpen] = useState(false);
const handleDrop = useCallback(
(acceptedFiles: FileWithPath[]) => {
const file = acceptedFiles[0];
// Convert to Data URI
const reader = new FileReader();
reader.onload = async (event) => {
setImage(event.target!.result as string);
if (forceCrop) setIsCropOpen(true);
};
reader.readAsDataURL(file);
},
[setImage],
);
return (
<div className="max-w-md w-full flex flex-col items-center gap-2">
<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
<p className="text-center text-sm">
{!image ? (
<>
Drag and drop {text}
<br />
or click to open
</>
) : (
"Uploaded!"
)}
</p>
</Dropzone>
<span>or</span>
<div className="flex gap-2 max-sm:flex-col">
<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
<Icon icon="mdi:camera" fontSize={20} />
Use your camera
</button>
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
<Icon icon="mdi:image-edit" fontSize={20} />
Edit Image
</button>
</div>
<Camera
isOpen={isCameraOpen}
setIsOpen={setIsCameraOpen}
setImage={setImage}
onCapture={() => {
if (forceCrop) setIsCropOpen(true);
}}
/>
<ImageEditorPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
</div>
);
}
import { useCallback, useState } from "react";
import { type FileWithPath } from "react-dropzone";
import { Icon } from "@iconify/react";
import Dropzone from "../dropzone";
import Camera from "./camera";
import ImageEditorPortrait from "./image-editor";
interface Props {
text: string;
type?: "file" | "image";
forceCrop?: boolean;
file?: string | File | undefined;
setFile?: (value: File | undefined) => void;
image?: string | undefined;
setImage?: (value: string | undefined) => void;
}
export default function SwitchFileUpload({ text, type = "image", forceCrop, file, setFile, image, setImage }: Props) {
const [isCameraOpen, setIsCameraOpen] = useState(false);
const [isCropOpen, setIsCropOpen] = useState(false);
const handleDrop = useCallback(
(acceptedFiles: FileWithPath[]) => {
const file = acceptedFiles[0];
if (type === "file") {
setFile!(file);
} else {
const reader = new FileReader();
reader.onload = (event) => {
setImage!(event.target!.result as string);
if (forceCrop) setIsCropOpen(true);
};
reader.readAsDataURL(file);
}
},
[setFile, setImage],
);
return (
<div className="max-w-md w-full flex flex-col items-center gap-2">
<Dropzone type={type} onDrop={handleDrop} options={{ maxFiles: 1 }}>
<p className="text-center text-sm">
{!file && !image ? (
<>
Drag and drop {text}
<br />
or click to open
</>
) : (
"Uploaded!"
)}
</p>
</Dropzone>
{type === "image" && (
<>
<span>or</span>
<div className="flex gap-2 max-sm:flex-col">
<button type="button" aria-label="Use your camera" onClick={() => setIsCameraOpen(true)} className="pill button gap-2">
<Icon icon="mdi:camera" fontSize={20} />
Use your camera
</button>
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
<Icon icon="mdi:image-edit" fontSize={20} />
Edit Image
</button>
</div>
<Camera
isOpen={isCameraOpen}
setIsOpen={setIsCameraOpen}
setImage={setImage}
onCapture={() => {
if (forceCrop) setIsCropOpen(true);
}}
/>
<ImageEditorPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage!} />
</>
)}
</div>
);
}