大改变

components/fundmarket/ViewToggle.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Button } from "@heroui/react";
+import Image from "next/image";
+
+type ViewMode = "grid" | "list";
+
+interface ViewToggleProps {
+  value: ViewMode;
+  onChange: (mode: ViewMode) => void;
+}
+
+export default function ViewToggle({ value, onChange }: ViewToggleProps) {
+  return (
+    <div className="bg-gray-200 dark:bg-gray-700 rounded-lg p-1 flex gap-0">
+      <Button
+        isIconOnly
+        size="sm"
+        variant="light"
+        onPress={() => onChange("list")}
+        className={`w-8 h-8 min-w-8 rounded-lg transition-all ${
+          value === "list"
+            ? "bg-white dark:bg-gray-600 shadow-sm"
+            : "bg-transparent hover:bg-gray-300 dark:hover:bg-gray-600"
+        }`}
+        style={{ padding: 0 }}
+      >
+        <Image
+          src="/edit-list-unordered0.svg"
+          alt="List view"
+          width={24}
+          height={24}
+        />
+      </Button>
+      <Button
+        isIconOnly
+        size="sm"
+        variant="light"
+        onPress={() => onChange("grid")}
+        className={`w-8 h-8 min-w-8 rounded-lg transition-all ${
+          value === "grid"
+            ? "bg-white dark:bg-gray-600 shadow-sm"
+            : "bg-transparent hover:bg-gray-300 dark:hover:bg-gray-600"
+        }`}
+        style={{ padding: 0 }}
+      >
+        <Image
+          src="/menu-more-grid-small0.svg"
+          alt="Grid view"
+          width={24}
+          height={24}
+        />
+      </Button>
+    </div>
+  );
+}