refactor: lint
This commit is contained in:
me
@@ -2,63 +2,63 @@ import { DotIcon } from "@phosphor-icons/react";
|
||||
import "@fontsource/knewave/400.css";
|
||||
|
||||
interface LogoProps {
|
||||
scale?: number;
|
||||
type?: "inline" | "mono" | "logo" | null;
|
||||
ul?: boolean;
|
||||
scale?: number;
|
||||
type?: "inline" | "mono" | "logo" | null;
|
||||
ul?: boolean;
|
||||
}
|
||||
|
||||
export default function Logo({
|
||||
scale = 1,
|
||||
type = null,
|
||||
ul = false,
|
||||
scale = 1,
|
||||
type = null,
|
||||
ul = false,
|
||||
}: LogoProps) {
|
||||
if (type === "inline") {
|
||||
return (
|
||||
<span className={"text-accent font-display italic "}>
|
||||
pi<span className="text-primary">.</span> ku
|
||||
<span className="text-primary">.</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "mono") {
|
||||
return (
|
||||
<span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
|
||||
pi. ku.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "logo") {
|
||||
return (
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="Pi. Ku. logo"
|
||||
className="mx-4"
|
||||
width={scale * 100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "inline") {
|
||||
return (
|
||||
<div
|
||||
role="img"
|
||||
aria-label="Pi. Ku. logo"
|
||||
className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
|
||||
style={{ fontFamily: "'Knewave', serif", scale }}
|
||||
>
|
||||
<span className="text-3xl font-light text-accent">Pi</span>
|
||||
<DotIcon
|
||||
weight="fill"
|
||||
size={12}
|
||||
className="text-primary translate-y-1 -mx-px"
|
||||
/>
|
||||
<span className="text-3xl font-light text-accent"> Ku</span>
|
||||
<DotIcon
|
||||
weight="fill"
|
||||
size={12}
|
||||
className="text-primary translate-y-1 -mx-px"
|
||||
/>
|
||||
</div>
|
||||
<span className={"text-accent font-display italic "}>
|
||||
pi<span className="text-primary">.</span> ku
|
||||
<span className="text-primary">.</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "mono") {
|
||||
return (
|
||||
<span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
|
||||
pi. ku.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "logo") {
|
||||
return (
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="Pi. Ku. logo"
|
||||
className="mx-4"
|
||||
width={scale * 100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="img"
|
||||
aria-label="Pi. Ku. logo"
|
||||
className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
|
||||
style={{ fontFamily: "'Knewave', serif", scale }}
|
||||
>
|
||||
<span className="text-3xl font-light text-accent">Pi</span>
|
||||
<DotIcon
|
||||
weight="fill"
|
||||
size={12}
|
||||
className="text-primary translate-y-1 -mx-px"
|
||||
/>
|
||||
<span className="text-3xl font-light text-accent"> Ku</span>
|
||||
<DotIcon
|
||||
weight="fill"
|
||||
size={12}
|
||||
className="text-primary translate-y-1 -mx-px"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,8 +9,14 @@ function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={[mountPath]}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<div data-testid="login-page">Login Page</div>} />
|
||||
<Route path="/drawer" element={<div data-testid="drawer-page">Drawer Page</div>} />
|
||||
<Route
|
||||
path="/login"
|
||||
element={<div data-testid="login-page">Login Page</div>}
|
||||
/>
|
||||
<Route
|
||||
path="/drawer"
|
||||
element={<div data-testid="drawer-page">Drawer Page</div>}
|
||||
/>
|
||||
<Route path="/protected" element={ui} />
|
||||
<Route path="/public" element={ui} />
|
||||
</Routes>
|
||||
|
||||
@@ -3,7 +3,10 @@ import Logo from "./Logo";
|
||||
|
||||
export default function SplashScreen() {
|
||||
return (
|
||||
<div data-testid="splash-screen" className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')">
|
||||
<div
|
||||
data-testid="splash-screen"
|
||||
className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')"
|
||||
>
|
||||
<div className="flex flex-col items-center gap-6 animate-pulse">
|
||||
<Logo />
|
||||
|
||||
|
||||
@@ -1,95 +1,101 @@
|
||||
import { GearFineIcon } from "@phosphor-icons/react";
|
||||
|
||||
interface DrawerSectionProps {
|
||||
id: string;
|
||||
title: string;
|
||||
count: number;
|
||||
subtext: string;
|
||||
isOpen: boolean;
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
icon: React.ReactNode;
|
||||
id: string;
|
||||
title: string;
|
||||
count: number;
|
||||
subtext: string;
|
||||
isOpen: boolean;
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DrawerSection({
|
||||
id,
|
||||
title,
|
||||
count,
|
||||
subtext,
|
||||
isOpen,
|
||||
onClick,
|
||||
children,
|
||||
icon,
|
||||
id,
|
||||
title,
|
||||
count,
|
||||
subtext,
|
||||
isOpen,
|
||||
onClick,
|
||||
children,
|
||||
icon,
|
||||
}: DrawerSectionProps) {
|
||||
return (
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
|
||||
>
|
||||
<div
|
||||
id={id}
|
||||
className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
|
||||
className={`transition-opacity ease-in-out ${
|
||||
isOpen
|
||||
? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
|
||||
: "opacity-0 duration-100"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
|
||||
{children}
|
||||
{count === 0 && (
|
||||
<p
|
||||
data-testid={`empty-drawer-message-${id}`}
|
||||
className="text-center text-base-content/20 mt-4"
|
||||
>
|
||||
<div
|
||||
className={`transition-opacity ease-in-out ${isOpen
|
||||
? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
|
||||
: "opacity-0 duration-100"
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
{count === 0 && (
|
||||
<p data-testid={`empty-drawer-message-${id}`} className="text-center text-base-content/20 mt-4">
|
||||
This drawer remains silent
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
data-testid={`drawer-section-${id}`}
|
||||
className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div
|
||||
data-testid="drawer-section-title"
|
||||
className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${isOpen
|
||||
? "text-base-content"
|
||||
: "text-base-content/40 group-hover:text-base-content/80"
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div className="font-sans text-xs text-base-content/20 mt-1">
|
||||
<span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
|
||||
{count}
|
||||
</span>{" "}
|
||||
<span className="ml-3">{subtext}</span>
|
||||
</div>
|
||||
<div className="absolute right-5 -translate-y-15 text-base-content/4">
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{id === "vault" ? (
|
||||
<GearFineIcon
|
||||
className={
|
||||
"-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral"
|
||||
}
|
||||
weight={"duotone"}
|
||||
size={30}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${isOpen
|
||||
? "bg-primary/80! opacity-80 scale-110"
|
||||
: "group-hover:bg-primary"
|
||||
}`}
|
||||
>
|
||||
<div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
This drawer remains silent
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
data-testid={`drawer-section-${id}`}
|
||||
className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div
|
||||
data-testid="drawer-section-title"
|
||||
className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${
|
||||
isOpen
|
||||
? "text-base-content"
|
||||
: "text-base-content/40 group-hover:text-base-content/80"
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div className="font-sans text-xs text-base-content/20 mt-1">
|
||||
<span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
|
||||
{count}
|
||||
</span>{" "}
|
||||
<span className="ml-3">{subtext}</span>
|
||||
</div>
|
||||
<div className="absolute right-5 -translate-y-15 text-base-content/4">
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{id === "vault" ? (
|
||||
<GearFineIcon
|
||||
className={
|
||||
"-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral"
|
||||
}
|
||||
weight={"duotone"}
|
||||
size={30}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${
|
||||
isOpen
|
||||
? "bg-primary/80! opacity-80 scale-110"
|
||||
: "group-hover:bg-primary"
|
||||
}`}
|
||||
>
|
||||
<div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,10 @@ export function PasskeyModal() {
|
||||
className="text-primary mx-auto mb-8 animate-pulse"
|
||||
weight="duotone"
|
||||
/>
|
||||
<h3 data-testid="passkey-modal-title" className="font-bold text-lg font-display text-primary">
|
||||
<h3
|
||||
data-testid="passkey-modal-title"
|
||||
className="font-bold text-lg font-display text-primary"
|
||||
>
|
||||
You've been away a while.
|
||||
</h3>
|
||||
<p className="py-4 font-sans">
|
||||
|
||||
@@ -123,7 +123,12 @@ export function EnvelopeReveal({
|
||||
<span className={"text-neutral-content/60 font-xs font-display"}>
|
||||
to
|
||||
</span>
|
||||
<h1 data-testid="envelope-recipient" className="text-3xl font-bold text-base-content">{recipient}</h1>
|
||||
<h1
|
||||
data-testid="envelope-recipient"
|
||||
className="text-3xl font-bold text-base-content"
|
||||
>
|
||||
{recipient}
|
||||
</h1>
|
||||
<p className="text-base-content/60 font-display mt-8">{date}</p>
|
||||
<img
|
||||
src={stamp}
|
||||
|
||||
Reference in New Issue
Block a user