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

feat: add crop button to features screenshot

Browse source
This commit is contained in:
trafficlunar 2026-03-27 21:23:04 +00:00
parent c78f54824e
commit 3a1d01d662
2 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -336,7 +336,7 @@ export default function SubmitForm() {
</div>
<div className="flex flex-col items-center gap-2">
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} hasCrop />
<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
<SwitchFileUpload text="a screenshot of your Mii's features here" setImage={setMiiFeaturesUri} />
<SwitchSubmitTutorialButton />
</div>

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

@ -9,12 +9,12 @@ import CropPortrait from "./crop-portrait";
interface Props {
text: string;
hasCrop?: boolean;
forceCrop?: boolean;
image?: string | undefined;
setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
}
export default function SwitchFileUpload({ text, hasCrop = false, image, setImage }: Props) {
export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
const [isCameraOpen, setIsCameraOpen] = useState(false);
const [isCropOpen, setIsCropOpen] = useState(false);
const [hasImage, setHasImage] = useState(false);
@ -27,7 +27,7 @@ export default function SwitchFileUpload({ text, hasCrop = false, image, setImag
reader.onload = async (event) => {
setImage(event.target!.result as string);
setHasImage(true);
if (hasCrop) setIsCropOpen(true);
if (forceCrop) setIsCropOpen(true);
};
reader.readAsDataURL(file);
},
@ -36,7 +36,7 @@ export default function SwitchFileUpload({ text, hasCrop = false, image, setImag
useEffect(() => {
if (!isCameraOpen) return;
if (hasCrop) setIsCropOpen(true);
if (forceCrop) setIsCropOpen(true);
}, [isCameraOpen]);
return (
@ -61,17 +61,13 @@ export default function SwitchFileUpload({ text, hasCrop = false, image, setImag
<Icon icon="mdi:camera" fontSize={20} />
Use your camera
</button>
{hasCrop && (
<>
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
<Icon icon="material-symbols:crop" fontSize={20} />
Crop Image
</button>
<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
</>
)}
<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
<Icon icon="material-symbols:crop" fontSize={20} />
Crop Image
</button>
<Camera isOpen={isCameraOpen} setIsOpen={setIsCameraOpen} setImage={setImage} />
<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
</div>
);
}