From 0335b0ad81169232a3dbb1be1341fdcfce548645 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Tue, 2 Jun 2026 02:12:57 -0700 Subject: migrate to pocketbase backend + auth/login --- src/app/typing/page.styles.ts | 168 ------------------------------------------ src/app/typing/page.tsx | 161 ---------------------------------------- 2 files changed, 329 deletions(-) delete mode 100644 src/app/typing/page.styles.ts delete mode 100644 src/app/typing/page.tsx (limited to 'src/app/typing') diff --git a/src/app/typing/page.styles.ts b/src/app/typing/page.styles.ts deleted file mode 100644 index 34f4ebc..0000000 --- a/src/app/typing/page.styles.ts +++ /dev/null @@ -1,168 +0,0 @@ -import styled, { createGlobalStyle } from "styled-components"; -import { - Root as BaseRoot, - Navbar as BaseNavbar, - Logo as BaseLogo, - LogoIcon as BaseLogoIcon, - NavLink as BaseNavLink, - NavCtaLink as BaseNavCtaLink, -} from "../styles/shared"; -import { - NavLeft, - NavCenter, - SearchBox as BaseSearchBox, - SearchInput as BaseSearchInput, - SearchButton as BaseSearchButton, - NavRight, - ChipsBar as BaseChipsBar, - Chip as BaseChip, - GridContainer, - CardGrid, - Card as BaseCard, - ThumbnailWrapper as BaseThumbnailWrapper, - Thumbnail, - PlayOverlay, - PlayCircle, - CardMeta, - CardInfo, - CardTitle as BaseCardTitle, - CardSub as BaseCardSub, - EmptyState as BaseEmptyState, - CtaSection as BaseCtaSection, - SectionHeading as BaseSectionHeading, - OpenPlayerLink as BaseOpenPlayerLink, - PlayerDescription as BasePlayerDescription, -} from "../page.styles"; - -export { NavLeft, NavCenter, NavRight, GridContainer, CardGrid, Thumbnail, PlayOverlay, PlayCircle, CardMeta, CardInfo }; - -export const TypingGlobalStyle = createGlobalStyle` - html, - body { - background-color: #0b0b10; - } -`; - -export const Root = styled(BaseRoot)` - background-color: #0b0b10; - color: #f5f5f5; -`; - -export const Navbar = styled(BaseNavbar)` - background-color: rgba(11, 11, 16, 0.9); - border-bottom: 1px solid #1f1f2a; -`; - -export const Logo = styled(BaseLogo)` - color: #f5f5f5; -`; - -export const LogoIcon = styled(BaseLogoIcon)` - background-color: #f5f5f5; - color: #0b0b10; -`; - -export const NavLink = styled(BaseNavLink)` - color: #b0b3bd; - &:hover { - background-color: #1a1d29; - color: #fff; - } -`; - -export const NavCtaLink = styled(BaseNavCtaLink)` - background-color: #1a1d29; - border-color: #2a2f3d; - color: #fff; - &:hover { - background-color: #222838; - border-color: #3a4154; - } -`; - -export const SearchBox = styled(BaseSearchBox)` - border-color: #2a2f3d; - background-color: #141824; - &:focus-within { - border-color: #4b5563; - } -`; - -export const SearchInput = styled(BaseSearchInput)` - color: #f5f5f5; - &::placeholder { - color: #8b90a0; - } -`; - -export const SearchButton = styled(BaseSearchButton)` - background-color: #1a1d29; - border-left-color: #2a2f3d; - color: #c0c4d0; - &:hover { - background-color: #222838; - color: #fff; - } -`; - - - -export const ChipsBar = styled(BaseChipsBar)` - background-color: #0f111a; -`; - -export const Chip = styled(BaseChip)` - border-color: #2a2f3d; - color: #b8bcc7; - background-color: transparent; - &:hover { - background-color: #1a1d29; - color: #fff; - } -`; - -export const Card = styled(BaseCard)` - border: 1px solid #1f1f2a; - background-color: #0f111a; - &:hover { - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); - border-color: #2a2f3d; - } -`; - -export const ThumbnailWrapper = styled(BaseThumbnailWrapper)` - background-color: #1a1d29; - color: #4b5563; -`; - -export const CardTitle = styled(BaseCardTitle)` - color: #f5f5f5; -`; - -export const CardSub = styled(BaseCardSub)` - color: #9aa0ad; -`; - -export const EmptyState = styled(BaseEmptyState)` - color: #9aa0ad; -`; - -export const CtaSection = styled(BaseCtaSection)` - border-top-color: #1f1f2a; -`; - -export const SectionHeading = styled(BaseSectionHeading)` - color: #f5f5f5; -`; - -export const OpenPlayerLink = styled(BaseOpenPlayerLink)` - background-color: #f5f5f5; - color: #0b0b10; - &:hover { - background-color: #e5e7eb; - } -`; - -export const PlayerDescription = styled(BasePlayerDescription)` - color: #9aa0ad; -`; \ No newline at end of file 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; - -function capitalize(s: string) { - return s.charAt(0).toUpperCase() + s.slice(1); -} - -export default function TypingPage() { - const [data, setData] = useState({}); - 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 ( - <> - - - - - - - - - LRC-Type - - - - - - setSearch(e.target.value)} - /> - - - - - - - - Create - - - - - - {chips.map((chip) => ( - setActiveChip(chip.key)} - > - {chip.label} - - ))} - - - - - {filtered.length === 0 ? ( - No results found. - ) : ( - filtered.map((item) => ( - - - {item.thumbnail ? ( - - ) : ( - - )} - - - - - - - - - {item.title} - {item.artist} - - - - )) - )} - - - - - ); -} -- cgit v1.2.3