完成了对记忆功能的升级

src/app/(features)/memorize/FolderSelector.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Container from "@/components/cards/Container";
+import { folder } from "../../../../generated/prisma/client";
+import { Folder } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Center } from "@/components/Center";
+
+interface FolderSelectorProps {
+  folders: (folder & { total_pairs: number })[];
+}
+
+const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
+  const router = useRouter();
+  return (
+    <Center>
+      <Container className="p-6 gap-4 flex flex-col">
+        {(folders.length === 0 && (
+          <h1 className="text-2xl text-gray-900 font-light">
+            No folders found.
+          </h1>
+        )) || (
+          <>
+            <h1 className="text-2xl text-gray-900 font-light">
+              Select a folder:
+            </h1>
+            <div className="text-gray-900 border border-gray-200 rounded-2xl max-h-96 overflow-y-auto">
+              {folders.map((folder) => (
+                <div
+                  key={folder.id}
+                  onClick={() =>
+                    router.push(`/memorize?folder_id=${folder.id}`)
+                  }
+                  className="flex flex-row justify-center items-center group p-2 gap-2 hover:cursor-pointer hover:bg-gray-50"
+                >
+                  <Folder />
+                  <div className="flex-1 flex gap-2">
+                    <span className="group-hover:text-blue-500">
+                      {folder.name}
+                    </span>
+                    <span>({folder.total_pairs})</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </Container>
+    </Center>
+  );
+};
+
+export default FolderSelector;