filters seem ok

GorlemZ · GorlemZ · commit b8d4b043abac · 2023-10-19T12:40:13.000+02:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import { BentoProvider, Headline, Inset } from "@buildo/bento-design-system";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import Home from "./pages/Home";
+// import RestaurantDetail from "./pages/RestaurantDetail";
 
 function App() {
   const { t } = useTranslation();
@@ -19,8 +20,8 @@ function App() {
           </Headline>
         </Inset>
         <Routes>
-          <Route path="/" element={<Home />} />
-          {/* <Route path="/" element={<Restaurant />} /> */}
+          <Route path="/home" element={<Home />} />
+          {/* <Route path="/restaurat-detail" element={<RestaurantDetail />} /> */}
         </Routes>
       </BrowserRouter>
     </BentoProvider>
diff --git a/src/components/RestaurantPreview.tsx b/src/components/RestaurantPreview.tsx
@@ -4,10 +4,11 @@ import {
   Title,
   Body,
   Label,
-  Box,
+  Button,
 } from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
 import { PreviewProp } from "../models";
+import { useNavigate } from "react-router-dom";
 
 function RestaurantPreview(props: PreviewProp) {
   const { t } = useTranslation();
@@ -17,20 +18,25 @@ function RestaurantPreview(props: PreviewProp) {
       ? "https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Barbieri_-_ViaSophia25668.jpg/1200px-Barbieri_-_ViaSophia25668.jpg"
       : props.imageUrl;
 
+  const navigate = useNavigate();
   return (
-    <Card elevation="small" borderRadius={8} paddingX={24} paddingY={40}>
-      <Stack space={8}>
-        <Box height="full" justifyContent="center" alignItems="center">
-          <img src={imagePrev} width="70%" height="100px" />
-        </Box>
-
-        <Title size="small">{props.name}</Title>
-        <Body size="small">
+    <Card elevation="small" borderRadius={8} padding={16} paddingTop={24}>
+      <Stack space={8} align={"center"}>
+        <img src={imagePrev} width="70%" height="100%" />
+        <Title size="medium">{props.name}</Title>
+        <Body size="medium">
           {props.address}
+
           <Label size="small" color="default">
             {t("Card.Rating", { rating })}
           </Label>
         </Body>
+        <Button
+          onPress={() => navigate("//restaurat-detail")}
+          kind="transparent"
+          label={t("Card.ButtonLabel")}
+          hierarchy="primary"
+        ></Button>
       </Stack>
     </Card>
   );
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1,7 +1,8 @@
 {
     "title": "YelpLike",
     "Card": {
-      "Rating": "Rating: {{rating}} ★"
+      "Rating": "Rating: {{rating}} ★",
+      "ButtonLabel":"See details"
     },
     "priceRangefilter":"Filter by average price : ",
     "Location":{
