Ajout d’un layout global responsive avec React Router 7

1
import { useState } from "react";
2
import { Link } from "react-router";
3
import { Button } from "../ui/button";
4

5
export function Navbar() {
6
  const [open, setOpen] = useState(false);
7
  return (
8
    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
9
      <div className="container mx-auto flex h-16 items-center justify-between px-6">
10
        {/* logo */}
11
        <Link to="/" className="flex items-center gap-2">
12
          <div className="h-8 w-8 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600" />
13
          <span className="text-xl font-light">NEXUS</span>
14
        </Link>
15

16
        {/* liens desktop */}
17
        <div className="hidden md:flex items-center gap-8">
18
          <NavLink to="/">Accueil</NavLink>
19
          <NavLink to="/products">Produits</NavLink>
20
          <NavLink to="/about">À&nbsp;propos</NavLink>
21
          <NavLink to="/contact">Contact</NavLink>
22
        </div>
23

24
        {/* actions */}
25
        <div className="flex items-center gap-4">
26
          {/* panier */}
27
          <button
28
            aria-label="Panier"
29
            className="p-2 text-gray-600 hover:text-black"
30
          >
31
            <CartIcon />
32
          </button>
33

34
          {/* auth desktop */}
35
          <div className="hidden md:flex items-center gap-3">
36
            <Button variant="ghost" size="sm">Connexion</Button>
37
            <Button size="sm">S'inscrire</Button>
38
          </div>
39

40
          {/* burger mobile */}
41
          <button
42
            aria-label="Menu"
43
            onClick={() => setOpen(!open)}
44
            className="md:hidden p-2 text-gray-600 hover:text-black"
45
          >
46
            {open ? <CloseIcon /> : <BurgerIcon />}
47
          </button>
48
        </div>
49
      </div>
50

51
      {/* menu mobile */}
52
      {open && (
53
        <div className="md:hidden fixed inset-0 top-16 bg-white">
54
          <div className="flex h-full flex-col justify-between px-6 py-8">
55
            <div className="flex-1 space-y-8">
56
              <MobileLink to="/" setOpen={setOpen}>Accueil</MobileLink>
57
              <MobileLink to="/products" setOpen={setOpen}>Produits</MobileLink>
58
              <MobileLink to="/about" setOpen={setOpen}>À&nbsp;propos</MobileLink>
59
              <MobileLink to="/contact" setOpen={setOpen}>Contact</MobileLink>
60
            </div>
61
            <div className="space-y-4 border-t pt-8">
62
              <Button variant="ghost" size="lg" className="w-full">
63
                Connexion
64
              </Button>
65
              <Button size="lg" className="w-full">
66
                S'inscrire
67
              </Button>
68
            </div>
69
          </div>
70
        </div>
71
      )}
72
    </nav>
73
  );
74
}
75

76
/* helpers */
77

78
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
79
  return (
80
    <Link
81
      to={to}
82
      className="font-light text-gray-600 transition-colors hover:text-black"
83
    >
84
      {children}
85
    </Link>
86
  );
87
}

1
import { Link } from "react-router";
2

3
export function Footer() {
4
  return (
5
    <footer className="mt-auto border-t bg-white">
6
      <div className="container mx-auto space-y-12 px-6 py-12">
7
        {/* 4 colonnes : brand, nav, modèles, légal */}
8
        <div className="grid gap-8 md:grid-cols-4">
9
          {/* brand */}
10
          <div className="space-y-4">
11
            <Logo />
12
            <p className="font-light text-gray-500">
13
              L'avenir du travail avec nos robots humanoïdes.
14
            </p>
15
            <a
16
              href="mailto:contact@algomax.fr"
17
              className="font-light text-gray-600 hover:text-black"
18
            >
19
              contact@algomax.fr
20
            </a>
21
          </div>
22

23
          {/* navigation générique */}
24
          <FooterColumn title="Navigation">
25
            <FooterLink to="/">Accueil</FooterLink>
26
            <FooterLink to="/products">Produits</FooterLink>
27
            <FooterLink to="/about">À&nbsp;propos</FooterLink>
28
            <FooterLink to="/contact">Contact</FooterLink>
29
            <FooterLink to="/blog">Blog</FooterLink>
30
          </FooterColumn>
31

32
          {/* modèles */}
33
          <FooterColumn title="Nos&nbsp;modèles">
34
            <FooterLink to="/products/nexus-01">NEXUS-01</FooterLink>
35
            <FooterLink to="/products/atlas-02">ATLAS-02</FooterLink>
36
            <FooterLink to="/products/titan-03">TITAN-03</FooterLink>
37
          </FooterColumn>
38

39
          {/* légal */}
40
          <FooterColumn title="Informations">
41
            <FooterLink to="/mentions-legales">Mentions légales</FooterLink>
42
            <FooterLink to="/cgv">CGV</FooterLink>
43
            <FooterLink to="/conditions-utilisation">
44
              Conditions d'utilisation
45
            </FooterLink>
46
            <FooterLink to="/politique-confidentialite">
47
              Politique de confidentialité
48
            </FooterLink>
49
          </FooterColumn>
50
        </div>
51

52
        {/* baseline */}
53
        <p className="border-t pt-8 text-center text-sm text-gray-500">
54
          © {new Date().getFullYear()} NEXUS – Propulsé par&nbsp;
55
          <a
56
            href="https://algomax.fr"
57
            className="text-gray-600 hover:text-black"
58
          >
59
            algomax.fr
60
          </a>
61
        </p>
62
      </div>
63
    </footer>
64
  );
65
}
66

67
/* helpers */
68

69
function FooterColumn({
70
  title,
71
  children,
72
}: {
73
  title: string;
74
  children: React.ReactNode;
75
}) {
76
  return (
77
    <div className="space-y-4">
78
      <h3 className="text-lg font-light">{title}</h3>
79
      <div className="space-y-3">{children}</div>
80
    </div>
81
  );
82
}
83

84
function FooterLink({ to, children }: { to: string; children: React.ReactNode }) {
85
  return (
86
    <Link
87
      to={to}
88
      className="block font-light text-gray-600 transition-colors hover:text-black"
89
    >
90
      {children}
91
    </Link>
92
  );
93
}

1
if (isResponse && error.status === 404) {
2
  return <NotFoundPage />               // page dédiée
3
}

1
<body className="flex min-h-screen flex-col">
2
  <Navbar />
3
  <div className="flex-1">
4
    {children}
5
  </div>
6
  <Footer />
7
  <ScrollRestoration />
8
  <Scripts />
9
</body>

1
app/
2
├── components/
3
│   ├── layout/
4
│   │   ├── navbar.tsx
5
│   │   └── footer.tsx
6
│   └── error-boundary.tsx
7
└── root.tsx