jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Refactor header and layout components, remove About page, and introduce Background component for improved UI structure

Browse Source
This commit is contained in:
Jose Selesan
2026-06-01 15:50:33 -03:00
parent 78df95e985
commit c18db76c7a
10 changed files with 41 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/frontend/src/components/background.tsx Normal file
View File

@@ -0,0 +1,15 @@
export function Background() {
return (
<div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-[#040b11] to-[#09131c]" />
<div className="absolute left-0 top-0 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 blur-3xl" />
<div className="absolute right-0 top-24 h-[360px] w-[360px] translate-x-1/3 rounded-full bg-reserved/15 blur-3xl" />
<div className="absolute bottom-0 left-1/2 h-[300px] w-[300px] -translate-x-1/2 translate-y-1/3 rounded-full bg-accent/10 blur-3xl" />
<div className="absolute inset-0 bg-[linear-gradient(to_right,oklch(1_0_0/0.055)_1px,transparent_1px),linear-gradient(to_bottom,oklch(1_0_0/0.055)_1px,transparent_1px)] bg-[size:64px_64px]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#09131c_78%)]" />
</div>
);
}

59
apps/frontend/src/components/header.tsx
View File

@@ -14,7 +14,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { Link, useLocation, useNavigate } from '@tanstack/react-router';
import { Link, useNavigate } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';
import {
@@ -35,40 +35,6 @@ import { acceptStoredPendingInvite } from '@/lib/invitations';
import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
import { useTheme } from '@/lib/theme';
interface NavItemProps {
to: '/' | '/about';
label: string;
isMobile?: boolean;
onClick?: () => void;
}
function NavItem({ to, label, isMobile, onClick }: NavItemProps) {
const location = useLocation();
const currentPath = location.pathname;
const isActive = to === '/' ? currentPath === '/' : currentPath.startsWith(to);
return (
<Link to={to} onClick={onClick}>
<Button
variant="ghost"
size={isMobile ? 'default' : 'sm'}
className={[
'rounded-none transition-all duration-200 hover:bg-transparent',
'focus-visible:ring-2 focus-visible:ring-primary/50',
isMobile && 'w-full justify-start rounded-2xl',
isActive
? 'text-primary relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
: 'text-muted-foreground hover:text-foreground relative hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:right-0 hover:after:h-0.5 hover:after:bg-primary/50',
]
.filter(Boolean)
.join(' ')}
>
{label}
</Button>
</Link>
);
}
export function Header() {
const [open, setOpen] = useState(false);
const navigate = useNavigate();
@@ -113,11 +79,6 @@ export function Header() {
return selected?.complexName ?? complexes[0]?.complexName ?? 'Mi complejo';
}, [complexSlug, myComplexesQuery.data]);
const menuItems = [
{ label: 'Inicio', to: '/' },
{ label: 'About', to: '/about' },
] as const;
const handleSelectComplex = async (complexId: string, nextSlug: string) => {
await apiClient.complexes.select({ complexId });
setCurrentComplex(nextSlug);
@@ -154,12 +115,6 @@ export function Header() {
</span>
</Link>
<nav className="hidden absolute left-1/2 -translate-x-1/2 items-center gap-1 md:flex">
{menuItems.map((item) => (
<NavItem key={item.label} to={item.to} label={item.label} />
))}
</nav>
<div className="flex-1" />
<div className="hidden items-center gap-2 md:flex">
@@ -336,18 +291,6 @@ export function Header() {
</div>
</div>
<nav className="flex flex-col gap-1">
{menuItems.map((item) => (
<NavItem
key={item.label}
to={item.to}
label={item.label}
isMobile
onClick={() => setOpen(false)}
/>
))}
</nav>
<Button
className="rounded-2xl shadow-lg shadow-primary/20"
onClick={() => {

17
apps/frontend/src/components/layout.tsx
View File

@@ -1,3 +1,4 @@
import { Background } from '@/components/background';
import { useIsMobile } from '@/hooks/use-mobile';
import { useLocation } from '@tanstack/react-router';
import type { ReactNode } from 'react';
@@ -28,19 +29,3 @@ export function Layout({ children }: LayoutProps) {
</div>
);
}
function Background() {
return (
<div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-[#040b11] to-[#09131c]" />
<div className="absolute left-0 top-0 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 blur-3xl" />
<div className="absolute right-0 top-24 h-[360px] w-[360px] translate-x-1/3 rounded-full bg-reserved/15 blur-3xl" />
<div className="absolute bottom-0 left-1/2 h-[300px] w-[300px] -translate-x-1/2 translate-y-1/3 rounded-full bg-accent/10 blur-3xl" />
<div className="absolute inset-0 bg-[linear-gradient(to_right,oklch(1_0_0/0.055)_1px,transparent_1px),linear-gradient(to_bottom,oklch(1_0_0/0.055)_1px,transparent_1px)] bg-[size:64px_64px]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#09131c_78%)]" />
</div>
);
}