Why not just use cn for styling in PetSoft video 275

[Rope-a-dope]

cn is what we just learned and it is the perfect case to use it. The only thing we have to do is to change SearchForm to accept props and update the code with no self closing tags.

import Branding from "@/components/branding";
import ContentBlock from "@/components/content-block";
import PetDetails from "@/components/pet-details";
import PetList from "@/components/pet-list";
import SearchForm from "@/components/search-form";
import Stats from "@/components/stats";

export default function Page() {
  return (
    <main>
      <div className="flex items-center justify-between text-white py-8">
        <Branding />

        <Stats />
      </div>

      <div className="grid grid-cols-3 grid-rows-[45px_1fr] gap-4 h-[600px]">
        <SearchForm className="row-start-1 row-span-1 col-start-1 col-span-1"></SearchForm>

        <ContentBlock className="row-start-2 row-span-full col-start-1 col-span-1">
          <PetList />
        </ContentBlock>
        <ContentBlock className="row-start-1 row-span-full col-start-2 col-span-full">
          <PetDetails />
        </ContentBlock>
      </div>
    </main>
  );
}

import { cn } from "@/lib/utils";
import React from "react";

type SearchFormProps = {
  className?: string;
};

export default function SeachForm({ className }: SearchFormProps) {
  return (
    <form className={cn("w-full h-full", className)}>
      <input className="w-full h-full bg-white/20" />
    </form>
  );
}