优化代码，拆分组件

src/components/Window.tsx

@@ -0,0 +1,12 @@
+"use client";
+interface WindowProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+export default function Window({ children }: WindowProps) {
+  return (
+    <div className="w-full bg-gray-200 h-screen flex justify-center items-center">
+      {children}
+    </div>
+  );
+}

src/components/buttons/DarkButton.tsx

@@ -1,4 +1,6 @@
-export default function Button({
+import PlainButton from "./PlainButton";
+
+export default function DarkButton({
   onClick,
   className,
   selected,
@@ -10,11 +12,11 @@ export default function Button({
   children?: React.ReactNode;
 }) {
   return (
-    <button
+    <PlainButton
       onClick={onClick}
-      className={`px-2 py-1 rounded shadow-2xs font-bold hover:bg-gray-300 hover:cursor-pointer ${selected ? "bg-gray-300" : "bg-white"} ${className}`}
+      className={`hover:bg-gray-600 text-white ${selected ? "bg-gray-600" : "bg-gray-800"} ${className}`}
     >
       {children}
-    </button>
+    </PlainButton>
   );
 }

src/components/buttons/LightButton.tsx

@@ -0,0 +1,22 @@
+import PlainButton from "./PlainButton";
+
+export default function LightButton({
+  onClick,
+  className,
+  selected,
+  children,
+}: {
+  onClick?: () => void;
+  className?: string;
+  selected?: boolean;
+  children?: React.ReactNode;
+}) {
+  return (
+    <PlainButton
+      onClick={onClick}
+      className={`hover:bg-gray-200 text-gray-800 ${selected ? "bg-gray-200" : "bg-white"} ${className}`}
+    >
+      {children}
+    </PlainButton>
+  );
+}

src/components/buttons/PlainButton.tsx

@@ -0,0 +1,18 @@
+export default function PlainButton({
+  onClick,
+  className,
+  children,
+}: {
+  onClick?: () => void;
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-2 py-1 rounded shadow font-bold hover:cursor-pointer ${className}`}
+    >
+      {children}
+    </button>
+  );
+}

src/components/cards/ACard.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+interface ACardProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function ACard({ children, className }: ACardProps) {
+  return (
+    <div
+      className={`${className} w-[61vw] h-96 p-2 shadow-2xl bg-white rounded-xl`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/cards/BCard.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+interface BCardProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function BCard({ children, className }: BCardProps) {
+  return (
+    <div className={`${className} rounded-xl p-2 shadow-xl`}>{children}</div>
+  );
+}