refactor: change html button to mantine button

commonground-project · Nov 26, 2024 · 6b1460b · 6b1460b
1 parent 0e58d7b
commit 6b1460b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 15 deletions.
diff --git a/src/components/AuthorViewpoint/FactListCard.tsx b/src/components/AuthorViewpoint/FactListCard.tsx
@@ -1,7 +1,7 @@
 import { Fact } from "@/types/conversations.types";
 import EditViewpointFact from "@/components/AuthorViewpoint/EditViewpointFact";
 import { MagnifyingGlassIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { TextInput } from "@mantine/core";
+import { Select, Button } from "@mantine/core";
 
 type FactListCardProps = {
     facts: Fact[];
@@ -15,8 +15,15 @@ export default function FactListCard({ facts }: FactListCardProps) {
             </h1>
             <div className="mb-2 flex w-full items-center py-1 pr-[52px]">
                 <MagnifyingGlassIcon className="inline-block h-5 w-5 stroke-neutral-500" />
-                <TextInput
+                <Select
                     variant="unstyled"
+                    searchable
+                    data={[
+                        "This development could disrupt the EV market",
+                        "Google.com",
+                        "CommonGround",
+                    ]}
+                    checkIconPosition="right"
                     radius={0}
                     w="100%"
                     classNames={{
@@ -33,12 +40,17 @@ export default function FactListCard({ facts }: FactListCardProps) {
                         </div>
                     ))}
                 </div>
-                <div className="mt-2 pl-7">
-                    <button className="flex items-center gap-2 text-neutral-600">
-                        <PlusIcon className="h-6 w-6" />
-                        <h1 className="text-base font-normal">引入一條事實</h1>
-                    </button>
-                </div>
+
+                <Button
+                    variant="transparent"
+                    leftSection={<PlusIcon className="h-6 w-6" />}
+                    classNames={{
+                        root: "px-0 ml-7 mt-2 text-neutral-600 text-base font-normal hover:text-emerald-500 duration-300",
+                        section: "mr-2",
+                    }}
+                >
+                    引入一條事實
+                </Button>
             </div>
         </div>
     );

diff --git a/src/components/AuthorViewpoint/ViewpointCard.tsx b/src/components/AuthorViewpoint/ViewpointCard.tsx
@@ -1,5 +1,5 @@
 import { TrashIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { TextInput, Textarea } from "@mantine/core";
+import { Button, TextInput, Textarea } from "@mantine/core";
 
 export default function ViewpointCard() {
     return (
@@ -26,14 +26,28 @@ export default function ViewpointCard() {
                 }}
             />
             <div className="flex justify-end gap-3">
-                <button className="flex h-8 w-[76px] items-center justify-center gap-1 rounded-[4px] border-[1px] border-neutral-600 stroke-neutral-600 text-sm font-normal text-neutral-600">
-                    <TrashIcon className="inline-block h-5 w-5" />
+                <Button
+                    variant="outline"
+                    color="#525252"
+                    leftSection={<TrashIcon className="h-5 w-5" />}
+                    classNames={{
+                        root: "px-0 h-8 w-[76px] text-sm font-normal text-neutral-600",
+                        section: "mr-1",
+                    }}
+                >
                     刪除
-                </button>
-                <button className="flex h-8 w-[76px] items-center justify-center gap-1 rounded-[4px] border-[1px] border-blue-600 bg-blue-600 text-sm font-normal text-white">
-                    <PlusIcon className="inline-block h-5 w-5" />
+                </Button>
+                <Button
+                    variant="filled"
+                    color="#2563eb"
+                    leftSection={<PlusIcon className="h-5 w-5" />}
+                    classNames={{
+                        root: "px-0 h-8 w-[76px] text-sm font-normal text-white",
+                        section: "mr-1",
+                    }}
+                >
                     發表
-                </button>
+                </Button>
             </div>
         </div>
     );