initial

books/screens/Categories.tsx

@@ -0,0 +1,52 @@
+
+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>
+  );
+};