source.productTags.tsx

import { json } from '@remix-run/node'
import type { LoaderFunctionArgs } from '@remix-run/node'

import { Link, useLoaderData } from '@remix-run/react'
import { mockProductTags } from '~/utils/mockdata'

export const loader = async ({ request: _request }: LoaderFunctionArgs) => {
  return json({ productTags: mockProductTags })
}

const ProductTagPage: React.FC = () => {
  //   const data = useLoaderData<typeof loader>()

  const { productTags } = useLoaderData<typeof loader>()

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-1" id="description">
        <h1 className="text-gray-900 text-lg font-medium">Product tags</h1>
        <p className="text-gray-500 text-sm">
          PRODUCT TAG HELPER TEXT
          {/* In Shopify, you can save a search or filter so that you can use it
          again later when you need to quickly find a group of products. Learn
          how to{' '}
          <a
            className="underline"
            href="https://avada.io/shopify/docs/how-save-filter-search-shopify.html"
            target="_blank"
            rel="noreferrer"
          >
            save a search in Shopify
          </a>
          , or select one from the list below. */}
        </p>
      </div>
      <div
        id="search-list"
        className="rounded-md border-solid border-1 border-gray-200"
      >
        {productTags.map((productTag, index) => (
          <div key={productTag.id}>
            <div className="flex flex-row p-3 items-start gap-4">
              <div className="flex w-full gap-2">
                {/* <div className="flex items-center font-normal text-sm"> */}
                <div className="flex items-center font-normal text-sm px-2 bg-#eaf3fd rounded-xl">
                  {productTag.name}
                </div>
                {/* <div className="py-0.5 px-2.5 bg-gray-100 rounded-full text-xs">
                  {productTag.quantity}
                </div> */}
              </div>
              <Link
                to={`/verify/productTags/${productTag.id}`}
                className="font-medium text-sm"
              >
                Import
              </Link>
            </div>
            {index < productTags.length - 1 ? (
              <div className="h-px bg-gray-200" />
            ) : null}
          </div>
        ))}
      </div>
    </div>
  )
}

export default ProductTagPage