fix: layout update

package.json

@@ -14,7 +14,6 @@
     "test": "jest"
   },
   "dependencies": {
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",

src/app/_components/store-scroll-area.tsx

@@ -17,7 +17,7 @@ export function StoreScrollArea({ storeList }: { storeList: SelectStore[] }) {
             <Card className="flex w-[125px] cursor-pointer flex-col overflow-hidden text-center md:w-[200px]">
               <div className="rounded-md">
                 <Image
-                  src={"/1.jpeg"}
+                  src={store.image}
                   alt={`${store.name}`}
                   className="aspect-[2/1] w-full object-cover"
                   width={100}

src/app/cart/page.tsx

@@ -2,13 +2,13 @@ import { getServerSession } from "next-auth";
 
 import { eq } from "drizzle-orm";
 
+import CartItem from "@/components/cart-item";
 import GridContainer from "@/components/grid-container";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { db } from "@/db";
 import { carts } from "@/db/schema";
 import { authOptions } from "@/lib/auth-options";
-import CartItem from "@/components/cart-item";
 
 export default async function Cart() {
   const session = await getServerSession(authOptions);

src/app/info/_components/reservation-card.tsx

@@ -7,7 +7,7 @@ export function ReservationCard({
   price,
   quantity,
   status,
-  image
+  image,
 }: {
   name: string;
   price: number;

src/app/store/[storeId]/page.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 import { eq } from "drizzle-orm";
 import { ChevronLeft } from "lucide-react";
 import { BellPlus } from "lucide-react";
@@ -34,6 +36,14 @@ export default async function Store({
         <BellPlus className="h-4 w-4 cursor-pointer" />
       </div>
 
+      <Image
+        width={"600"}
+        height={"600"}
+        src={store.stores.image}
+        alt="banner"
+        className=" aspect-[3/1] rounded object-cover"
+      />
+
       <Separator />
 
       <GridContainer>

src/components/banner.tsx

@@ -4,15 +4,12 @@ import Image from "next/image";
 
 import Autoplay from "embla-carousel-autoplay";
 
-import { Card } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
 } from "@/components/ui/carousel";
 
-import { AspectRatio } from "./ui/aspect-ratio";
-
 type BannerProps = {
   bannerList: {
     url: string;
@@ -32,17 +29,13 @@ export function Banner({ bannerList }: BannerProps) {
       <CarouselContent>
         {bannerList.map((_, index) => (
           <CarouselItem key={index} className="md:basis-1/2 2xl:basis-1/3">
-            <Card>
-              <AspectRatio ratio={3 / 1}>
-                <Image
-                  width={"600"}
-                  height={"600"}
-                  src={bannerList[index].url}
-                  alt="banner"
-                  className="w-full rounded object-cover"
-                />
-              </AspectRatio>
-            </Card>
+            <Image
+              width={"600"}
+              height={"600"}
+              src={bannerList[index].url}
+              alt="banner"
+              className="aspect-[3/1] w-full rounded object-cover"
+            />
           </CarouselItem>
         ))}
       </CarouselContent>

src/components/cart-item.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import useCart from "@/hooks/use-cart";
+
 import ImageCard from "./supplier/image-card";
 
 export default function CartItem({
@@ -16,18 +17,18 @@ export default function CartItem({
   price: number;
   image: string;
 }) {
-  const { updateCart } = useCart()
+  const { updateCart } = useCart();
   const handleUpdateCart = async (number: number) => {
-    await updateCart(id, number)
-  }
+    await updateCart(id, number);
+  };
 
   return (
     <ImageCard
       href={`#`}
-      counter={({
+      counter={{
         amount: quantity,
-        setAmount: handleUpdateCart
-      })}
+        setAmount: handleUpdateCart,
+      }}
       image={image || ""}
     >
       <div className="flex justify-between">

src/components/dish.tsx

@@ -2,14 +2,11 @@
 
 import { useState } from "react";
 
-import Image from "next/image";
-
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import type { SelectPostDish, SelectStoreDish } from "@/lib/type";
-import { cn } from "@/lib/utils";
 
 import ReservationDialog from "./reservation-dialog";
+import ImageCard from "./supplier/image-card";
 
 export default function Dish({
   dish,
@@ -21,55 +18,43 @@ export default function Dish({
 
   return (
     <>
-      <div className="flex w-full justify-between md:max-w-screen-sm">
-        <div className="w-56 min-w-[120px]">
-          <Image
-            src={dish.image}
-            className={cn("aspect-square w-full rounded object-cover")}
-            width={100}
-            height={100}
-            alt={dish.name}
-          />
-        </div>
-
-        <div className="flex w-full flex-col justify-between px-4">
-          <div className="flex w-full flex-col">
-            <div className="flex justify-between">
-              <h1 className="font-semibold">{dish.name}</h1>
-              <span className="text-sm">
-                {dish.price !== 0 ? `$${dish.price}` : "免費"}
-              </span>
-            </div>
+      <ImageCard image={dish.image}>
+        <div className="flex flex-col">
+          <h1 className="line-clamp-1 font-semibold">{dish.name}</h1>
 
+          <div className="flex items-center space-x-2">
+            <span className="text-sm">
+              {dish.price !== 0 ? `$${dish.price}` : "free"}
+            </span>
             <div className="text-xs font-light text-muted-foreground">
               Remaining: {dish.quantity}
             </div>
-            <span className="my-2 h-10 w-full overflow-hidden text-ellipsis text-wrap text-xs text-muted-foreground">
-              {dish.description}
-            </span>
           </div>
 
-          <div className="flex space-x-2">
-            <Button
-              className="h-8 w-20 text-xs"
-              onClick={() => {
-                setSave(!save);
-              }}
-            >
-              Cart
-            </Button>
-            <Button
-              className="h-8 w-20 text-xs"
-              onClick={() => {
-                setReserve(!reserve);
-              }}
-            >
-              Reserve
-            </Button>
-          </div>
+          <span className="my-2 line-clamp-1 text-xs text-muted-foreground">
+            {dish.description}
+          </span>
+        </div>
+
+        <div className="flex space-x-2">
+          <Button
+            className="h-7 w-20 text-xs"
+            onClick={() => {
+              setSave(!save);
+            }}
+          >
+            Cart
+          </Button>
+          <Button
+            className="h-7 w-20 text-xs"
+            onClick={() => {
+              setReserve(!reserve);
+            }}
+          >
+            Reserve
+          </Button>
         </div>
-      </div>
-      <Separator className="md:hidden" />
+      </ImageCard>
       <ReservationDialog
         title="Cart"
         open={save}

src/components/supplier/image-card.tsx

@@ -30,18 +30,18 @@ export default function ImageCard({
   return (
     <Card
       onClick={() => handleRouting()}
-      className="z-0 flex max-h-32 w-full cursor-pointer overflow-hidden text-ellipsis text-center"
+      className="z-0 flex h-32 cursor-pointer flex-nowrap text-center"
     >
       <Image
         src={image}
         alt="image"
-        className="aspect-[1/1] object-cover"
-        width={100}
-        height={100}
+        className="aspect-square object-cover"
+        width={144}
+        height={144}
       />
 
-      <div className="flex w-full justify-between">
-        <div className="flex flex-col px-4 py-3 text-left">{children}</div>
+      <div className="flex justify-between">
+        <div className="px-4 py-3 text-left">{children}</div>
 
         {counter && (
           <div className="mr-4 flex items-center justify-between space-x-2">

src/components/supplier/post.tsx

@@ -10,10 +10,7 @@ export function Post({
   post: SelectPost & { postDishes: SelectPostDish };
 }) {
   return (
-    <ImageCard
-      href={`/post/${post.id}`}
-      image={post.postDishes?.image}
-    >
+    <ImageCard href={`/post/${post.id}`} image={post.postDishes?.image}>
       <div className="flex justify-between">
         <h1 className="font-semibold">{post.title}</h1>
       </div>

src/components/supplier/store.tsx

@@ -2,13 +2,9 @@ import type { SelectStore } from "@/lib/type";
 
 import ImageCard from "./image-card";
 
-export function Store({
-  store,
-}: {
-  store: SelectStore;
-}) {
+export function Store({ store }: { store: SelectStore }) {
   return (
-    <ImageCard href={`/store/${store.id}`} image="/1.jpeg">
+    <ImageCard href={`/store/${store.id}`} image={store.image}>
       <div className="flex justify-between">
         <h1 className="font-semibold">{store.name}</h1>
       </div>

src/db/schema.ts

@@ -55,6 +55,7 @@ export const stores = pgTable("stores", {
   userId: serial("user_id")
     .notNull()
     .references(() => users.id, { onDelete: "cascade" }),
+  image: varchar("image").notNull(),
 });
 
 export const storesRelations = relations(stores, ({ many }) => ({

yarn.lock

@@ -1141,14 +1141,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-aspect-ratio@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz#d1a15d6953203e6fd7f5b569fae77c88c1880125"
-  integrity sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.3"
-
 "@radix-ui/react-avatar@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623"