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>
<div className="flex flex-col items-center gap-2"> <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} /> <SwitchFileUpload text="a screenshot of your Mii's features here" setImage={setMiiFeaturesUri} />
<SwitchSubmitTutorialButton /> <SwitchSubmitTutorialButton />
</div> </div>

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

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