filters seem ok

GorlemZ · GorlemZ · commit 671106b93506 · 2023-10-03T11:59:48.000+02:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./i18n";
 import { useTranslation } from "react-i18next";
 import Home from "./pages/Home";
+// import RestaurantDetail from "./pages/RestaurantDetail";
 
 function App() {
   const { t } = useTranslation();
@@ -18,8 +19,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
@@ -1,6 +1,13 @@
-
-import { Card, Stack, Title, Body, Label } from "@buildo/bento-design-system";
+import {
+  Card,
+  Stack,
+  Title,
+  Body,
+  Label,
+  Button,
+} from "@buildo/bento-design-system";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 export interface PreviewProps {
   name: string;
@@ -11,17 +18,24 @@ export interface PreviewProps {
 
 function RestaurantPreview({ name, imageUrl, rating, address }: PreviewProps) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   return (
-    <Card elevation="small" borderRadius={8} paddingX={24} paddingY={40}>
-      <Stack space={8}>
+    <Card elevation="small" borderRadius={8} padding={16} paddingTop={24}>
+      <Stack space={8} align={"center"}>
         <img src={imageUrl} width="70%" height="100%" />
         <Title size="medium">{name}</Title>
         <Body size="medium">
           {address}
           <Label size="small" color="default">
-            {t('Card.Rating', { rating })}
+            {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":{
