diff options
| author | Pinapelz <yukais@pinapelz.com> | 2026-06-02 02:12:57 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2026-06-02 02:13:10 -0700 |
| commit | 0335b0ad81169232a3dbb1be1341fdcfce548645 (patch) | |
| tree | 910593fa5e072ea77f594b6f10ddd96e49452446 /src/app/typing/page.tsx | |
| parent | 0d35e75edbc75f186e4a1ed52fbc3549ee9f5cd6 (diff) | |
migrate to pocketbase backend + auth/login
Diffstat (limited to 'src/app/typing/page.tsx')
| -rw-r--r-- | src/app/typing/page.tsx | 161 |
1 files changed, 0 insertions, 161 deletions
diff --git a/src/app/typing/page.tsx b/src/app/typing/page.tsx deleted file mode 100644 index 27ad173..0000000 --- a/src/app/typing/page.tsx +++ /dev/null @@ -1,161 +0,0 @@ -"use client"; -import { useEffect, useState } from "react"; -import { FaPlay, FaMusic, FaSearch } from "react-icons/fa"; -import { MdLibraryMusic } from "react-icons/md"; -import { - Root, - Navbar, - Logo, - LogoIcon, - NavCtaLink, - NavLeft, - NavCenter, - SearchBox, - SearchInput, - SearchButton, - NavRight, - - ChipsBar, - Chip, - GridContainer, - CardGrid, - Card, - ThumbnailWrapper, - Thumbnail, - PlayOverlay, - PlayCircle, - CardMeta, - CardInfo, - CardTitle, - CardSub, - EmptyState, - TypingGlobalStyle, -} from "./page.styles"; - -interface TypingEntry { - title: string; - artist: string; - thumbnail: string; - code: string; -} - -type TypingData = Record<string, TypingEntry[]>; - -function capitalize(s: string) { - return s.charAt(0).toUpperCase() + s.slice(1); -} - -export default function TypingPage() { - const [data, setData] = useState<TypingData>({}); - const [activeChip, setActiveChip] = useState("all"); - const [search, setSearch] = useState(""); - - useEffect(() => { - fetch("/typing.json") - .then((r) => r.json()) - .then((json: TypingData) => setData(json)) - .catch(() => {}); - }, []); - - const categories = Object.keys(data); - const chips = [ - { key: "all", label: "All" }, - ...categories.map((category) => ({ - key: category, - label: capitalize(category), - })), - ]; - - const visibleItems: TypingEntry[] = - activeChip === "all" ? Object.values(data).flat() : data[activeChip] ?? []; - - const normalizedSearch = search.trim().toLowerCase(); - const searchableItems = normalizedSearch ? Object.values(data).flat() : visibleItems; - - const filtered = normalizedSearch - ? searchableItems.filter( - (item) => - item.title.toLowerCase().includes(normalizedSearch) || - item.artist.toLowerCase().includes(normalizedSearch), - ) - : searchableItems; - - return ( - <> - <TypingGlobalStyle /> - <Root> - <Navbar> - <NavLeft> - <Logo href="/"> - <LogoIcon> - <MdLibraryMusic /> - </LogoIcon> - LRC-Type - </Logo> - </NavLeft> - - <NavCenter> - <SearchBox> - <SearchInput - placeholder="Search typing charts..." - value={search} - onChange={(e) => setSearch(e.target.value)} - /> - <SearchButton aria-label="Search"> - <FaSearch /> - </SearchButton> - </SearchBox> - </NavCenter> - - <NavRight> - <NavCtaLink href="/create">Create</NavCtaLink> - - </NavRight> - </Navbar> - - <ChipsBar> - {chips.map((chip) => ( - <Chip - key={chip.key} - $active={chip.key === activeChip} - onClick={() => setActiveChip(chip.key)} - > - {chip.label} - </Chip> - ))} - </ChipsBar> - - <GridContainer> - <CardGrid> - {filtered.length === 0 ? ( - <EmptyState>No results found.</EmptyState> - ) : ( - filtered.map((item) => ( - <Card key={item.code} href={`/game?code=${item.code}`} target="_blank" rel="noopener noreferrer"> - <ThumbnailWrapper> - {item.thumbnail ? ( - <Thumbnail src={item.thumbnail} alt={item.title} /> - ) : ( - <FaMusic /> - )} - <PlayOverlay> - <PlayCircle> - <FaPlay /> - </PlayCircle> - </PlayOverlay> - </ThumbnailWrapper> - <CardMeta> - <CardInfo> - <CardTitle>{item.title}</CardTitle> - <CardSub>{item.artist}</CardSub> - </CardInfo> - </CardMeta> - </Card> - )) - )} - </CardGrid> - </GridContainer> - </Root> - </> - ); -} |
