53 lines
2.7 KiB
TypeScript
53 lines
2.7 KiB
TypeScript
|
||
import React from 'react';
|
||
import { CATEGORIES } from '../constants';
|
||
|
||
export const Categories: React.FC = () => {
|
||
return (
|
||
<div className="flex flex-col h-full bg-background-dark">
|
||
<div className="h-10 w-full"></div>
|
||
|
||
<div className="flex flex-col gap-2 px-4 pb-2 sticky top-0 z-20 bg-background-dark/95 backdrop-blur-md">
|
||
<div className="flex items-center h-12 justify-between">
|
||
<span className="text-white/60 text-sm font-medium">Изменить</span>
|
||
<button className="flex items-center justify-center rounded-full size-10 bg-primary/10 text-primary">
|
||
<span className="material-symbols-outlined text-[24px]">add</span>
|
||
</button>
|
||
</div>
|
||
<h1 className="text-white tracking-tight text-[32px] font-bold leading-tight">Категории</h1>
|
||
</div>
|
||
|
||
<div className="px-4 py-2 sticky top-[108px] z-10 bg-background-dark pb-4">
|
||
<div className="flex w-full items-stretch rounded-lg h-10 bg-card-dark overflow-hidden transition-all duration-200">
|
||
<div className="text-white/40 flex items-center justify-center pl-3 pr-2">
|
||
<span className="material-symbols-outlined text-[20px]">search</span>
|
||
</div>
|
||
<input className="bg-transparent border-none focus:ring-0 placeholder:text-white/40 px-0 text-base text-white flex-1" placeholder="Поиск жанра..." />
|
||
<div className="flex items-center pr-3">
|
||
<span className="material-symbols-outlined text-[20px] text-white/40">mic</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 flex flex-col px-4 pb-24 gap-3 overflow-y-auto no-scrollbar">
|
||
{CATEGORIES.map((cat) => (
|
||
<button key={cat.id} className="group flex items-center gap-4 bg-card-dark p-4 rounded-xl shadow-sm hover:shadow-md active:scale-[0.98] transition-all border border-white/5">
|
||
<div className={`flex items-center justify-center rounded-lg ${cat.colorClass} shrink-0 size-12`}>
|
||
<span className="material-symbols-outlined text-[24px]">{cat.icon}</span>
|
||
</div>
|
||
<div className="flex flex-col flex-1 items-start">
|
||
<p className="text-white text-[17px] font-semibold leading-snug">{cat.name}</p>
|
||
<p className="text-white/50 text-[13px] font-medium leading-normal">
|
||
{cat.count > 0 ? `${cat.count} книги` : 'Нет книг'}
|
||
</p>
|
||
</div>
|
||
<div className="shrink-0 text-white/20 group-hover:text-primary transition-colors">
|
||
<span className="material-symbols-outlined text-[24px]">chevron_right</span>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|