trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: type mii name to delete it

Browse source
This commit is contained in:
trafficlunar 2026-03-30 11:17:46 +01:00
parent 77266d0ef1
commit 3163fac2eb
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/mii/delete-mii-button.tsx
View file

@ -21,6 +21,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(undefined);
const [inputMiiName, setInputMiiName] = useState("");
const handleSubmit = async () => { const handleSubmit = async () => {
const response = await fetch(`/api/mii/${miiId}/delete`, { method: "DELETE" }); const response = await fetch(`/api/mii/${miiId}/delete`, { method: "DELETE" });
@ -85,7 +86,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
<p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p> <p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p>
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex"> <div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex overflow-hidden">
<Image src={`/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} /> <Image src={`/mii/${miiId}/image?type=mii`} alt="mii image" width={128} height={128} />
<div className="p-4"> <div className="p-4">
<p className="text-xl font-bold line-clamp-1" title={miiName}> <p className="text-xl font-bold line-clamp-1" title={miiName}>
@ -95,13 +96,21 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
</div> </div>
</div> </div>
<p className="text-sm text-zinc-500 my-2">Type the Mii's name below to delete:</p>
<input type="text" className="pill input" value={inputMiiName} onChange={(e) => setInputMiiName(e.target.value)} />
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>} {error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
<div className="flex justify-end gap-2 mt-4"> <div className="flex justify-end gap-2 mt-4">
<button onClick={close} className="pill button"> <button onClick={close} className="pill button">
Cancel Cancel
</button> </button>
<SubmitButton onClick={handleSubmit} text="Delete" className="bg-red-400! border-red-500! hover:bg-red-500!" /> <SubmitButton
onClick={handleSubmit}
text="Delete"
disabled={inputMiiName != miiName}
className="bg-red-400! border-red-500! hover:bg-red-500! disabled:bg-red-200! disabled:border-red-300!"
/>
</div> </div>
</div> </div>
</div>, </div>,

5
src/components/submit-button.tsx
View file

@ -5,11 +5,12 @@ import { Icon } from "@iconify/react";
interface Props { interface Props {
onClick: () => void | Promise<void>; onClick: () => void | Promise<void>;
disabled?: boolean;
text?: string; text?: string;
className?: string; className?: string;
} }
export default function SubmitButton({ onClick, text = "Submit", className }: Props) { export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleClick = async (event: React.FormEvent) => { const handleClick = async (event: React.FormEvent) => {
@ -24,7 +25,7 @@ export default function SubmitButton({ onClick, text = "Submit", className }: Pr
}; };
return ( return (
<button type="submit" aria-label={text} onClick={handleClick} className={`pill button w-min ${className}`}> <button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}>
{text} {text}
{isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />} {isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />}
</button> </button>