car

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

CustomButtonに渡す要素はbtnType,title,containerStyles, textStyles,handleClick

型定義(CustomButtonProps)

export interface CustomButtonProps {
    isDisabled?: boolean;     //true or falseなのでboolean
    btnType?: "button" | "submit";
    containerStyles?: string;
    textStyles?: string;
    title: string;
    righIcon?: string;
    handleClick?: MouseEventHandler<HTMLButtonElement>;
}

disabled属性を指定した要素を無効化します。正確には disabled=disabled と書きますが、単に disabled と指定しても構いません。要素が無効化されると、ボタンは押せなくなり、テキストは入力できなくなり、選択ボックスは選択できなくなります。

  <button
    disabled={isDisabled}
    type={btnType || "button"}
    className={`custom-btn ${containerStyles}`}
    onClick={handleClick}
  >

footer

constantsフォルダに格納されているfooterLinksをmapで取り出し表示させます。

export const footerLinks = [
  {
    title: "About",
    links: [
      { title: "How it works", url: "/" },
      { title: "Featured", url: "/" },
      { title: "Partnership", url: "/" },
      { title: "Bussiness Relation", url: "/" },
    ],
  },
  {
    title: "Company",
    links: [
      { title: "Events", url: "/" },
      { title: "Blog", url: "/" },
      { title: "Podcast", url: "/" },
      { title: "Invite a friend", url: "/" },
    ],
  },
  {
    title: "Socials",
    links: [
      { title: "Discord", url: "/" },
      { title: "Instagram", url: "/" },
      { title: "Twitter", url: "/" },
      { title: "Facebook", url: "/" },
    ],
  },
];

SearchButtonを定義します。
otherClassesで渡された

const SearchButton = ({ otherClasses }: { otherClasses: string }) => (
  <button type='submit' className={`-ml-3 z-10 ${otherClasses}`}>
    <Image
      src={"/magnifying-glass.svg"}
      alt={"magnifying glass"}
      width={40}
      height={40}
      className='object-contain'
    />
  </button>
);

検索

SearchManufacturerコンポーネントにuseStateで定義した値を渡す。

const [manufacturer, setManuFacturer] = useState("");

<SearchManufacturer
                    manufacturer={manufacturer}
                    setManuFacturer={setManuFacturer}
                />

型定義

export interface SearchManuFactureProps {
    manufacturer: string;
    setManuFacturer: (manufacturer: string) => void;
}

フォームに入力された値が変更されたときに

  const [query, setQuery] = useState("");                   


 <Combobox.Input
                    className='w-full h-[48px] pl-12 p-4 rounded-l-full max-sm:rounded-full bg-light-white outline-none cursor-pointer text-sm'
                    displayValue={(item: string) => item}
                    onChange={(event) => setQuery(event.target.value)}
                    placeholder='Volkswagen...'
                    />

  const filteredManufacturers =
    query === ""
      ? manufacturers
      : manufacturers.filter((item) =>
          item
            .toLowerCase()
            .replace(/\s+/g, "")
            .includes(query.toLowerCase().replace(/\s+/g, ""))
        );

Fragmentを使うことで余計なタグをつけることなく子要素をまとめることができる。

                    <Transition
                     as={Fragment} 
                     leave='transition ease-in duration-100'
                     leaveFrom='opacity-100'
                     leaveTo='opacity-0'
                     afterLeave={() => setQuery("")}
                    >

CarCard

車のトランスミッション(transmission)、駆動車(drive)、燃費(city_mpg)

                    <CustomButton
                        title='View More'
                        containerStyles='w-full py-[16px] rounded-full bg-primary-blue'
                        textStyles='text-white text-[14px] leading-[17px] font-bold'
                        rightIcon='/right-arrow.svg'
                        handleClick={() => setIsOpen(true)}
                    />

CarDetails

headlessUIでモーダルを表示させます。

 <CarDetails isOpen={isOpen} closeModal={() => setIsOpen(false)} car={car} />

モーダルを表示させるときに透明度を0から100、閉じるときは反対に透明度を100から0にするようにします。モーダルを表示させている間は背景は黒にしている。

                <Transition.Child
                    as={Fragment}
                    enter='ease-out duration-300'
                    enterFrom='opacity-0'
                    enterTo='opacity-100'
                    leave='ease-in duration-200'
                    leaveFrom='opacity-100'
                    leaveTo='opacity-0'
                >
                    <div className='fixed inset-0 bg-black bg-opacity-25' />
                </Transition.Child>