ldc-ovoteam/resources/ts/front/Pages/Search.tsx

// * REACT/INERTIA
import Head from "@/front/Components/Base/Head";
import { useForm } from "@inertiajs/react";
// * SHADCN
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
// * LUCIDE
import { SearchIcon, X } from "lucide-react";
// * THEME
import BackToHome from "$/uwil/BackToHome";
import ItemCard from "$/uwil/ItemCard";
import ListSectionTitle from "$/uwil/ListSectionTitle";
import PageHeader from "$/uwil/PageHeader";
import Section from "$/uwil/Section";
import AppLayout from "../Layouts/AppLayout";
// * BASE
import InputError from "$/base/InputError";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import React from "react";
import { verticalPlacements } from "../lib/constants";

export default function Search() {
  const { data, setData, processing, errors } = useForm({
    search: "",
  });
  const submit = (e: React.SubmitEvent) => {
    e.preventDefault();
  };
  return (
    <AppLayout>
      <Head
        seoTitle="Recherchez parmi toutes nos références."
        seoDescription="Parcourez les gammes de produits Ovoteam pour trouver le produit qui répondra à votre besoin."
      />
      <PageHeader
        title={{
          text: "Rechercher",
        }}
        description={{
          text: "Plein Air, Sol ou Bio, tous nos produits & recettes sont disponibles ci-dessous.",
        }}
      />
      <Section className="py-0 pt-20 hidden md:block">
        <form onSubmit={submit} className="max-w-lg mx-auto">
          <InputGroup className="rounded-full h-10">
            <InputGroupInput
              value={data.search}
              onChange={(e) => setData("search", e.target.value)}
              disabled={processing}
              placeholder="Rechercher..."
            />
            <InputGroupAddon align="inline-end">
              <Button variant="ghost" className="w-7 py-0 h-7">
                <X />
              </Button>
              <Button variant="ghost" className="rounded-full w-7 py-0 h-7">
                <SearchIcon />
              </Button>
            </InputGroupAddon>
          </InputGroup>
          <InputError message={errors?.search} />
        </form>
      </Section>

      <Section
        button={{
          href: "/FIXME",
          label: str(trans("front.see.all_products")).ucFirst().value(),
          icon: {
            icon: "chevron-right",
          },
          placement: verticalPlacements.TOP,
        }}
      >
        <ListSectionTitle />
        <div className="inline-grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-10 lg:gap-16">
          {["1", "2", "3", "4"].map((i) => {
            return (
              <div key={i}>
                <ItemCard
                  image={{
                    alt: "alt",
                    title: "title",
                    src: "/assets/img/elephant.jpg",
                  }}
                  title={{
                    text: "Œuf poché moulé",
                  }}
                  button={{
                    label: "Voir le produit",
                    href: "/ddd",
                  }}
                />
              </div>
            );
          })}
        </div>
      </Section>
      <Section
        className="pb-10"
        button={{
          href: "/FIXME",
          label: str(trans("front.see.all_products")).ucFirst().value(),
          icon: {
            icon: "chevron-right",
          },
          placement: verticalPlacements.BOTTOM,
        }}
      >
        <ListSectionTitle />
        <div className="inline-grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-10 lg:gap-16">
          {["1", "2", "3", "4"].map((i) => {
            return (
              <div key={i}>
                <ItemCard
                  image={{
                    alt: "alt",
                    title: "title",
                    src: "/assets/img/elephant.jpg",
                  }}
                  title={{
                    text: "Œuf poché moulé",
                  }}
                  button={{
                    label: "Voir le produit",
                    href: "/ddd",
                  }}
                />
              </div>
            );
          })}
        </div>
      </Section>
      <Section className="py-0 pb-20">
        <BackToHome />
      </Section>
    </AppLayout>
  );
}