commerce/components/layout/shoplist.tsx

'use client';
import { ChevronRightIcon } from '@heroicons/react/24/outline';
import { useTranslations } from 'next-intl';
import Link from 'next/link';

export default function Shoplist() {
  const t = useTranslations('Index');
  return (
    <div className="font-multilingual mx-auto max-w-screen-xl space-y-4 px-6" id="shops">
      <div className="flex w-full flex-row items-baseline space-x-12 pb-2 md:pb-6">
        <h2 className="font-serif text-2xl tracking-wider md:text-5xl">shop list</h2>
        <h3 className="text-2xl font-extralight tracking-wider">{t('shops.subtitle')}</h3>
      </div>
      <div className="grid w-full grid-cols-1 gap-px md:grid-cols-2">
        <Link
          href="shop-list/#hokkaido"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
        >
          <div>{t('shops.hokkaido')}</div>
          <div>
            <ChevronRightIcon
              className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
              strokeWidth={1.5}
            />
          </div>
        </Link>
        <Link
          href="shop-list/#kanto"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
        >
          <div>{t('shops.kanto')}</div>
          <div>
            <ChevronRightIcon
              className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
              strokeWidth={1.5}
            />
          </div>
        </Link>
        <Link
          href="shop-list/#chubu"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
        >
          <div>{t('shops.chubu')}</div>
          <div>
            <ChevronRightIcon
              className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
              strokeWidth={1.5}
            />
          </div>
        </Link>
        <Link
          href="shop-list/#kinki"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
        >
          <div>{t('shops.kinki')}</div>
          <div>
            <ChevronRightIcon
              className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
              strokeWidth={1.5}
            />
          </div>
        </Link>
        <Link
          href="shop-list/#chugoku"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
        >
          <div>{t('shops.chugoku')}</div>
          <div>
            <ChevronRightIcon
              className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
              strokeWidth={1.5}
            />
          </div>
        </Link>
        <Link
          href="shop-list/#kyushu"
          className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
        >
          <div>{t('shops.kyushu')}</div>
          <div>
            <ChevronRightIcon
              className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
              strokeWidth={1.5}
            />
          </div>
        </Link>
      </div>
    </div>
  );
}