refactor: move DrawerSection component and implement image encryption/decryption tests

2026-05-04 08:56:52 +00:00 · 2026-04-14 00:03:56 +05:30
parent b64288c5dd
commit 1f94df1309
9 changed files with 322 additions and 109 deletions
@@ -0,0 +1,64 @@
+interface DrawerSectionProps {
+  id: string;
+  title: string;
+  count: string;
+  isOpen: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+export function DrawerSection({
+  id,
+  title,
+  count,
+  isOpen,
+  onClick,
+  children,
+}: DrawerSectionProps) {
+  return (
+    <div
+      id={id}
+      className={`join-item group flex flex-col transition-colors ${isOpen ? "bg-base-300/30" : ""}`}
+    >
+      <div
+        className={`overflow-hidden transition-all duration-1000 ease-in-out bg-neutral/10 ${
+          isOpen
+            ? "max-h-125 opacity-100 py-3 border-b border-base-content/5"
+            : "max-h-0 opacity-0"
+        }`}
+      >
+        {children}
+      </div>
+
+      <button
+        type="button"
+        onClick={onClick}
+        className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-1000 outline-none focus-visible:ring-2 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
+            className={`font-sans text-xs tracking-[0.2em] uppercase transition-colors duration-300 ${
+              isOpen
+                ? "text-base-content"
+                : "text-base-content/40 group-hover:text-base-content/80"
+            }`}
+          >
+            {title}
+          </div>
+          <div className="font-sans text-[0.6rem] text-base-content/20 mt-1">
+            {count}
+          </div>
+        </div>
+        <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>
+  );
+}