mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 13:17:45 +00:00
feat: use react-router for links and redirects
This commit is contained in:
parent
87b885a2f8
commit
12203901e9
35 changed files with 1222 additions and 1111 deletions
|
|
@ -1,12 +0,0 @@
|
||||||
import type { MetadataRoute } from "next";
|
|
||||||
|
|
||||||
export default function robots(): MetadataRoute.Robots {
|
|
||||||
return {
|
|
||||||
rules: {
|
|
||||||
userAgent: "*",
|
|
||||||
allow: "/",
|
|
||||||
disallow: ["/*?*page=", "/profile*?*tags=", "/edit/*", "/profile/settings", "/random", "/submit", "/report/mii/*", "/report/user/*", "/admin"],
|
|
||||||
},
|
|
||||||
sitemap: `${process.env.NEXT_PUBLIC_BASE_URL}/sitemap.xml`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +1,52 @@
|
||||||
{
|
{
|
||||||
"name": "frontend",
|
"name": "frontend",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc -b && vite build",
|
"build": "tsc -b && vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@bprogress/react": "^1.2.7",
|
"@bprogress/react": "^1.2.7",
|
||||||
"@fontsource-variable/lexend": "^5.2.11",
|
"@fontsource-variable/lexend": "^5.2.11",
|
||||||
"@hello-pangea/dnd": "^18.0.1",
|
"@hello-pangea/dnd": "^18.0.1",
|
||||||
"@nanostores/react": "^1.1.0",
|
"@nanostores/react": "^1.1.0",
|
||||||
"@tailwindcss/vite": "^4.2.2",
|
"@tailwindcss/vite": "^4.2.2",
|
||||||
"@tomodachi-share/shared": "workspace:*",
|
"@tomodachi-share/shared": "workspace:*",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"canvas-confetti": "^1.9.4",
|
"canvas-confetti": "^1.9.4",
|
||||||
"dayjs": "^1.11.20",
|
"dayjs": "^1.11.20",
|
||||||
"downshift": "^9.3.2",
|
"downshift": "^9.3.2",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"jsqr": "^1.4.0",
|
"jsqr": "^1.4.0",
|
||||||
"nanostores": "^1.2.0",
|
"nanostores": "^1.2.0",
|
||||||
"qrcode-generator": "^2.0.4",
|
"qrcode-generator": "^2.0.4",
|
||||||
"react": "^19.2.4",
|
"react": "^19.2.4",
|
||||||
"react-dom": "^19.2.4",
|
"react-dom": "^19.2.4",
|
||||||
"react-dropzone": "^15.0.0",
|
"react-dropzone": "^15.0.0",
|
||||||
"react-image-crop": "^11.0.10",
|
"react-image-crop": "^11.0.10",
|
||||||
"react-router": "^7.14.1",
|
"react-router": "^7.14.1",
|
||||||
"tailwindcss": "^4.2.2",
|
"tailwindcss": "^4.2.2",
|
||||||
"zod": "^4.3.6"
|
"zod": "^4.3.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.39.4",
|
"@eslint/js": "^9.39.4",
|
||||||
"@iconify/react": "^6.0.2",
|
"@iconify/react": "^6.0.2",
|
||||||
"@types/canvas-confetti": "^1.9.0",
|
"@types/canvas-confetti": "^1.9.0",
|
||||||
"@types/node": "^24.12.2",
|
"@types/node": "^24.12.2",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@types/seedrandom": "^3.0.8",
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"eslint": "^9.39.4",
|
||||||
"eslint": "^9.39.4",
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"eslint-plugin-react-refresh": "^0.5.2",
|
||||||
"eslint-plugin-react-refresh": "^0.5.2",
|
"globals": "^17.4.0",
|
||||||
"globals": "^17.4.0",
|
"typescript": "~6.0.2",
|
||||||
"typescript": "~6.0.2",
|
"typescript-eslint": "^8.58.0",
|
||||||
"typescript-eslint": "^8.58.0",
|
"vite": "^8.0.4"
|
||||||
"vite": "^8.0.4"
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
frontend/public/robots.txt
Normal file
13
frontend/public/robots.txt
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
User-Agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /*?*page=
|
||||||
|
Disallow: /profile*?*tags=
|
||||||
|
Disallow: /edit/*
|
||||||
|
Disallow: /profile/settings
|
||||||
|
Disallow: /random
|
||||||
|
Disallow: /submit
|
||||||
|
Disallow: /report/mii/*
|
||||||
|
Disallow: /report/user/*
|
||||||
|
Disallow: /admin
|
||||||
|
|
||||||
|
Sitemap: https://api.tomodachishare.com/sitemap.xml
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
text: string;
|
text: string;
|
||||||
|
|
@ -19,9 +20,9 @@ export default function Description({ text, className }: Props) {
|
||||||
const url = new URL(part);
|
const url = new URL(part);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<Link
|
||||||
key={index}
|
key={index}
|
||||||
href={`/out?url=${encodeURIComponent(part)}`}
|
to={`/out?url=${encodeURIComponent(part)}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
|
className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
|
||||||
title={`Go to ${url.hostname}`}
|
title={`Go to ${url.hostname}`}
|
||||||
|
|
@ -30,7 +31,7 @@ export default function Description({ text, className }: Props) {
|
||||||
{url.pathname !== "/" ? url.pathname : ""}
|
{url.pathname !== "/" ? url.pathname : ""}
|
||||||
{url.search}
|
{url.search}
|
||||||
<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
|
||||||
</a>
|
</Link>
|
||||||
);
|
);
|
||||||
} catch {
|
} catch {
|
||||||
// Normal text/Invalid URL fallback
|
// Normal text/Invalid URL fallback
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -11,38 +12,42 @@ export default function Footer() {
|
||||||
|
|
||||||
{/* Links section */}
|
{/* Links section */}
|
||||||
<div className="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
|
<div className="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
|
||||||
<a href="/terms-of-service" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
|
<Link to="/terms-of-service" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
|
||||||
Terms of Service
|
Terms of Service
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
||||||
•
|
•
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<a href="/privacy" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
|
<Link to="/privacy" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
|
||||||
Privacy Policy
|
Privacy Policy
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
||||||
•
|
•
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<a
|
<Link
|
||||||
href="https://discord.gg/48cXBFKvWQ"
|
to="https://discord.gg/48cXBFKvWQ"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="text-[#5865F2] hover:text-[#454FBF] transition-colors duration-200 hover:underline inline-flex items-end gap-1"
|
className="text-[#5865F2] hover:text-[#454FBF] transition-colors duration-200 hover:underline inline-flex items-end gap-1"
|
||||||
>
|
>
|
||||||
<Icon icon="ic:baseline-discord" className="text-lg" />
|
<Icon icon="ic:baseline-discord" className="text-lg" />
|
||||||
Discord
|
Discord
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
|
||||||
•
|
•
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<a href="https://trafficlunar.net" target="_blank" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group">
|
<Link
|
||||||
|
to="https://trafficlunar.net"
|
||||||
|
target="_blank"
|
||||||
|
className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group"
|
||||||
|
>
|
||||||
Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
|
Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Copyright */}
|
{/* Copyright */}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useStore } from "@nanostores/react";
|
import { useStore } from "@nanostores/react";
|
||||||
import { session } from "../session";
|
import { session } from "../session";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
export default function HeaderProfile() {
|
export default function HeaderProfile() {
|
||||||
const API_BASE_URL = import.meta.env.VITE_API_URL;
|
const API_BASE_URL = import.meta.env.VITE_API_URL;
|
||||||
|
|
@ -25,15 +26,15 @@ export default function HeaderProfile() {
|
||||||
<>
|
<>
|
||||||
{!$session?.user ? (
|
{!$session?.user ? (
|
||||||
<li>
|
<li>
|
||||||
<a href={"/login"} className="pill button h-full">
|
<Link to={"/login"} className="pill button h-full">
|
||||||
Login
|
Login
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<li title="Your profile">
|
<li title="Your profile">
|
||||||
<a
|
<Link
|
||||||
href={`/profile/${$session?.user?.id}`}
|
to={`/profile/${$session?.user?.id}`}
|
||||||
aria-label="Go to profile"
|
aria-label="Go to profile"
|
||||||
className="pill button gap-2! p-0! h-full max-w-64"
|
className="pill button gap-2! p-0! h-full max-w-64"
|
||||||
data-tooltip="Your Profile"
|
data-tooltip="Your Profile"
|
||||||
|
|
@ -46,12 +47,12 @@ export default function HeaderProfile() {
|
||||||
className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
|
className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
|
||||||
/>
|
/>
|
||||||
<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
|
<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li title="Logout">
|
<li title="Logout">
|
||||||
<a href={`${API_BASE_URL}/api/auth/signout`} aria-label="Log Out" className="pill button p-2! aspect-square h-full" data-tooltip="Log Out">
|
<Link to={`${API_BASE_URL}/api/auth/signout`} aria-label="Log Out" className="pill button p-2! aspect-square h-full" data-tooltip="Log Out">
|
||||||
<Icon icon="ic:round-logout" fontSize={24} />
|
<Icon icon="ic:round-logout" fontSize={24} />
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,19 @@
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import SearchBar from "./search-bar";
|
import SearchBar from "./search-bar";
|
||||||
import HeaderProfile from "./header-profile";
|
import HeaderProfile from "./header-profile";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
|
<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
|
||||||
<a
|
<Link
|
||||||
href={"/"}
|
to={"/"}
|
||||||
aria-label="Go to Home Page"
|
aria-label="Go to Home Page"
|
||||||
className="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2"
|
className="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2"
|
||||||
>
|
>
|
||||||
<img src="/logo.svg" width={56} height={45} alt="logo" />
|
<img src="/logo.svg" width={56} height={45} alt="logo" />
|
||||||
TomodachiShare
|
TomodachiShare
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
<div className="flex justify-center max-lg:justify-end max-md:justify-center">
|
<div className="flex justify-center max-lg:justify-end max-md:justify-center">
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
|
|
@ -20,19 +21,19 @@ export default function Header() {
|
||||||
|
|
||||||
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
|
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
|
||||||
<li title="Random Mii">
|
<li title="Random Mii">
|
||||||
<a
|
<Link
|
||||||
href={`${import.meta.env.VITE_API_URL}/random`}
|
to={`${import.meta.env.VITE_API_URL}/random`}
|
||||||
aria-label="Go to Random Link"
|
aria-label="Go to Random Link"
|
||||||
className="pill button p-0! h-full aspect-square"
|
className="pill button p-0! h-full aspect-square"
|
||||||
data-tooltip="Go to a Random Mii"
|
data-tooltip="Go to a Random Mii"
|
||||||
>
|
>
|
||||||
<Icon icon="mdi:dice-3" fontSize={28} />
|
<Icon icon="mdi:dice-3" fontSize={28} />
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href={"/submit"} className="pill button h-full">
|
<Link to={"/submit"} className="pill button h-full">
|
||||||
Submit
|
Submit
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<HeaderProfile />
|
<HeaderProfile />
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,24 @@
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import DeleteMiiButton from "./delete-mii-button";
|
import DeleteMiiButton from "./delete-mii-button";
|
||||||
|
import { Link } from "react-router";
|
||||||
interface Props {
|
|
||||||
mii: any;
|
interface Props {
|
||||||
}
|
mii: any;
|
||||||
|
}
|
||||||
export default function AuthorButtons({ mii }: Props) {
|
|
||||||
// const session = useSession();
|
export default function AuthorButtons({ mii }: Props) {
|
||||||
|
// const session = useSession();
|
||||||
// if (!session.data || (Number(session.data.user?.id) !== mii.userId && Number(session.data.user?.id) !== Number(import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID)))
|
|
||||||
// return null;
|
// if (!session.data || (Number(session.data.user?.id) !== mii.userId && Number(session.data.user?.id) !== Number(import.meta.env.NEXT_PUBLIC_ADMIN_USER_ID)))
|
||||||
|
// return null;
|
||||||
return (
|
|
||||||
<>
|
return (
|
||||||
<a aria-label="Edit Mii" href={`/edit/${mii.id}`}>
|
<>
|
||||||
<Icon icon="mdi:pencil" />
|
<Link aria-label="Edit Mii" to={`/edit/${mii.id}`}>
|
||||||
<span>Edit</span>
|
<Icon icon="mdi:pencil" />
|
||||||
</a>
|
<span>Edit</span>
|
||||||
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
|
</Link>
|
||||||
</>
|
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} inMiiPage />
|
||||||
);
|
</>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ import { Icon } from "@iconify/react";
|
||||||
|
|
||||||
import LikeButton from "../like-button";
|
import LikeButton from "../like-button";
|
||||||
import SubmitButton from "../submit-button";
|
import SubmitButton from "../submit-button";
|
||||||
|
import { useNavigate } from "react-router";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
miiId: number;
|
miiId: number;
|
||||||
|
|
@ -13,6 +14,7 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Props) {
|
export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Props) {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
|
@ -28,7 +30,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes, inMiiPage }: Pr
|
||||||
}
|
}
|
||||||
|
|
||||||
close();
|
close();
|
||||||
window.location.reload(); // I would use router.refresh() here but the Mii list doesn't update
|
navigate(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const close = () => {
|
const close = () => {
|
||||||
|
|
|
||||||
|
|
@ -1,132 +1,133 @@
|
||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
|
||||||
import PlatformSelect from "./platform-select";
|
import PlatformSelect from "./platform-select";
|
||||||
import TagFilter from "./tag-filter";
|
import TagFilter from "./tag-filter";
|
||||||
import GenderSelect from "./gender-select";
|
import GenderSelect from "./gender-select";
|
||||||
import OtherFilters from "./other-filters";
|
import OtherFilters from "./other-filters";
|
||||||
import MakeupSelect from "./makeup-select";
|
import MakeupSelect from "./makeup-select";
|
||||||
import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/shared";
|
import type { MiiGender, MiiMakeup, MiiPlatform } from "@tomodachi-share/shared";
|
||||||
|
import { useSearchParams } from "react-router";
|
||||||
export default function FilterMenu() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function FilterMenu() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
|
|
||||||
const gender = (searchParams.get("gender") as MiiGender) || undefined;
|
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
|
||||||
const makeup = (searchParams.get("makeup") as MiiMakeup) || undefined;
|
const gender = (searchParams.get("gender") as MiiGender) || undefined;
|
||||||
const rawTags = searchParams.get("tags") || "";
|
const makeup = (searchParams.get("makeup") as MiiMakeup) || undefined;
|
||||||
const rawExclude = searchParams.get("exclude") || "";
|
const rawTags = searchParams.get("tags") || "";
|
||||||
const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false;
|
const rawExclude = searchParams.get("exclude") || "";
|
||||||
|
const allowCopying = (searchParams.get("allowCopying") as unknown as boolean) || false;
|
||||||
const tags = useMemo(
|
|
||||||
() =>
|
const tags = useMemo(
|
||||||
rawTags
|
() =>
|
||||||
? rawTags
|
rawTags
|
||||||
.split(",")
|
? rawTags
|
||||||
.map((tag) => tag.trim())
|
.split(",")
|
||||||
.filter((tag) => tag.length > 0)
|
.map((tag) => tag.trim())
|
||||||
: [],
|
.filter((tag) => tag.length > 0)
|
||||||
[rawTags],
|
: [],
|
||||||
);
|
[rawTags],
|
||||||
const exclude = useMemo(
|
);
|
||||||
() =>
|
const exclude = useMemo(
|
||||||
rawExclude
|
() =>
|
||||||
? rawExclude
|
rawExclude
|
||||||
.split(",")
|
? rawExclude
|
||||||
.map((tag) => tag.trim())
|
.split(",")
|
||||||
.filter((tag) => tag.length > 0)
|
.map((tag) => tag.trim())
|
||||||
: [],
|
.filter((tag) => tag.length > 0)
|
||||||
[rawExclude],
|
: [],
|
||||||
);
|
[rawExclude],
|
||||||
|
);
|
||||||
const [filterCount, setFilterCount] = useState(tags.length);
|
|
||||||
|
const [filterCount, setFilterCount] = useState(tags.length);
|
||||||
// Filter menu button handler
|
|
||||||
const handleClick = () => {
|
// Filter menu button handler
|
||||||
if (!isOpen) {
|
const handleClick = () => {
|
||||||
setIsOpen(true);
|
if (!isOpen) {
|
||||||
// slight delay to trigger animation
|
setIsOpen(true);
|
||||||
setTimeout(() => setIsVisible(true), 10);
|
// slight delay to trigger animation
|
||||||
} else {
|
setTimeout(() => setIsVisible(true), 10);
|
||||||
setIsVisible(false);
|
} else {
|
||||||
setTimeout(() => {
|
setIsVisible(false);
|
||||||
setIsOpen(false);
|
setTimeout(() => {
|
||||||
}, 200);
|
setIsOpen(false);
|
||||||
}
|
}, 200);
|
||||||
};
|
}
|
||||||
|
};
|
||||||
// Count all active filters
|
|
||||||
useEffect(() => {
|
// Count all active filters
|
||||||
let count = tags.length + exclude.length;
|
useEffect(() => {
|
||||||
if (platform) count++;
|
let count = tags.length + exclude.length;
|
||||||
if (gender) count++;
|
if (platform) count++;
|
||||||
if (allowCopying) count++;
|
if (gender) count++;
|
||||||
if (makeup) count++;
|
if (allowCopying) count++;
|
||||||
|
if (makeup) count++;
|
||||||
setFilterCount(count);
|
|
||||||
}, [tags, exclude, platform, gender, allowCopying, makeup]);
|
setFilterCount(count);
|
||||||
|
}, [tags, exclude, platform, gender, allowCopying, makeup]);
|
||||||
return (
|
|
||||||
<div className="relative">
|
return (
|
||||||
<button className="pill button gap-2" onClick={handleClick}>
|
<div className="relative">
|
||||||
<Icon icon="mdi:filter" className="text-xl" />
|
<button className="pill button gap-2" onClick={handleClick}>
|
||||||
Filter
|
<Icon icon="mdi:filter" className="text-xl" />
|
||||||
<span className="w-5">({filterCount})</span>
|
Filter
|
||||||
</button>
|
<span className="w-5">({filterCount})</span>
|
||||||
|
</button>
|
||||||
{isOpen && (
|
|
||||||
<div
|
{isOpen && (
|
||||||
className={`absolute w-80 left-0 top-full mt-8 z-40 flex flex-col items-center bg-orange-50
|
<div
|
||||||
border-2 border-amber-500 rounded-2xl shadow-lg p-4 transition-discrete duration-200 ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`}
|
className={`absolute w-80 left-0 top-full mt-8 z-40 flex flex-col items-center bg-orange-50
|
||||||
>
|
border-2 border-amber-500 rounded-2xl shadow-lg p-4 transition-discrete duration-200 ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`}
|
||||||
{/* Arrow */}
|
>
|
||||||
<div className="absolute bottom-full left-1/6 -translate-x-1/2 size-0 border-8 border-transparent border-b-amber-500"></div>
|
{/* Arrow */}
|
||||||
|
<div className="absolute bottom-full left-1/6 -translate-x-1/2 size-0 border-8 border-transparent border-b-amber-500"></div>
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mb-2">
|
|
||||||
<hr className="grow border-zinc-300" />
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mb-2">
|
||||||
<span>Platform</span>
|
<hr className="grow border-zinc-300" />
|
||||||
<hr className="grow border-zinc-300" />
|
<span>Platform</span>
|
||||||
</div>
|
<hr className="grow border-zinc-300" />
|
||||||
<PlatformSelect />
|
</div>
|
||||||
|
<PlatformSelect />
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
|
|
||||||
<hr className="grow border-zinc-300" />
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
|
||||||
<span>Gender</span>
|
<hr className="grow border-zinc-300" />
|
||||||
<hr className="grow border-zinc-300" />
|
<span>Gender</span>
|
||||||
</div>
|
<hr className="grow border-zinc-300" />
|
||||||
<GenderSelect />
|
</div>
|
||||||
|
<GenderSelect />
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
|
|
||||||
<hr className="grow border-zinc-300" />
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
|
||||||
<span>Tags Include</span>
|
<hr className="grow border-zinc-300" />
|
||||||
<hr className="grow border-zinc-300" />
|
<span>Tags Include</span>
|
||||||
</div>
|
<hr className="grow border-zinc-300" />
|
||||||
<TagFilter />
|
</div>
|
||||||
|
<TagFilter />
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
|
|
||||||
<hr className="grow border-zinc-300" />
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-2">
|
||||||
<span>Tags Exclude</span>
|
<hr className="grow border-zinc-300" />
|
||||||
<hr className="grow border-zinc-300" />
|
<span>Tags Exclude</span>
|
||||||
</div>
|
<hr className="grow border-zinc-300" />
|
||||||
<TagFilter isExclude />
|
</div>
|
||||||
|
<TagFilter isExclude />
|
||||||
{platform !== "THREE_DS" && (
|
|
||||||
<>
|
{platform !== "THREE_DS" && (
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
|
<>
|
||||||
<hr className="grow border-zinc-300" />
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
|
||||||
<span>Face Paint</span>
|
<hr className="grow border-zinc-300" />
|
||||||
<hr className="grow border-zinc-300" />
|
<span>Face Paint</span>
|
||||||
</div>
|
<hr className="grow border-zinc-300" />
|
||||||
<MakeupSelect />
|
</div>
|
||||||
</>
|
<MakeupSelect />
|
||||||
)}
|
</>
|
||||||
|
)}
|
||||||
<OtherFilters />
|
|
||||||
</div>
|
<OtherFilters />
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,73 @@
|
||||||
import { useState, useTransition } from "react";
|
import { useState, useTransition } from "react";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared";
|
import type { MiiGender, MiiPlatform } from "@tomodachi-share/shared";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router";
|
||||||
export default function GenderSelect() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function GenderSelect() {
|
||||||
const [, startTransition] = useTransition();
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null);
|
const [, startTransition] = useTransition();
|
||||||
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
|
|
||||||
|
const [selected, setSelected] = useState<MiiGender | null>((searchParams.get("gender") as MiiGender) ?? null);
|
||||||
const handleClick = (gender: MiiGender) => {
|
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
|
||||||
const filter = selected === gender ? null : gender;
|
|
||||||
setSelected(filter);
|
const handleClick = (gender: MiiGender) => {
|
||||||
|
const filter = selected === gender ? null : gender;
|
||||||
const params = new URLSearchParams(searchParams);
|
setSelected(filter);
|
||||||
params.set("page", "1");
|
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
if (filter) {
|
params.set("page", "1");
|
||||||
params.set("gender", filter);
|
|
||||||
} else {
|
if (filter) {
|
||||||
params.delete("gender");
|
params.set("gender", filter);
|
||||||
}
|
} else {
|
||||||
|
params.delete("gender");
|
||||||
startTransition(() => {
|
}
|
||||||
// router.push(`?${params.toString()}`, { scroll: false });
|
|
||||||
window.location.href = `?${params.toString()}`;
|
startTransition(() => {
|
||||||
});
|
navigate(`?${params.toString()}`);
|
||||||
};
|
});
|
||||||
|
};
|
||||||
return (
|
|
||||||
<div className="flex gap-0.5 w-fit">
|
return (
|
||||||
<button
|
<div className="flex gap-0.5 w-fit">
|
||||||
onClick={() => handleClick("MALE")}
|
<button
|
||||||
aria-label="Filter for Male Miis"
|
onClick={() => handleClick("MALE")}
|
||||||
data-tooltip-span
|
aria-label="Filter for Male Miis"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
||||||
}`}
|
selected === "MALE" ? "bg-blue-100 border-blue-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-blue-400! border-blue-400! before:border-b-blue-400!">Male</div>
|
>
|
||||||
<Icon icon="foundation:male" className="text-blue-400" />
|
<div className="tooltip bg-blue-400! border-blue-400! before:border-b-blue-400!">Male</div>
|
||||||
</button>
|
<Icon icon="foundation:male" className="text-blue-400" />
|
||||||
|
</button>
|
||||||
<button
|
|
||||||
onClick={() => handleClick("FEMALE")}
|
<button
|
||||||
aria-label="Filter for Female Miis"
|
onClick={() => handleClick("FEMALE")}
|
||||||
data-tooltip-span
|
aria-label="Filter for Female Miis"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
||||||
}`}
|
selected === "FEMALE" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Female</div>
|
>
|
||||||
<Icon icon="foundation:female" className="text-pink-400" />
|
<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Female</div>
|
||||||
</button>
|
<Icon icon="foundation:female" className="text-pink-400" />
|
||||||
|
</button>
|
||||||
{platform !== "THREE_DS" && (
|
|
||||||
<button
|
{platform !== "THREE_DS" && (
|
||||||
onClick={() => handleClick("NONBINARY")}
|
<button
|
||||||
aria-label="Filter for Nonbinary Miis"
|
onClick={() => handleClick("NONBINARY")}
|
||||||
data-tooltip-span
|
aria-label="Filter for Nonbinary Miis"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
||||||
}`}
|
selected === "NONBINARY" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Nonbinary</div>
|
>
|
||||||
<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
|
<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Nonbinary</div>
|
||||||
</button>
|
<Icon icon="mdi:gender-non-binary" className="text-purple-400" />
|
||||||
)}
|
</button>
|
||||||
</div>
|
)}
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,73 @@
|
||||||
import { useState, useTransition } from "react";
|
import { useState, useTransition } from "react";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import type { MiiMakeup } from "@tomodachi-share/shared";
|
import type { MiiMakeup } from "@tomodachi-share/shared";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router";
|
||||||
export default function MakeupSelect() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function MakeupSelect() {
|
||||||
const [, startTransition] = useTransition();
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const [selected, setSelected] = useState<MiiMakeup | null>((searchParams.get("makeup") as MiiMakeup) ?? null);
|
const [, startTransition] = useTransition();
|
||||||
|
|
||||||
const handleClick = (makeup: MiiMakeup) => {
|
const [selected, setSelected] = useState<MiiMakeup | null>((searchParams.get("makeup") as MiiMakeup) ?? null);
|
||||||
const filter = selected === makeup ? null : makeup;
|
|
||||||
setSelected(filter);
|
const handleClick = (makeup: MiiMakeup) => {
|
||||||
|
const filter = selected === makeup ? null : makeup;
|
||||||
const params = new URLSearchParams(searchParams);
|
setSelected(filter);
|
||||||
params.set("page", "1");
|
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
if (filter) {
|
params.set("page", "1");
|
||||||
params.set("makeup", filter);
|
|
||||||
} else {
|
if (filter) {
|
||||||
params.delete("makeup");
|
params.set("makeup", filter);
|
||||||
}
|
} else {
|
||||||
|
params.delete("makeup");
|
||||||
startTransition(() => {
|
}
|
||||||
// router.push(`?${params.toString()}`, { scroll: false });
|
|
||||||
window.location.href = `?${params.toString()}`;
|
startTransition(() => {
|
||||||
});
|
navigate(`?${params.toString()}`);
|
||||||
};
|
});
|
||||||
|
};
|
||||||
return (
|
|
||||||
<div className="flex gap-0.5 w-fit">
|
return (
|
||||||
{/* Full Makeup */}
|
<div className="flex gap-0.5 w-fit">
|
||||||
<button
|
{/* Full Makeup */}
|
||||||
onClick={() => handleClick("FULL")}
|
<button
|
||||||
aria-label="Filter for Full Face Paint"
|
onClick={() => handleClick("FULL")}
|
||||||
data-tooltip-span
|
aria-label="Filter for Full Face Paint"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
||||||
}`}
|
selected === "FULL" ? "bg-pink-100 border-pink-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Full Face Paint</div>
|
>
|
||||||
<Icon icon="mdi:palette" className="text-pink-400" />
|
<div className="tooltip bg-pink-400! border-pink-400! before:border-b-pink-400!">Full Face Paint</div>
|
||||||
</button>
|
<Icon icon="mdi:palette" className="text-pink-400" />
|
||||||
|
</button>
|
||||||
{/* Partial Makeup */}
|
|
||||||
<button
|
{/* Partial Makeup */}
|
||||||
onClick={() => handleClick("PARTIAL")}
|
<button
|
||||||
aria-label="Filter for Partial Face Paint"
|
onClick={() => handleClick("PARTIAL")}
|
||||||
data-tooltip-span
|
aria-label="Filter for Partial Face Paint"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
||||||
}`}
|
selected === "PARTIAL" ? "bg-purple-100 border-purple-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Partial Face Paint</div>
|
>
|
||||||
<Icon icon="mdi:lipstick" className="text-purple-400" />
|
<div className="tooltip bg-purple-400! border-purple-400! before:border-b-purple-400!">Partial Face Paint</div>
|
||||||
</button>
|
<Icon icon="mdi:lipstick" className="text-purple-400" />
|
||||||
|
</button>
|
||||||
{/* No Makeup */}
|
|
||||||
<button
|
{/* No Makeup */}
|
||||||
onClick={() => handleClick("NONE")}
|
<button
|
||||||
aria-label="Filter for No Face Paint"
|
onClick={() => handleClick("NONE")}
|
||||||
data-tooltip-span
|
aria-label="Filter for No Face Paint"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-5xl border-2 transition-all ${
|
||||||
}`}
|
selected === "NONE" ? "bg-gray-200 border-gray-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-gray-400! border-gray-400! before:border-b-gray-400!">No Face Paint</div>
|
>
|
||||||
<Icon icon="codex:cross" className="text-gray-400" />
|
<div className="tooltip bg-gray-400! border-gray-400! before:border-b-gray-400!">No Face Paint</div>
|
||||||
</button>
|
<Icon icon="codex:cross" className="text-gray-400" />
|
||||||
</div>
|
</button>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
|
||||||
|
|
||||||
import LikeButton from "../../like-button";
|
import LikeButton from "../../like-button";
|
||||||
import DeleteMiiButton from "../delete-mii-button";
|
import DeleteMiiButton from "../delete-mii-button";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
|
// miis: Prisma.MiiGetPayload<{ include: { user: { select: { id: true; name: true } }; _count: { select: { likedBy: true } } } }>[];
|
||||||
|
|
@ -25,7 +26,7 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<a href={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
|
<Link to={`/mii/${mii.id}`} className="overflow-hidden rounded-xl bg-zinc-300 shrink-0">
|
||||||
<img
|
<img
|
||||||
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
|
src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`}
|
||||||
width={240}
|
width={240}
|
||||||
|
|
@ -33,13 +34,13 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
||||||
alt="mii image"
|
alt="mii image"
|
||||||
className="w-full h-auto aspect-3/2 object-contain"
|
className="w-full h-auto aspect-3/2 object-contain"
|
||||||
/>
|
/>
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
<div className="p-4 flex flex-col gap-1 h-full">
|
<div className="p-4 flex flex-col gap-1 h-full">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<a href={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
|
<Link to={`/mii/${mii.id}`} className="relative font-bold text-2xl line-clamp-1 w-full text-ellipsis wrap-break-word" title={mii.name}>
|
||||||
{mii.name}
|
{mii.name}
|
||||||
</a>
|
</Link>
|
||||||
<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="text-[1.25rem] opacity-25">
|
<div title={mii.platform === "SWITCH" ? "Switch" : "3DS"} className="text-[1.25rem] opacity-25">
|
||||||
{mii.platform === "SWITCH" ? (
|
{mii.platform === "SWITCH" ? (
|
||||||
<Icon icon="cib:nintendo-switch" className="text-red-400" />
|
<Icon icon="cib:nintendo-switch" className="text-red-400" />
|
||||||
|
|
@ -50,9 +51,9 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
||||||
</div>
|
</div>
|
||||||
<div id="tags" className="flex flex-wrap gap-1">
|
<div id="tags" className="flex flex-wrap gap-1">
|
||||||
{mii.tags.map((tag: string) => (
|
{mii.tags.map((tag: string) => (
|
||||||
<a href={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
<Link to={`?tags=${tag}`} key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
|
||||||
{tag}
|
{tag}
|
||||||
</a>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -60,16 +61,16 @@ export default function MiiGrid({ miis, userId, parentPage }: Props) {
|
||||||
<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={false} abbreviate />
|
<LikeButton likes={mii._count.likedBy} miiId={mii.id} isLiked={false} abbreviate />
|
||||||
|
|
||||||
{!userId && (
|
{!userId && (
|
||||||
<a href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
|
<Link to={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
@{mii.user?.name}
|
@{mii.user?.name}
|
||||||
</a>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* {userId && Number(session.data?.user?.id) == userId && (
|
{/* {userId && Number(session.data?.user?.id) == userId && (
|
||||||
<div className="flex gap-1 text-2xl justify-end text-zinc-400">
|
<div className="flex gap-1 text-2xl justify-end text-zinc-400">
|
||||||
<a href={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
|
<Link to={`/edit/${mii.id}`} title="Edit Mii" aria-label="Edit Mii" data-tooltip="Edit">
|
||||||
<Icon icon="mdi:pencil" />
|
<Icon icon="mdi:pencil" />
|
||||||
</a>
|
</Link>
|
||||||
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
|
<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy} />
|
||||||
</div>
|
</div>
|
||||||
)} */}
|
)} */}
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,80 @@
|
||||||
import type { MiiPlatform } from "@tomodachi-share/shared";
|
import type { MiiPlatform } from "@tomodachi-share/shared";
|
||||||
import { type ChangeEvent, useState, useTransition } from "react";
|
import { type ChangeEvent, useState, useTransition } from "react";
|
||||||
|
import { useLocation, useNavigate, useSearchParams } from "react-router";
|
||||||
export default function OtherFilters() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function OtherFilters() {
|
||||||
const [, startTransition] = useTransition();
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
|
const [searchParams] = useSearchParams();
|
||||||
const [allowCopying, setAllowCopying] = useState<boolean>((searchParams.get("allowCopying") as unknown as boolean) ?? false);
|
const [, startTransition] = useTransition();
|
||||||
const [quarantined, setQuarantined] = useState<boolean>((searchParams.get("quarantined") as unknown as boolean) ?? false);
|
|
||||||
|
const platform = (searchParams.get("platform") as MiiPlatform) || undefined;
|
||||||
const handleChangeAllowCopying = (e: ChangeEvent<HTMLInputElement>) => {
|
const [allowCopying, setAllowCopying] = useState<boolean>((searchParams.get("allowCopying") as unknown as boolean) ?? false);
|
||||||
setAllowCopying(e.target.checked);
|
const [quarantined, setQuarantined] = useState<boolean>((searchParams.get("quarantined") as unknown as boolean) ?? false);
|
||||||
|
|
||||||
const params = new URLSearchParams(searchParams);
|
const handleChangeAllowCopying = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
params.set("page", "1");
|
setAllowCopying(e.target.checked);
|
||||||
|
|
||||||
if (!allowCopying) {
|
const params = new URLSearchParams(searchParams);
|
||||||
params.set("allowCopying", "true");
|
params.set("page", "1");
|
||||||
} else {
|
|
||||||
params.delete("allowCopying");
|
if (!allowCopying) {
|
||||||
}
|
params.set("allowCopying", "true");
|
||||||
|
} else {
|
||||||
startTransition(() => {
|
params.delete("allowCopying");
|
||||||
// router.push(`?${params.toString()}`, { scroll: false });
|
}
|
||||||
window.location.href = `?${params.toString()}`;
|
|
||||||
});
|
startTransition(() => {
|
||||||
};
|
navigate(`?${params.toString()}`);
|
||||||
|
});
|
||||||
const handleChangeQuarantined = (e: ChangeEvent<HTMLInputElement>) => {
|
};
|
||||||
setQuarantined(e.target.checked);
|
|
||||||
|
const handleChangeQuarantined = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
const params = new URLSearchParams(searchParams);
|
setQuarantined(e.target.checked);
|
||||||
params.set("page", "1");
|
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
if (!quarantined) {
|
params.set("page", "1");
|
||||||
params.set("quarantined", "true");
|
|
||||||
} else {
|
if (!quarantined) {
|
||||||
params.delete("quarantined");
|
params.set("quarantined", "true");
|
||||||
}
|
} else {
|
||||||
|
params.delete("quarantined");
|
||||||
startTransition(() => {
|
}
|
||||||
// router.push(`?${params.toString()}`, { scroll: false });
|
|
||||||
window.location.href = `?${params.toString()}`;
|
startTransition(() => {
|
||||||
});
|
navigate(`?${params.toString()}`);
|
||||||
};
|
});
|
||||||
|
};
|
||||||
const showAllowCopying = platform !== "SWITCH";
|
|
||||||
const showQuarantined = !location.pathname.startsWith("/profile");
|
const showAllowCopying = platform !== "SWITCH";
|
||||||
|
const showQuarantined = !location.pathname.startsWith("/profile");
|
||||||
if (!showAllowCopying && !showQuarantined) return null;
|
|
||||||
|
if (!showAllowCopying && !showQuarantined) return null;
|
||||||
return (
|
|
||||||
<>
|
return (
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
|
<>
|
||||||
<hr className="grow border-zinc-300" />
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium w-full mt-2 mb-1">
|
||||||
<span>Other</span>
|
<hr className="grow border-zinc-300" />
|
||||||
<hr className="grow border-zinc-300" />
|
<span>Other</span>
|
||||||
</div>
|
<hr className="grow border-zinc-300" />
|
||||||
|
</div>
|
||||||
{showAllowCopying && (
|
|
||||||
<div className="flex justify-between items-center w-full mb-1">
|
{showAllowCopying && (
|
||||||
<label htmlFor="allowCopying" className="text-sm">
|
<div className="flex justify-between items-center w-full mb-1">
|
||||||
Allow Copying
|
<label htmlFor="allowCopying" className="text-sm">
|
||||||
</label>
|
Allow Copying
|
||||||
<input type="checkbox" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
|
</label>
|
||||||
</div>
|
<input type="checkbox" id="allowCopying" className="checkbox-alt" checked={allowCopying} onChange={handleChangeAllowCopying} />
|
||||||
)}
|
</div>
|
||||||
{showQuarantined && (
|
)}
|
||||||
<div className="flex justify-between items-center w-full">
|
{showQuarantined && (
|
||||||
<label htmlFor="quarantined" className="text-sm">
|
<div className="flex justify-between items-center w-full">
|
||||||
Show Controversial Miis
|
<label htmlFor="quarantined" className="text-sm">
|
||||||
</label>
|
Show Controversial Miis
|
||||||
<input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={handleChangeQuarantined} />
|
</label>
|
||||||
</div>
|
<input type="checkbox" id="quarantined" className="checkbox-alt" checked={quarantined} onChange={handleChangeQuarantined} />
|
||||||
)}
|
</div>
|
||||||
</>
|
)}
|
||||||
);
|
</>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,56 @@
|
||||||
import { useState, useTransition } from "react";
|
import { useState, useTransition } from "react";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import type { MiiPlatform } from "@tomodachi-share/shared";
|
import type { MiiPlatform } from "@tomodachi-share/shared";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router";
|
||||||
export default function PlatformSelect() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function PlatformSelect() {
|
||||||
const [, startTransition] = useTransition();
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null);
|
const [, startTransition] = useTransition();
|
||||||
|
|
||||||
const handleClick = (platform: MiiPlatform) => {
|
const [selected, setSelected] = useState<MiiPlatform | null>((searchParams.get("platform") as MiiPlatform) ?? null);
|
||||||
const filter = selected === platform ? null : platform;
|
|
||||||
setSelected(filter);
|
const handleClick = (platform: MiiPlatform) => {
|
||||||
|
const filter = selected === platform ? null : platform;
|
||||||
const params = new URLSearchParams(searchParams);
|
setSelected(filter);
|
||||||
if (filter) {
|
|
||||||
params.set("platform", filter);
|
const params = new URLSearchParams(searchParams);
|
||||||
} else {
|
if (filter) {
|
||||||
params.delete("platform");
|
params.set("platform", filter);
|
||||||
}
|
} else {
|
||||||
|
params.delete("platform");
|
||||||
startTransition(() => {
|
}
|
||||||
// router.push(`?${params.toString()}`);
|
|
||||||
window.location.href = `?${params.toString()}`;
|
startTransition(() => {
|
||||||
});
|
navigate(`?${params.toString()}`);
|
||||||
};
|
});
|
||||||
|
};
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-2 gap-0.5 w-fit">
|
return (
|
||||||
<button
|
<div className="grid grid-cols-2 gap-0.5 w-fit">
|
||||||
onClick={() => handleClick("THREE_DS")}
|
<button
|
||||||
aria-label="Filter for 3DS Miis"
|
onClick={() => handleClick("THREE_DS")}
|
||||||
data-tooltip-span
|
aria-label="Filter for 3DS Miis"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "THREE_DS" ? "bg-sky-100 border-sky-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
|
||||||
}`}
|
selected === "THREE_DS" ? "bg-sky-100 border-sky-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-sky-400! border-sky-400! before:border-b-sky-400!">3DS</div>
|
>
|
||||||
<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
|
<div className="tooltip bg-sky-400! border-sky-400! before:border-b-sky-400!">3DS</div>
|
||||||
</button>
|
<Icon icon="cib:nintendo-3ds" className="text-sky-400" />
|
||||||
|
</button>
|
||||||
<button
|
|
||||||
onClick={() => handleClick("SWITCH")}
|
<button
|
||||||
aria-label="Filter for Switch Miis"
|
onClick={() => handleClick("SWITCH")}
|
||||||
data-tooltip-span
|
aria-label="Filter for Switch Miis"
|
||||||
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
|
data-tooltip-span
|
||||||
selected === "SWITCH" ? "bg-red-100 border-red-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
className={`cursor-pointer rounded-xl flex justify-center items-center size-13 text-3xl border-2 transition-all ${
|
||||||
}`}
|
selected === "SWITCH" ? "bg-red-100 border-red-400 shadow-md" : "bg-white border-gray-300 hover:border-gray-400"
|
||||||
>
|
}`}
|
||||||
<div className="tooltip bg-red-400! border-red-400! before:border-b-red-400!">Switch</div>
|
>
|
||||||
<Icon icon="cib:nintendo-switch" className="text-red-400" />
|
<div className="tooltip bg-red-400! border-red-400! before:border-b-red-400!">Switch</div>
|
||||||
</button>
|
<Icon icon="cib:nintendo-switch" className="text-red-400" />
|
||||||
</div>
|
</button>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,58 @@
|
||||||
import { useTransition } from "react";
|
import { useTransition } from "react";
|
||||||
import { useSelect } from "downshift";
|
import { useSelect } from "downshift";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router";
|
||||||
type Sort = "likes" | "newest" | "oldest" | "random";
|
|
||||||
|
type Sort = "likes" | "newest" | "oldest";
|
||||||
const items = ["likes", "newest", "oldest", "random"];
|
|
||||||
|
const items = ["likes", "newest", "oldest"];
|
||||||
export default function SortSelect() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function SortSelect() {
|
||||||
const [, startTransition] = useTransition();
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const currentSort = (searchParams.get("sort") as Sort) || "newest";
|
const [, startTransition] = useTransition();
|
||||||
|
|
||||||
const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
|
const currentSort = (searchParams.get("sort") as Sort) || "newest";
|
||||||
items,
|
|
||||||
selectedItem: currentSort,
|
const { isOpen, getToggleButtonProps, getMenuProps, getItemProps, highlightedIndex, selectedItem } = useSelect({
|
||||||
onSelectedItemChange: ({ selectedItem }) => {
|
items,
|
||||||
if (!selectedItem) return;
|
selectedItem: currentSort,
|
||||||
|
onSelectedItemChange: ({ selectedItem }) => {
|
||||||
const params = new URLSearchParams(searchParams);
|
if (!selectedItem) return;
|
||||||
params.set("page", "1");
|
|
||||||
params.set("sort", selectedItem);
|
const params = new URLSearchParams(searchParams);
|
||||||
|
params.set("page", "1");
|
||||||
if (selectedItem == "random") {
|
params.set("sort", selectedItem);
|
||||||
params.set("seed", Math.floor(Math.random() * 1_000_000_000).toString());
|
|
||||||
}
|
startTransition(() => {
|
||||||
|
navigate(`?${params.toString()}`);
|
||||||
startTransition(() => {
|
});
|
||||||
// router.push(`?${params.toString()}`, { scroll: false });
|
},
|
||||||
window.location.href = `?${params.toString()}`;
|
});
|
||||||
});
|
|
||||||
},
|
return (
|
||||||
});
|
<div className="relative w-fit">
|
||||||
|
{/* Toggle button to open the dropdown */}
|
||||||
return (
|
<button type="button" {...getToggleButtonProps()} aria-label="Sort dropdown" className="pill input w-full gap-1 justify-between! text-nowrap">
|
||||||
<div className="relative w-fit">
|
<span>Sort by </span>
|
||||||
{/* Toggle button to open the dropdown */}
|
{selectedItem || "Select a way to sort"}
|
||||||
<button type="button" {...getToggleButtonProps()} aria-label="Sort dropdown" className="pill input w-full gap-1 justify-between! text-nowrap">
|
<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
|
||||||
<span>Sort by </span>
|
</button>
|
||||||
{selectedItem || "Select a way to sort"}
|
|
||||||
<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
|
{/* Dropdown menu */}
|
||||||
</button>
|
<ul
|
||||||
|
{...getMenuProps()}
|
||||||
{/* Dropdown menu */}
|
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
|
||||||
<ul
|
isOpen ? "block" : "hidden"
|
||||||
{...getMenuProps()}
|
}`}
|
||||||
className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
|
>
|
||||||
isOpen ? "block" : "hidden"
|
{isOpen &&
|
||||||
}`}
|
items.map((item, index) => (
|
||||||
>
|
<li key={item} {...getItemProps({ item, index })} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}>
|
||||||
{isOpen &&
|
{item}
|
||||||
items.map((item, index) => (
|
</li>
|
||||||
<li key={item} {...getItemProps({ item, index })} className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}>
|
))}
|
||||||
{item}
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
))}
|
);
|
||||||
</ul>
|
}
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,60 @@
|
||||||
import { useEffect, useMemo, useState, useTransition } from "react";
|
import { useEffect, useMemo, useState, useTransition } from "react";
|
||||||
import TagSelector from "../../tag-selector";
|
import TagSelector from "../../tag-selector";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router";
|
||||||
interface Props {
|
|
||||||
isExclude?: boolean;
|
interface Props {
|
||||||
}
|
isExclude?: boolean;
|
||||||
|
}
|
||||||
export default function TagFilter({ isExclude }: Props) {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function TagFilter({ isExclude }: Props) {
|
||||||
const [, startTransition] = useTransition();
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
|
const [, startTransition] = useTransition();
|
||||||
const preexistingTags = useMemo(
|
|
||||||
() =>
|
const rawTags = searchParams.get(isExclude ? "exclude" : "tags") || "";
|
||||||
rawTags
|
const preexistingTags = useMemo(
|
||||||
? rawTags
|
() =>
|
||||||
.split(",")
|
rawTags
|
||||||
.map((tag) => tag.trim())
|
? rawTags
|
||||||
.filter((tag) => tag.length > 0)
|
.split(",")
|
||||||
: [],
|
.map((tag) => tag.trim())
|
||||||
[rawTags],
|
.filter((tag) => tag.length > 0)
|
||||||
);
|
: [],
|
||||||
|
[rawTags],
|
||||||
const [tags, setTags] = useState<string[]>(preexistingTags);
|
);
|
||||||
|
|
||||||
// Sync state if the URL tags change (e.g. via navigation)
|
const [tags, setTags] = useState<string[]>(preexistingTags);
|
||||||
useEffect(() => {
|
|
||||||
setTags(preexistingTags);
|
// Sync state if the URL tags change (e.g. via navigation)
|
||||||
}, [preexistingTags]);
|
useEffect(() => {
|
||||||
|
setTags(preexistingTags);
|
||||||
// Redirect automatically on tags change
|
}, [preexistingTags]);
|
||||||
useEffect(() => {
|
|
||||||
const urlTags = preexistingTags.join(",");
|
// Redirect automatically on tags change
|
||||||
const stateTags = tags.join(",");
|
useEffect(() => {
|
||||||
|
const urlTags = preexistingTags.join(",");
|
||||||
if (urlTags === stateTags) return;
|
const stateTags = tags.join(",");
|
||||||
|
|
||||||
const params = new URLSearchParams(searchParams);
|
if (urlTags === stateTags) return;
|
||||||
params.set("page", "1");
|
|
||||||
|
const params = new URLSearchParams(searchParams);
|
||||||
if (tags.length > 0) {
|
params.set("page", "1");
|
||||||
params.set(isExclude ? "exclude" : "tags", stateTags);
|
|
||||||
} else {
|
if (tags.length > 0) {
|
||||||
params.delete(isExclude ? "exclude" : "tags");
|
params.set(isExclude ? "exclude" : "tags", stateTags);
|
||||||
}
|
} else {
|
||||||
|
params.delete(isExclude ? "exclude" : "tags");
|
||||||
startTransition(() => {
|
}
|
||||||
// router.push(`?${params.toString()}`, { scroll: false });
|
|
||||||
window.location.href = `?${params.toString()}`;
|
startTransition(() => {
|
||||||
});
|
navigate(`?${params.toString()}`);
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
});
|
||||||
}, [tags]);
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [tags]);
|
||||||
return (
|
|
||||||
<div className="w-72">
|
return (
|
||||||
<TagSelector tags={tags} setTags={setTags} isExclude={isExclude} />
|
<div className="w-72">
|
||||||
</div>
|
<TagSelector tags={tags} setTags={setTags} isExclude={isExclude} />
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
miiId: number;
|
miiId: number;
|
||||||
|
|
@ -128,15 +129,15 @@ export default function ShareMiiButton({ miiId }: Props) {
|
||||||
<div className="flex justify-end gap-2 mt-4">
|
<div className="flex justify-end gap-2 mt-4">
|
||||||
<div className="flex gap-2 w-full">
|
<div className="flex gap-2 w-full">
|
||||||
{/* Save button */}
|
{/* Save button */}
|
||||||
<a
|
<Link
|
||||||
href={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`}
|
to={`${import.meta.env.VITE_API_URL}/mii/${miiId}/image?type=metadata`}
|
||||||
className="pill button p-0! aspect-square size-11 cursor-pointer text-xl"
|
className="pill button p-0! aspect-square size-11 cursor-pointer text-xl"
|
||||||
aria-label="Save Image"
|
aria-label="Save Image"
|
||||||
data-tooltip="Save Image"
|
data-tooltip="Save Image"
|
||||||
download={"hello.png"}
|
download={"hello.png"}
|
||||||
>
|
>
|
||||||
<Icon icon="material-symbols:save-rounded" />
|
<Icon icon="material-symbols:save-rounded" />
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
{/* Copy button */}
|
{/* Copy button */}
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,97 @@
|
||||||
import { useCallback, useMemo } from "react";
|
import { useCallback, useMemo } from "react";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link, useLocation, useSearchParams } from "react-router";
|
||||||
interface Props {
|
|
||||||
lastPage: number;
|
interface Props {
|
||||||
}
|
lastPage: number;
|
||||||
|
}
|
||||||
export default function Pagination({ lastPage }: Props) {
|
|
||||||
const searchParams = new URLSearchParams(location.search);
|
export default function Pagination({ lastPage }: Props) {
|
||||||
const page = Number(searchParams.get("page") ?? 1);
|
const location = useLocation();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const createPageUrl = useCallback(
|
const page = Number(searchParams.get("page") ?? 1);
|
||||||
(pageNumber: number) => {
|
|
||||||
const params = new URLSearchParams(searchParams);
|
const createPageUrl = useCallback(
|
||||||
params.set("page", pageNumber.toString());
|
(pageNumber: number) => {
|
||||||
return `${location.pathname}?${params.toString()}`;
|
const params = new URLSearchParams(searchParams);
|
||||||
},
|
params.set("page", pageNumber.toString());
|
||||||
[searchParams, location.pathname],
|
return `${location.pathname}?${params.toString()}`;
|
||||||
);
|
},
|
||||||
|
[searchParams, location.pathname],
|
||||||
const numbers = useMemo(() => {
|
);
|
||||||
const result = [];
|
|
||||||
|
const numbers = useMemo(() => {
|
||||||
// Always show 5 pages, centering around the current page when possible
|
const result = [];
|
||||||
const start = Math.max(1, Math.min(page - 2, lastPage - 4));
|
|
||||||
const end = Math.min(lastPage, start + 4);
|
// Always show 5 pages, centering around the current page when possible
|
||||||
|
const start = Math.max(1, Math.min(page - 2, lastPage - 4));
|
||||||
for (let i = start; i <= end; i++) result.push(i);
|
const end = Math.min(lastPage, start + 4);
|
||||||
|
|
||||||
return result;
|
for (let i = start; i <= end; i++) result.push(i);
|
||||||
}, [page, lastPage]);
|
|
||||||
|
return result;
|
||||||
return (
|
}, [page, lastPage]);
|
||||||
<div className="flex justify-center items-center w-full mt-8">
|
|
||||||
{/* Go to first page */}
|
return (
|
||||||
<a
|
<div className="flex justify-center items-center w-full mt-8">
|
||||||
href={page === 1 ? "#" : createPageUrl(1)}
|
{/* Go to first page */}
|
||||||
aria-label="Go to First Page"
|
<Link
|
||||||
aria-disabled={page === 1}
|
to={page === 1 ? "#" : createPageUrl(1)}
|
||||||
tabIndex={page === 1 ? -1 : undefined}
|
aria-label="Go to First Page"
|
||||||
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
aria-disabled={page === 1}
|
||||||
>
|
tabIndex={page === 1 ? -1 : undefined}
|
||||||
<Icon icon="stash:chevron-double-left" />
|
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
||||||
</a>
|
>
|
||||||
|
<Icon icon="stash:chevron-double-left" />
|
||||||
{/* Previous page */}
|
</Link>
|
||||||
<a
|
|
||||||
href={page === 1 ? "#" : createPageUrl(page - 1)}
|
{/* Previous page */}
|
||||||
aria-label="Go to Previous Page"
|
<Link
|
||||||
aria-disabled={page === 1}
|
to={page === 1 ? "#" : createPageUrl(page - 1)}
|
||||||
tabIndex={page === 1 ? -1 : undefined}
|
aria-label="Go to Previous Page"
|
||||||
className={`pill bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
aria-disabled={page === 1}
|
||||||
>
|
tabIndex={page === 1 ? -1 : undefined}
|
||||||
<Icon icon="stash:chevron-left" />
|
className={`pill bg-orange-100! p-0.5! aspect-square text-2xl ${page === 1 ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
||||||
</a>
|
>
|
||||||
|
<Icon icon="stash:chevron-left" />
|
||||||
{/* Page numbers */}
|
</Link>
|
||||||
<div className="flex mx-2">
|
|
||||||
{numbers.map((number) => (
|
{/* Page numbers */}
|
||||||
<a
|
<div className="flex mx-2">
|
||||||
key={number}
|
{numbers.map((number) => (
|
||||||
href={createPageUrl(number)}
|
<Link
|
||||||
aria-label={`Go to Page ${number}`}
|
key={number}
|
||||||
aria-current={number === page ? "page" : undefined}
|
to={createPageUrl(number)}
|
||||||
className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
|
aria-label={`Go to Page ${number}`}
|
||||||
>
|
aria-current={number === page ? "page" : undefined}
|
||||||
{number}
|
className={`pill p-0! w-8 h-8 text-center rounded-md! ${number == page ? "bg-orange-400!" : "bg-orange-100! hover:bg-orange-400!"}`}
|
||||||
</a>
|
>
|
||||||
))}
|
{number}
|
||||||
</div>
|
</Link>
|
||||||
|
))}
|
||||||
{/* Next page */}
|
</div>
|
||||||
<a
|
|
||||||
href={page >= lastPage ? "#" : createPageUrl(page + 1)}
|
{/* Next page */}
|
||||||
aria-label="Go to Next Page"
|
<Link
|
||||||
aria-disabled={page >= lastPage}
|
to={page >= lastPage ? "#" : createPageUrl(page + 1)}
|
||||||
tabIndex={page >= lastPage ? -1 : undefined}
|
aria-label="Go to Next Page"
|
||||||
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
aria-disabled={page >= lastPage}
|
||||||
>
|
tabIndex={page >= lastPage ? -1 : undefined}
|
||||||
<Icon icon="stash:chevron-right" />
|
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
||||||
</a>
|
>
|
||||||
|
<Icon icon="stash:chevron-right" />
|
||||||
{/* Go to last page */}
|
</Link>
|
||||||
<a
|
|
||||||
href={page >= lastPage ? "#" : createPageUrl(lastPage)}
|
{/* Go to last page */}
|
||||||
aria-label="Go to Last Page"
|
<Link
|
||||||
aria-disabled={page >= lastPage}
|
to={page >= lastPage ? "#" : createPageUrl(lastPage)}
|
||||||
tabIndex={page >= lastPage ? -1 : undefined}
|
aria-label="Go to Last Page"
|
||||||
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
aria-disabled={page >= lastPage}
|
||||||
>
|
tabIndex={page >= lastPage ? -1 : undefined}
|
||||||
<Icon icon="stash:chevron-double-right" />
|
className={`pill button bg-orange-100! p-0.5! aspect-square text-2xl ${page >= lastPage ? "pointer-events-none opacity-50" : "hover:bg-orange-400!"}`}
|
||||||
</a>
|
>
|
||||||
</div>
|
<Icon icon="stash:chevron-double-right" />
|
||||||
);
|
</Link>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { Icon } from "@iconify/react";
|
||||||
import Description from "./description";
|
import Description from "./description";
|
||||||
import { useStore } from "@nanostores/react";
|
import { useStore } from "@nanostores/react";
|
||||||
import { session } from "../session";
|
import { session } from "../session";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user?: any;
|
user?: any;
|
||||||
|
|
@ -23,9 +24,9 @@ export default function ProfileInformation({ user, page }: Props) {
|
||||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
|
||||||
<div className="flex w-full gap-4 overflow-x-scroll">
|
<div className="flex w-full gap-4 overflow-x-scroll">
|
||||||
{/* Profile picture */}
|
{/* Profile picture */}
|
||||||
<a href={`/profile/${user.id}`} className="size-28 aspect-square">
|
<Link to={`/profile/${user.id}`} className="size-28 aspect-square">
|
||||||
<img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
|
<img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow max-md:self-center" />
|
||||||
</a>
|
</Link>
|
||||||
{/* User information */}
|
{/* User information */}
|
||||||
<div className="flex flex-col w-full relative py-3">
|
<div className="flex flex-col w-full relative py-3">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
|
@ -60,34 +61,34 @@ export default function ProfileInformation({ user, page }: Props) {
|
||||||
{/* Buttons */}
|
{/* Buttons */}
|
||||||
<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
|
<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
|
||||||
{!isOwnProfile && (
|
{!isOwnProfile && (
|
||||||
<a aria-label="Report User" href={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
|
<Link aria-label="Report User" to={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
|
||||||
<Icon icon="material-symbols:flag-rounded" />
|
<Icon icon="material-symbols:flag-rounded" />
|
||||||
<span>Report</span>
|
<span>Report</span>
|
||||||
</a>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{isOwnProfile && isAdmin && (
|
{isOwnProfile && isAdmin && (
|
||||||
<a aria-label="Go to Admin" href="/admin">
|
<Link aria-label="Go to Admin" to="/admin">
|
||||||
<Icon icon="mdi:shield-moon" />
|
<Icon icon="mdi:shield-moon" />
|
||||||
<span>Admin</span>
|
<span>Admin</span>
|
||||||
</a>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{/* {isOwnProfile && page !== "likes" && (
|
{/* {isOwnProfile && page !== "likes" && (
|
||||||
<a aria-label="Go to My Likes" href="/profile/likes">
|
<Link aria-label="Go to My Likes" to="/profile/likes">
|
||||||
<Icon icon="icon-park-solid:like" />
|
<Icon icon="icon-park-solid:like" />
|
||||||
<span>My Likes</span>
|
<span>My Likes</span>
|
||||||
</a>
|
</Link>
|
||||||
)} */}
|
)} */}
|
||||||
{isOwnProfile && page !== "settings" && (
|
{isOwnProfile && page !== "settings" && (
|
||||||
<a aria-label="Go to Settings" href="/profile/settings">
|
<Link aria-label="Go to Settings" to="/profile/settings">
|
||||||
<Icon icon="material-symbols:settings-rounded" />
|
<Icon icon="material-symbols:settings-rounded" />
|
||||||
<span>Settings</span>
|
<span>Settings</span>
|
||||||
</a>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{page && (
|
{page && (
|
||||||
<a aria-label="Go Back to Profile" href={`/profile/${user.id}`}>
|
<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
|
||||||
<Icon icon="tabler:chevron-left" />
|
<Icon icon="tabler:chevron-left" />
|
||||||
<span>Back</span>
|
<span>Back</span>
|
||||||
</a>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,83 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import SubmitButton from "../submit-button";
|
import SubmitButton from "../submit-button";
|
||||||
|
import { useNavigate } from "react-router";
|
||||||
export default function DeleteAccount() {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
export default function DeleteAccount() {
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const navigate = useNavigate();
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [error, setError] = useState<string | undefined>(undefined);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const [error, setError] = useState<string | undefined>(undefined);
|
||||||
const response = await fetch("/api/auth/delete", { method: "DELETE" });
|
|
||||||
if (!response.ok) {
|
const handleSubmit = async () => {
|
||||||
const { error } = await response.json();
|
const response = await fetch("/api/auth/delete", { method: "DELETE" });
|
||||||
setError(error);
|
if (!response.ok) {
|
||||||
return;
|
const { error } = await response.json();
|
||||||
}
|
setError(error);
|
||||||
|
return;
|
||||||
window.location.href = "/404";
|
}
|
||||||
};
|
|
||||||
|
navigate("/404");
|
||||||
const close = () => {
|
};
|
||||||
setIsVisible(false);
|
|
||||||
setTimeout(() => {
|
const close = () => {
|
||||||
setIsOpen(false);
|
setIsVisible(false);
|
||||||
}, 300);
|
setTimeout(() => {
|
||||||
};
|
setIsOpen(false);
|
||||||
|
}, 300);
|
||||||
useEffect(() => {
|
};
|
||||||
if (isOpen) {
|
|
||||||
// slight delay to trigger animation
|
useEffect(() => {
|
||||||
setTimeout(() => setIsVisible(true), 10);
|
if (isOpen) {
|
||||||
}
|
// slight delay to trigger animation
|
||||||
}, [isOpen]);
|
setTimeout(() => setIsVisible(true), 10);
|
||||||
|
}
|
||||||
return (
|
}, [isOpen]);
|
||||||
<>
|
|
||||||
<button onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
|
return (
|
||||||
Delete Account
|
<>
|
||||||
</button>
|
<button onClick={() => setIsOpen(true)} className="pill button w-fit h-min ml-auto bg-red-400! border-red-500! hover:bg-red-500!">
|
||||||
|
Delete Account
|
||||||
{isOpen &&
|
</button>
|
||||||
createPortal(
|
|
||||||
<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
|
{isOpen &&
|
||||||
<div
|
createPortal(
|
||||||
onClick={close}
|
<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-(--header-height) flex items-center justify-center z-40">
|
||||||
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
|
<div
|
||||||
isVisible ? "opacity-100" : "opacity-0"
|
onClick={close}
|
||||||
}`}
|
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
|
||||||
/>
|
isVisible ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
<div
|
/>
|
||||||
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
|
|
||||||
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
<div
|
||||||
}`}
|
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
|
||||||
>
|
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||||
<div className="flex justify-between items-center mb-2">
|
}`}
|
||||||
<h2 className="text-xl font-bold">Delete Account</h2>
|
>
|
||||||
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
<div className="flex justify-between items-center mb-2">
|
||||||
<Icon icon="material-symbols:close-rounded" />
|
<h2 className="text-xl font-bold">Delete Account</h2>
|
||||||
</button>
|
<button onClick={close} aria-label="Close" className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||||
</div>
|
<Icon icon="material-symbols:close-rounded" />
|
||||||
|
</button>
|
||||||
<p className="text-sm text-zinc-500">Are you sure? This is permanent and will remove all uploaded Miis. This action cannot be undone.</p>
|
</div>
|
||||||
|
|
||||||
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
<p className="text-sm text-zinc-500">Are you sure? This is permanent and will remove all uploaded Miis. This action cannot be undone.</p>
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 mt-4">
|
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
||||||
<button onClick={close} className="pill button">
|
|
||||||
Cancel
|
<div className="flex justify-end gap-2 mt-4">
|
||||||
</button>
|
<button onClick={close} className="pill button">
|
||||||
<SubmitButton onClick={handleSubmit} text="Delete" className="bg-red-400! border-red-500! hover:bg-red-500!" />
|
Cancel
|
||||||
</div>
|
</button>
|
||||||
</div>
|
<SubmitButton onClick={handleSubmit} text="Delete" className="bg-red-400! border-red-500! hover:bg-red-500!" />
|
||||||
</div>,
|
</div>
|
||||||
document.body,
|
</div>
|
||||||
)}
|
</div>,
|
||||||
</>
|
document.body,
|
||||||
);
|
)}
|
||||||
}
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,14 @@ import ProfilePictureSettings from "./profile-picture";
|
||||||
import SubmitDialogButton from "./submit-dialog-button";
|
import SubmitDialogButton from "./submit-dialog-button";
|
||||||
import DeleteAccount from "./delete-account";
|
import DeleteAccount from "./delete-account";
|
||||||
import z from "zod";
|
import z from "zod";
|
||||||
|
import { useNavigate } from "react-router";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
currentDescription: string | null | undefined;
|
currentDescription: string | null | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ProfileSettings({ currentDescription }: Props) {
|
export default function ProfileSettings({ currentDescription }: Props) {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [description, setDescription] = useState(currentDescription);
|
const [description, setDescription] = useState(currentDescription);
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
|
|
||||||
|
|
@ -39,7 +41,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
close();
|
close();
|
||||||
window.location.reload();
|
navigate(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmitNameChange = async (close: () => void) => {
|
const handleSubmitNameChange = async (close: () => void) => {
|
||||||
|
|
@ -63,7 +65,7 @@ export default function ProfileSettings({ currentDescription }: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
close();
|
close();
|
||||||
window.location.reload();
|
navigate(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,10 @@ import dayjs from "dayjs";
|
||||||
|
|
||||||
import SubmitDialogButton from "./submit-dialog-button";
|
import SubmitDialogButton from "./submit-dialog-button";
|
||||||
import Dropzone from "../dropzone";
|
import Dropzone from "../dropzone";
|
||||||
|
import { useNavigate } from "react-router";
|
||||||
|
|
||||||
export default function ProfilePictureSettings() {
|
export default function ProfilePictureSettings() {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [error, setError] = useState<string | undefined>(undefined);
|
const [error, setError] = useState<string | undefined>(undefined);
|
||||||
const [newPicture, setNewPicture] = useState<FileWithPath | undefined>();
|
const [newPicture, setNewPicture] = useState<FileWithPath | undefined>();
|
||||||
|
|
||||||
|
|
@ -30,7 +32,7 @@ export default function ProfilePictureSettings() {
|
||||||
}
|
}
|
||||||
|
|
||||||
close();
|
close();
|
||||||
location.reload();
|
navigate(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDrop = useCallback((acceptedFiles: FileWithPath[]) => {
|
const handleDrop = useCallback((acceptedFiles: FileWithPath[]) => {
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,50 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import { querySchema } from "@tomodachi-share/shared/schemas";
|
import { querySchema } from "@tomodachi-share/shared/schemas";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router";
|
||||||
export default function SearchBar() {
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
export default function SearchBar() {
|
||||||
const [query, setQuery] = useState(searchParams.get("q") || "");
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
const handleSearch = () => {
|
const [query, setQuery] = useState(searchParams.get("q") || "");
|
||||||
const result = querySchema.safeParse(query);
|
|
||||||
if (!result.success) {
|
const handleSearch = () => {
|
||||||
// router.push("/", { scroll: false });
|
const result = querySchema.safeParse(query);
|
||||||
window.location.href = "/";
|
if (!result.success) {
|
||||||
return;
|
navigate("/", { preventScrollReset: true });
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
// Clone current search params and add query param
|
|
||||||
const params = new URLSearchParams(searchParams.toString());
|
// Clone current search params and add query param
|
||||||
params.set("q", query);
|
const params = new URLSearchParams(searchParams.toString());
|
||||||
params.set("page", "1");
|
params.set("q", query);
|
||||||
|
params.set("page", "1");
|
||||||
// router.push(`/?${params.toString()}`, { scroll: false });
|
|
||||||
window.location.href = `/?${params.toString()}`;
|
navigate(`/?${params.toString()}`, { preventScrollReset: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||||
if (event.key === "Enter") handleSearch();
|
if (event.key === "Enter") handleSearch();
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/50 transition shadow-md">
|
<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-400/50 transition shadow-md">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
value={query}
|
value={query}
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full placeholder:text-black/40"
|
className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full placeholder:text-black/40"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
onClick={handleSearch}
|
onClick={handleSearch}
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
data-tooltip="Search"
|
data-tooltip="Search"
|
||||||
className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl"
|
className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl"
|
||||||
>
|
>
|
||||||
<Icon icon="ic:baseline-search" />
|
<Icon icon="ic:baseline-search" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,10 @@ import Carousel from "../carousel";
|
||||||
import SubmitButton from "../submit-button";
|
import SubmitButton from "../submit-button";
|
||||||
import Dropzone from "../dropzone";
|
import Dropzone from "../dropzone";
|
||||||
import type { MiiPlatform, MiiGender, MiiMakeup } from "@tomodachi-share/shared";
|
import type { MiiPlatform, MiiGender, MiiMakeup } from "@tomodachi-share/shared";
|
||||||
|
import { useNavigate } from "react-router";
|
||||||
|
|
||||||
export default function SubmitForm() {
|
export default function SubmitForm() {
|
||||||
|
const navigate = useNavigate();
|
||||||
const [files, setFiles] = useState<FileWithPath[]>([]);
|
const [files, setFiles] = useState<FileWithPath[]>([]);
|
||||||
|
|
||||||
const handleDrop = useCallback(
|
const handleDrop = useCallback(
|
||||||
|
|
@ -113,7 +115,7 @@ export default function SubmitForm() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.location.href = `/mii/${id}`;
|
navigate(`/mii/${id}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,35 @@
|
||||||
import { useEffect } from "react";
|
import Footer from "./components/footer";
|
||||||
import { ProgressProvider } from "@bprogress/react";
|
import Header from "./components/header";
|
||||||
|
import { useEffect } from "react";
|
||||||
export default function Providers({ children }: { children: React.ReactNode }) {
|
|
||||||
// Calculate header height
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||||
useEffect(() => {
|
// Calculate header height
|
||||||
const header = document.querySelector("header");
|
useEffect(() => {
|
||||||
if (!header) return;
|
const header = document.querySelector("header");
|
||||||
|
if (!header) return;
|
||||||
const updateHeaderHeight = () => {
|
|
||||||
document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`);
|
const updateHeaderHeight = () => {
|
||||||
};
|
document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`);
|
||||||
|
};
|
||||||
const resizeObserver = new ResizeObserver(updateHeaderHeight);
|
|
||||||
resizeObserver.observe(header);
|
const resizeObserver = new ResizeObserver(updateHeaderHeight);
|
||||||
window.addEventListener("resize", updateHeaderHeight);
|
resizeObserver.observe(header);
|
||||||
|
window.addEventListener("resize", updateHeaderHeight);
|
||||||
updateHeaderHeight();
|
|
||||||
|
updateHeaderHeight();
|
||||||
return () => {
|
|
||||||
resizeObserver.disconnect();
|
return () => {
|
||||||
window.removeEventListener("resize", updateHeaderHeight);
|
resizeObserver.disconnect();
|
||||||
};
|
window.removeEventListener("resize", updateHeaderHeight);
|
||||||
}, []);
|
};
|
||||||
|
}, []);
|
||||||
return (
|
|
||||||
<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
|
return (
|
||||||
{children}
|
<>
|
||||||
</ProgressProvider>
|
<Header />
|
||||||
);
|
{/* <AdminBanner /> */}
|
||||||
}
|
<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { StrictMode, Suspense } from "react";
|
import { StrictMode } from "react";
|
||||||
import { createRoot } from "react-dom/client";
|
import { createRoot } from "react-dom/client";
|
||||||
import { BrowserRouter, Route, Routes } from "react-router";
|
import { BrowserRouter, Route, Routes } from "react-router";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
@ -13,19 +13,15 @@ import MiiPage from "./pages/mii.tsx";
|
||||||
import SubmitPage from "./pages/submit.tsx";
|
import SubmitPage from "./pages/submit.tsx";
|
||||||
import IndexPage from "./pages/index.tsx";
|
import IndexPage from "./pages/index.tsx";
|
||||||
import ProfileSettingsPage from "./pages/settings.tsx";
|
import ProfileSettingsPage from "./pages/settings.tsx";
|
||||||
import Providers from "./components/provider.tsx";
|
import { ProgressProvider } from "@bprogress/react";
|
||||||
import Header from "./components/header.tsx";
|
import LinkOutPage from "./pages/out.tsx";
|
||||||
import Footer from "./components/footer.tsx";
|
import Layout from "./layout.tsx";
|
||||||
|
|
||||||
createRoot(document.getElementById("root")!).render(
|
createRoot(document.getElementById("root")!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<Providers>
|
<BrowserRouter>
|
||||||
<Suspense fallback={<div>Loading header...</div>}>
|
<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
|
||||||
<Header />
|
<Layout>
|
||||||
</Suspense>
|
|
||||||
{/* <AdminBanner /> */}
|
|
||||||
<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">
|
|
||||||
<BrowserRouter>
|
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<IndexPage />} />
|
<Route path="/" element={<IndexPage />} />
|
||||||
<Route path="/mii/:id" element={<MiiPage />} />
|
<Route path="/mii/:id" element={<MiiPage />} />
|
||||||
|
|
@ -35,13 +31,13 @@ createRoot(document.getElementById("root")!).render(
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/submit" element={<SubmitPage />} />
|
<Route path="/submit" element={<SubmitPage />} />
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
<Route path="/out" element={<LinkOutPage />} />
|
||||||
<Route path="/privacy" element={<PrivacyPage />} />
|
<Route path="/privacy" element={<PrivacyPage />} />
|
||||||
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
|
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
|
||||||
<Route path="*" element={<NotFoundPage />} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</BrowserRouter>
|
</Layout>
|
||||||
</main>
|
</ProgressProvider>
|
||||||
<Footer />
|
</BrowserRouter>
|
||||||
</Providers>
|
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
import { Suspense, useEffect, useMemo, useState } from "react";
|
import { Suspense, useEffect, useState } from "react";
|
||||||
import FilterMenu from "../components/mii/list/filter-menu";
|
import FilterMenu from "../components/mii/list/filter-menu";
|
||||||
import SortSelect from "../components/mii/list/sort-select";
|
import SortSelect from "../components/mii/list/sort-select";
|
||||||
import MiiGrid from "../components/mii/list/mii-grid";
|
import MiiGrid from "../components/mii/list/mii-grid";
|
||||||
import Pagination from "../components/pagination";
|
import Pagination from "../components/pagination";
|
||||||
import Skeleton from "../components/mii/list/skeleton";
|
import Skeleton from "../components/mii/list/skeleton";
|
||||||
|
import { useSearchParams } from "react-router";
|
||||||
|
|
||||||
interface ApiResponse {
|
interface ApiResponse {
|
||||||
totalCount: number;
|
totalCount: number;
|
||||||
|
|
@ -12,7 +13,7 @@ interface ApiResponse {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function IndexPage() {
|
export default function IndexPage() {
|
||||||
const searchParams = useMemo(() => new URLSearchParams(location.search), []);
|
const [searchParams] = useSearchParams();
|
||||||
const [data, setData] = useState<ApiResponse | null>(null);
|
const [data, setData] = useState<ApiResponse | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import { useStore } from "@nanostores/react";
|
import { useStore } from "@nanostores/react";
|
||||||
import { useNavigate } from "react-router";
|
import { Link, useNavigate } from "react-router";
|
||||||
import { session } from "../session";
|
import { session } from "../session";
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
|
|
@ -23,41 +23,41 @@ export default function LoginPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center gap-2">
|
<div className="flex flex-col items-center gap-2">
|
||||||
<a
|
<Link
|
||||||
href={`${API_URL}/api/auth/signin/discord`}
|
to={`${API_URL}/api/auth/signin/discord`}
|
||||||
aria-label="Login with Discord"
|
aria-label="Login with Discord"
|
||||||
className="pill button gap-2 px-3! bg-indigo-400! border-indigo-500! hover:bg-indigo-500!"
|
className="pill button gap-2 px-3! bg-indigo-400! border-indigo-500! hover:bg-indigo-500!"
|
||||||
>
|
>
|
||||||
<Icon icon="ic:baseline-discord" fontSize={32} />
|
<Icon icon="ic:baseline-discord" fontSize={32} />
|
||||||
Login with Discord
|
Login with Discord
|
||||||
</a>
|
</Link>
|
||||||
<a
|
<Link
|
||||||
href={`${API_URL}/api/auth/signin/github`}
|
to={`${API_URL}/api/auth/signin/github`}
|
||||||
aria-label="Login with GitHub"
|
aria-label="Login with GitHub"
|
||||||
className="pill button gap-2 px-3! bg-zinc-700! border-zinc-800! hover:bg-zinc-800! text-white"
|
className="pill button gap-2 px-3! bg-zinc-700! border-zinc-800! hover:bg-zinc-800! text-white"
|
||||||
>
|
>
|
||||||
<Icon icon="mdi:github" fontSize={32} />
|
<Icon icon="mdi:github" fontSize={32} />
|
||||||
Login with GitHub
|
Login with GitHub
|
||||||
</a>
|
</Link>
|
||||||
<a
|
<Link
|
||||||
href={`${API_URL}/api/auth/signin/google`}
|
to={`${API_URL}/api/auth/signin/google`}
|
||||||
aria-label="Login with Google"
|
aria-label="Login with Google"
|
||||||
className="pill button gap-2 px-3! bg-white! border-gray-300! hover:bg-gray-100! text-black! flex items-center"
|
className="pill button gap-2 px-3! bg-white! border-gray-300! hover:bg-gray-100! text-black! flex items-center"
|
||||||
>
|
>
|
||||||
<Icon icon="material-icon-theme:google" fontSize={32} />
|
<Icon icon="material-icon-theme:google" fontSize={32} />
|
||||||
Login with Google
|
Login with Google
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="mt-8 text-xs text-zinc-400">
|
<p className="mt-8 text-xs text-zinc-400">
|
||||||
By signing up, you agree to the{" "}
|
By signing up, you agree to the{" "}
|
||||||
<a href="/terms-of-service" className="underline hover:text-zinc-600">
|
<Link to="/terms-of-service" className="underline hover:text-zinc-600">
|
||||||
Terms of Service
|
Terms of Service
|
||||||
</a>{" "}
|
</Link>{" "}
|
||||||
and{" "}
|
and{" "}
|
||||||
<a href="/privacy" className="underline hover:text-zinc-600">
|
<Link to="/privacy" className="underline hover:text-zinc-600">
|
||||||
Privacy Policy
|
Privacy Policy
|
||||||
</a>
|
</Link>
|
||||||
.
|
.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,11 @@ import SwitchAddMiiTutorialButton from "../components/tutorial/switch-add-mii";
|
||||||
import MiiInstructions from "../components/mii/instructions";
|
import MiiInstructions from "../components/mii/instructions";
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Link, useParams } from "react-router";
|
import { Link, useNavigate, useParams } from "react-router";
|
||||||
|
|
||||||
export default function MiiPage() {
|
export default function MiiPage() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
const [mii, setMii] = useState<any>(null);
|
const [mii, setMii] = useState<any>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
|
@ -31,7 +32,7 @@ export default function MiiPage() {
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
window.location.href = "/404";
|
navigate("/404");
|
||||||
});
|
});
|
||||||
}, [id]);
|
}, [id]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,17 @@
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link } from "react-router";
|
||||||
export default function NotFoundPage() {
|
|
||||||
return <div className="grow flex items-center justify-center">
|
export default function NotFoundPage() {
|
||||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-8 max-w-xs w-full text-center flex flex-col">
|
return (
|
||||||
<h2 className="text-7xl font-black">404</h2>
|
<div className="grow flex items-center justify-center">
|
||||||
<p>Page not found - you swam off the island!</p>
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-8 max-w-xs w-full text-center flex flex-col">
|
||||||
<a href="/" className="pill button gap-2 mt-8 w-fit self-center">
|
<h2 className="text-7xl font-black">404</h2>
|
||||||
<Icon icon="ic:round-home" fontSize={24} />
|
<p>Page not found - you swam off the island!</p>
|
||||||
Travel Back
|
<Link to="/" className="pill button gap-2 mt-8 w-fit self-center">
|
||||||
</a>
|
<Icon icon="ic:round-home" fontSize={24} />
|
||||||
</div>
|
Travel Back
|
||||||
</div>
|
</Link>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
64
frontend/src/pages/out.tsx
Normal file
64
frontend/src/pages/out.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link, useNavigate, useSearchParams } from "react-router";
|
||||||
|
|
||||||
|
export default function LinkOutPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const url = searchParams.get("url");
|
||||||
|
|
||||||
|
if (!url || Array.isArray(url)) navigate("/");
|
||||||
|
|
||||||
|
let parsed: URL;
|
||||||
|
try {
|
||||||
|
parsed = new URL(url);
|
||||||
|
} catch {
|
||||||
|
navigate("/"); // redirect if URL is invalid
|
||||||
|
}
|
||||||
|
|
||||||
|
// Next.js doesn't allow attacks like these but you can never be too safe
|
||||||
|
if (!["http:", "https:"].includes(parsed.protocol)) navigate("/");
|
||||||
|
|
||||||
|
const isSafe = Array.from(SAFE_LINKS).some((domain) => parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`));
|
||||||
|
if (isSafe) navigate(url);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grow flex items-center justify-center">
|
||||||
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg py-8 px-6 max-w-md w-full text-center flex flex-col items-center">
|
||||||
|
<h2 className="text-3xl font-black flex items-center gap-2 mb-1">
|
||||||
|
<Icon icon="mingcute:alert-fill" className="text-5xl" />
|
||||||
|
Warning
|
||||||
|
</h2>
|
||||||
|
<p>You're attempting to leave TomodachiShare island! The destination website is potentially dangerous.</p>
|
||||||
|
|
||||||
|
<div className="bg-zinc-100 border border-zinc-300 rounded-md p-2 break-all w-full mt-4">
|
||||||
|
<code className="font-mono text-sm">{url}</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center gap-2">
|
||||||
|
<Link to="/" className="pill button gap-2 mt-8 w-fit self-center bg-zinc-100! border-zinc-300! hover:bg-zinc-300!">
|
||||||
|
<Icon icon="ic:round-home" fontSize={24} />
|
||||||
|
Travel Back
|
||||||
|
</Link>
|
||||||
|
<Link to={url} target="_blank" rel="noopener noreferrer" className="pill button gap-2 mt-8 w-fit self-center">
|
||||||
|
<Icon icon="ic:round-open-in-new" fontSize={21} />
|
||||||
|
Continue
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const SAFE_LINKS = new Set([
|
||||||
|
"tomodachishare.com",
|
||||||
|
"trafficlunar.net",
|
||||||
|
"youtube.com",
|
||||||
|
"youtu.be",
|
||||||
|
"twitter.com",
|
||||||
|
"x.com",
|
||||||
|
"reddit.com",
|
||||||
|
"tiktok.com",
|
||||||
|
"tumblr.com",
|
||||||
|
"instagram.com",
|
||||||
|
"wikipedia.org",
|
||||||
|
]);
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import ProfileInformation from "../components/profile-information";
|
import ProfileInformation from "../components/profile-information";
|
||||||
import { useParams } from "react-router";
|
import { useNavigate, useParams } from "react-router";
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
const [user, setUser] = useState<any>(null);
|
const [user, setUser] = useState<any>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
|
@ -20,7 +21,7 @@ export default function ProfilePage() {
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
window.location.href = "/404";
|
navigate("/404");
|
||||||
});
|
});
|
||||||
}, [id]);
|
}, [id]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,129 +1,145 @@
|
||||||
export default function TermsOfServicePage() {
|
import { Link } from "react-router";
|
||||||
return <div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-6">
|
|
||||||
<h1 className="text-2xl font-bold">Terms of Service</h1>
|
export default function TermsOfServicePage() {
|
||||||
<h2 className="font-light">
|
return (
|
||||||
<strong className="font-medium">Effective Date:</strong> March 26, 2026
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-6">
|
||||||
</h2>
|
<h1 className="text-2xl font-bold">Terms of Service</h1>
|
||||||
|
<h2 className="font-light">
|
||||||
<hr className="border-black/20 mt-1 mb-4" />
|
<strong className="font-medium">Effective Date:</strong> March 26, 2026
|
||||||
|
</h2>
|
||||||
<p>
|
|
||||||
By registering for, or using this service, you confirm that you understand and agree to the terms below. If you do not agree to these terms, you should
|
<hr className="border-black/20 mt-1 mb-4" />
|
||||||
not use the service.
|
|
||||||
</p>
|
<p>
|
||||||
<p className="mt-1">
|
By registering for, or using this service, you confirm that you understand and agree to the terms below. If you do not agree to these terms, you should
|
||||||
If you have any questions or concerns, please contact me at:{" "}
|
not use the service.
|
||||||
<a href="mailto:hello@trafficlunar.net" className="text-blue-700"> hello@trafficlunar.net </a>
|
</p>
|
||||||
.
|
<p className="mt-1">
|
||||||
</p>
|
If you have any questions or concerns, please contact me at:{" "}
|
||||||
|
<a href="mailto:hello@trafficlunar.net" className="text-blue-700">
|
||||||
<ul className="list-decimal ml-5 marker:text-xl marker:font-semibold">
|
{" "}
|
||||||
<li>
|
hello@trafficlunar.net{" "}
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">Usage Policy</h3>
|
</a>
|
||||||
|
.
|
||||||
<section>
|
</p>
|
||||||
<p className="mb-2">As a user of this site, you must abide by these guidelines:</p>
|
|
||||||
<ul className="list-disc list-inside indent-4">
|
<ul className="list-decimal ml-5 marker:text-xl marker:font-semibold">
|
||||||
<li>Nothing that would interfere with or gain unauthorized access to the website or its systems.</li>
|
<li>
|
||||||
<li>Nothing that is against the law in the United Kingdom.</li>
|
<h3 className="text-xl font-semibold mt-6 mb-2">Usage Policy</h3>
|
||||||
<li>No NSFW, violent, gory, or inappropriate Miis or images.</li>
|
|
||||||
<li>No spam.</li>
|
<section>
|
||||||
<li>No impersonation of others.</li>
|
<p className="mb-2">As a user of this site, you must abide by these guidelines:</p>
|
||||||
<li>No malware, malicious links, or phishing content.</li>
|
<ul className="list-disc list-inside indent-4">
|
||||||
<li>No harassment, hate speech, threats, or bullying towards others.</li>
|
<li>Nothing that would interfere with or gain unauthorized access to the website or its systems.</li>
|
||||||
<li>Miis must be high quality: for example, not following all instructions on the submit form correctly.</li>
|
<li>Nothing that is against the law in the United Kingdom.</li>
|
||||||
<li>Avoid using inappropriate language. Profanity may be automatically censored.</li>
|
<li>No NSFW, violent, gory, or inappropriate Miis or images.</li>
|
||||||
<li>No use of automated scripts, bots, or scrapers to access or interact with the site.</li>
|
<li>No spam.</li>
|
||||||
</ul>
|
<li>No impersonation of others.</li>
|
||||||
<p className="mt-2">
|
<li>No malware, malicious links, or phishing content.</li>
|
||||||
If you find anybody or a Mii breaking these rules, please report it by going to their page and clicking the "Report" button.
|
<li>No harassment, hate speech, threats, or bullying towards others.</li>
|
||||||
</p>
|
<li>Miis must be high quality: for example, not following all instructions on the submit form correctly.</li>
|
||||||
</section>
|
<li>Avoid using inappropriate language. Profanity may be automatically censored.</li>
|
||||||
</li>
|
<li>No use of automated scripts, bots, or scrapers to access or interact with the site.</li>
|
||||||
<li>
|
</ul>
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">Termination</h3>
|
<p className="mt-2">
|
||||||
|
If you find anybody or a Mii breaking these rules, please report it by going to their page and clicking the "Report" button.
|
||||||
<section>
|
</p>
|
||||||
<p className="mb-2">
|
</section>
|
||||||
We reserve the right to suspend or terminate your access to the site at any time if you violate these Terms of Service or engage in any activities
|
</li>
|
||||||
that disrupt the functionality of the site.
|
<li>
|
||||||
</p>
|
<h3 className="text-xl font-semibold mt-6 mb-2">Termination</h3>
|
||||||
<p>
|
|
||||||
To request deletion of your account and personal data, please refer to the{" "}
|
<section>
|
||||||
<a href="/privacy" className="text-blue-700"> Privacy Policy </a>{" "}
|
<p className="mb-2">
|
||||||
(see "Data Deletion") or email me at{" "}
|
We reserve the right to suspend or terminate your access to the site at any time if you violate these Terms of Service or engage in any activities
|
||||||
<a href="mailto:hello@trafficlunar.net" className="text-blue-700"> hello@trafficlunar.net </a>
|
that disrupt the functionality of the site.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
<p>
|
||||||
</li>
|
To request deletion of your account and personal data, please refer to the{" "}
|
||||||
<li>
|
<Link to="/privacy" className="text-blue-700">
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">Eligibility</h3>
|
{" "}
|
||||||
<section>
|
Privacy Policy{" "}
|
||||||
<p className="mb-2">By using this service, you confirm that you are at least 13 years old or have the consent of a parent or guardian.</p>
|
</Link>{" "}
|
||||||
</section>
|
(see "Data Deletion") or email me at{" "}
|
||||||
</li>
|
<a href="mailto:hello@trafficlunar.net" className="text-blue-700">
|
||||||
|
{" "}
|
||||||
<li>
|
hello@trafficlunar.net{" "}
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">Liability</h3>
|
</a>
|
||||||
|
</p>
|
||||||
<section>
|
</section>
|
||||||
<p className="mb-2">
|
</li>
|
||||||
This service is provided "as is" and without any warranties. We are not responsible for any user-generated content or the actions of users
|
<li>
|
||||||
on the site. You use the site at your own risk.
|
<h3 className="text-xl font-semibold mt-6 mb-2">Eligibility</h3>
|
||||||
</p>
|
<section>
|
||||||
<p>
|
<p className="mb-2">By using this service, you confirm that you are at least 13 years old or have the consent of a parent or guardian.</p>
|
||||||
We do not guarantee continuous or secure access to the service and are not liable for any damages resulting from interruptions, loss of data, or
|
</section>
|
||||||
unauthorized access.
|
</li>
|
||||||
</p>
|
|
||||||
</section>
|
<li>
|
||||||
</li>
|
<h3 className="text-xl font-semibold mt-6 mb-2">Liability</h3>
|
||||||
<li>
|
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">DMCA & Copyright</h3>
|
<section>
|
||||||
|
<p className="mb-2">
|
||||||
<section>
|
This service is provided "as is" and without any warranties. We are not responsible for any user-generated content or the actions of
|
||||||
<p className="mb-2">
|
users on the site. You use the site at your own risk.
|
||||||
If you believe that content uploaded to this site infringes on your copyright, you may submit a DMCA takedown request by emailing{" "}
|
</p>
|
||||||
<a href="mailto:hello@trafficlunar.net" className="text-blue-700"> hello@trafficlunar.net </a>{" "}
|
<p>
|
||||||
or by reporting the Mii on its page.
|
We do not guarantee continuous or secure access to the service and are not liable for any damages resulting from interruptions, loss of data, or
|
||||||
</p>
|
unauthorized access.
|
||||||
<p className="mb-2">Please include:</p>
|
</p>
|
||||||
<ul className="list-disc list-inside indent-4">
|
</section>
|
||||||
<li>Your name and contact information</li>
|
</li>
|
||||||
<li>A description of the copyrighted work</li>
|
<li>
|
||||||
<li>A link to the allegedly infringing material</li>
|
<h3 className="text-xl font-semibold mt-6 mb-2">DMCA & Copyright</h3>
|
||||||
<li>A statement that you have a good faith belief that the use is not authorized</li>
|
|
||||||
<li>
|
<section>
|
||||||
A statement that the information in the notice is accurate and, under penalty of perjury, that you are authorized to act on behalf of the
|
<p className="mb-2">
|
||||||
copyright owner
|
If you believe that content uploaded to this site infringes on your copyright, you may submit a DMCA takedown request by emailing{" "}
|
||||||
</li>
|
<a href="mailto:hello@trafficlunar.net" className="text-blue-700">
|
||||||
<li>Your electronic or physical signature</li>
|
{" "}
|
||||||
</ul>
|
hello@trafficlunar.net{" "}
|
||||||
</section>
|
</a>{" "}
|
||||||
</li>
|
or by reporting the Mii on its page.
|
||||||
<li>
|
</p>
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">Nintendo Disclaimer</h3>
|
<p className="mb-2">Please include:</p>
|
||||||
|
<ul className="list-disc list-inside indent-4">
|
||||||
<section>
|
<li>Your name and contact information</li>
|
||||||
<p className="mb-2">
|
<li>A description of the copyrighted work</li>
|
||||||
This site is not affiliated with, endorsed by, or associated with Nintendo in any way. "Mii" and all related character designs are
|
<li>A link to the allegedly infringing material</li>
|
||||||
trademarks of Nintendo Co., Ltd.
|
<li>A statement that you have a good faith belief that the use is not authorized</li>
|
||||||
</p>
|
<li>
|
||||||
<p>
|
A statement that the information in the notice is accurate and, under penalty of perjury, that you are authorized to act on behalf of the
|
||||||
All Mii-related content is shared by users under the assumption that it does not violate any third-party rights. If you believe your rights have
|
copyright owner
|
||||||
been infringed, please see the DMCA section above.
|
</li>
|
||||||
</p>
|
<li>Your electronic or physical signature</li>
|
||||||
</section>
|
</ul>
|
||||||
</li>
|
</section>
|
||||||
<li>
|
</li>
|
||||||
<h3 className="text-xl font-semibold mt-6 mb-2">Changes to this Terms of Service</h3>
|
<li>
|
||||||
|
<h3 className="text-xl font-semibold mt-6 mb-2">Nintendo Disclaimer</h3>
|
||||||
<section>
|
|
||||||
<p className="mb-2">
|
<section>
|
||||||
This Terms of Service may be updated from time to time. We encourage you to review the terms periodically to stay informed about the use of the
|
<p className="mb-2">
|
||||||
site. We may notify users via a site banner or other means if changes are made to the Terms of Service.
|
This site is not affiliated with, endorsed by, or associated with Nintendo in any way. "Mii" and all related character designs are
|
||||||
</p>
|
trademarks of Nintendo Co., Ltd.
|
||||||
</section>
|
</p>
|
||||||
</li>
|
<p>
|
||||||
</ul>
|
All Mii-related content is shared by users under the assumption that it does not violate any third-party rights. If you believe your rights have
|
||||||
</div>;
|
been infringed, please see the DMCA section above.
|
||||||
}
|
</p>
|
||||||
|
</section>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3 className="text-xl font-semibold mt-6 mb-2">Changes to this Terms of Service</h3>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<p className="mb-2">
|
||||||
|
This Terms of Service may be updated from time to time. We encourage you to review the terms periodically to stay informed about the use of the
|
||||||
|
site. We may notify users via a site banner or other means if changes are made to the Terms of Service.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ export const idSchema = z.coerce.number({ error: "ID must be a number" }).int({
|
||||||
|
|
||||||
export const searchSchema = z.object({
|
export const searchSchema = z.object({
|
||||||
q: querySchema.optional(),
|
q: querySchema.optional(),
|
||||||
sort: z.enum(["likes", "newest", "oldest", "random"], { error: "Sort must be either 'likes', 'newest', 'oldest', or 'random'" }).default("newest"),
|
sort: z.enum(["likes", "newest", "oldest"], { error: "Sort must be either 'likes', 'newest', 'oldest'" }).default("newest"),
|
||||||
tags: z
|
tags: z
|
||||||
.string()
|
.string()
|
||||||
.optional()
|
.optional()
|
||||||
|
|
@ -71,8 +71,6 @@ export const searchSchema = z.object({
|
||||||
.max(100, { error: "Limit cannot be more than 100" })
|
.max(100, { error: "Limit cannot be more than 100" })
|
||||||
.optional(),
|
.optional(),
|
||||||
page: z.coerce.number({ error: "Page must be a number" }).int({ error: "Page must be an integer" }).min(1, { error: "Page must be at least 1" }).optional(),
|
page: z.coerce.number({ error: "Page must be a number" }).int({ error: "Page must be an integer" }).min(1, { error: "Page must be at least 1" }).optional(),
|
||||||
// Random sort
|
|
||||||
seed: z.coerce.number({ error: "Seed must be a number" }).int({ error: "Seed must be an integer" }).optional(),
|
|
||||||
// Other
|
// Other
|
||||||
parentPage: z.string().optional(),
|
parentPage: z.string().optional(),
|
||||||
userId: idSchema.optional(),
|
userId: idSchema.optional(),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue