aboutsummaryrefslogtreecommitdiffstats
path: root/src/app/typing/page.tsx
diff options
context:
space:
mode:
authorPinapelz <yukais@pinapelz.com>2026-06-02 02:12:57 -0700
committerPinapelz <yukais@pinapelz.com>2026-06-02 02:13:10 -0700
commit0335b0ad81169232a3dbb1be1341fdcfce548645 (patch)
tree910593fa5e072ea77f594b6f10ddd96e49452446 /src/app/typing/page.tsx
parent0d35e75edbc75f186e4a1ed52fbc3549ee9f5cd6 (diff)
migrate to pocketbase backend + auth/login
Diffstat (limited to 'src/app/typing/page.tsx')
-rw-r--r--src/app/typing/page.tsx161
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>
- </>
- );
-}
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage