add base front

frontend/src/components/Footer/index.tsx

@@ -0,0 +1,7 @@
+export function Footer() {
+    return (
+        <footer>
+            
+        </footer>
+    );
+}

frontend/src/components/Navbar/index.css

@@ -0,0 +1,12 @@
+nav {
+    display: flex;
+    justify-content: space-between;
+    justify-self: left;
+    width: 50%;
+}
+
+a { 
+    gap: 1em;
+    text-decoration: none;
+}
+

frontend/src/components/Navbar/index.tsx

@@ -0,0 +1,12 @@
+import { NavLink } from "react-router";
+import { t } from "../../config/i18n";
+import "./index.css";
+export function Navbar() {
+    return (
+        <nav>
+            <NavLink to="/">{t("home")}</NavLink>
+            <NavLink to="/dashboard">{t("dashboard")}</NavLink>
+            <NavLink to="/forms">{t("forms")}</NavLink>
+        </nav>
+    );
+}

frontend/src/components/ShipmentCard/index.tsx

@@ -0,0 +1,51 @@
+import { Group, NumberInput, Paper, Stack, Text } from "@mantine/core";
+import { useCallback, useState, type RefAttributes } from "react";
+
+type Product = {
+    name: string;
+    price: number;
+    priceKg: number;
+    unit: string;
+}
+
+export type ShipmentCardProps = {
+    title: string;
+    date: string;
+    product: Product; 
+}
+
+export default function ShipmentCard({title, date, product}: ShipmentCardProps) {
+    
+    const [ price, setPrice ] = useState<number>(0)
+
+    const calculatePrice = useCallback((value: number | string ) => {
+        const numberValue = Number(value)
+        const price = numberValue * product.price
+        setPrice(price)
+    }, [])
+    return (
+        <Paper shadow="xs" p="xl">
+            <Group justify="space-between">
+                <Text>{title}</Text>
+                <Text>{date}</Text>
+            </Group>
+            <Text>{product.name}</Text>
+            <Group>
+                <Stack align="flex-start">
+                    <Text>{product.price} € / piece</Text>
+                    <Text>{product.priceKg} € / kilo</Text>
+                </Stack>
+                <NumberInput
+                    aria-label="select quantity"
+                    description={`Indiquez le nombre de ${product.unit}`}
+                    placeholder={`Quantité en ${product.unit}`}
+                    allowNegative={false}
+                    onChange={calculatePrice}
+                />
+                 <Text size="xs">
+                    {new Intl.NumberFormat('en-us', {minimumFractionDigits: 2}).format(price)}€
+                </Text>
+            </Group>
+        </Paper>          
+    );
+}