price theming

app/components/Price.tsx

@@ -0,0 +1,29 @@
+import { PRICE } from "@prisma/client";
+
+export default function Price({ price }: { price: PRICE }) {
+  const renderPrice = () => {
+    if (price === PRICE.CHEAP) {
+      return (
+        <>
+          <span>$$</span><span className="text-gray-400">$$</span>
+        </>
+      );
+    }
+    if (price === PRICE.REGULAR) {
+      return (
+        <>
+          <span>$$$</span><span className="text-gray-400">$</span>
+        </>
+      );
+    }
+    if (price === PRICE.EXPENSIVE) {
+      return (
+        <>
+          <span>$$$$</span>
+        </>
+      );
+    }
+  };
+
+  return <p className="flex mr-3">{renderPrice()}</p>;
+}

app/components/RestaurantCard.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { RestaurantCardType } from "../page";
+import Price from "./Price";
 
 interface Props {
   restaurant: RestaurantCardType;
@@ -22,7 +23,7 @@ export default function RestaurantCard({restaurant}: Props) {
           </div>
           <div className="flex text-reg font-light capitalize">
             <p className=" mr-3">{restaurant.cuisine.name}</p>
-            <p className="mr-3">$$$$</p>
+            <Price price={restaurant.price} />
             <p>{restaurant.location.name}</p>
           </div>
           <p className="text-sm mt-1 font-bold">Booked 3 times today</p>