change like icon

components/icons.tsx

@@ -10,6 +10,7 @@ import {
     File,
     FileText,
     Gamepad2,
+    Heart,
     HelpCircle,
     Home,
     Image,
@@ -70,6 +71,7 @@ export const Icons: IconsType = {
     sun: SunMedium, // Light Mode Toggle Nav
     moon: Moon, // Dark Mode Toggle Nav
     arrowdown: ArrowDown, // Descending Sort
+    heart: Heart, // Like Button
     close: X,
     spinner: Loader2,
     chevronLeft: ChevronLeft,

components/like-button.tsx

@@ -3,6 +3,8 @@
 import { Prisma } from "@prisma/client";
 import { useRouter } from "next/navigation";
 import { startTransition } from "react";
+import { Icons } from "./icons";
+import { Button } from "./ui/button";
 
 type likeType = Prisma.LikeUncheckedCreateInput
 
@@ -32,9 +34,9 @@ export default function LikeButton(props: { data: likeType }) {
   return (
     <div>
       <form onSubmit={postLike}>
-        <button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
-          Like
-        </button>
+        <Button type="submit" variant="ghost" size="lg" className="float-right" >
+          <Icons.heart className="h-3 w-3" />
+        </Button>
       </form>
     </div>
   )