@shopify/create-hydrogen 1.0.9 → 2.0.2

package/templates/template-hydrogen-default/src/components/CountrySelector.client.jsx

@@ -1,116 +0,0 @@
-import {useCallback, useMemo} from 'react';
-import {useAvailableCountries, useCountry} from '@shopify/hydrogen/client';
-import {Listbox} from '@headlessui/react';
-
-/**
- * A client component that selects the appropriate country to display for products on a website
- */
-export default function CountrySelector() {
-  const availableCountries = useAvailableCountries();
-
-  const countries = useMemo(
-    () => [...availableCountries].sort((a, b) => a.name.localeCompare(b.name)),
-    [availableCountries],
-  );
-
-  const [selectedCountry, setSelectedCountry] = useCountry();
-
-  const setCountry = useCallback(
-    (isoCode) => {
-      setSelectedCountry(
-        countries.find((country) => country.isoCode === isoCode),
-      );
-    },
-    [countries, setSelectedCountry],
-  );
-
-  return (
-    <div className="hidden lg:block">
-      <Listbox onChange={setCountry}>
-        {({open}) => (
-          <>
-            <Listbox.Button className="font-medium text-sm h-8 p-2 flex items-center">
-              <span className="mr-4">{selectedCountry.name}</span>
-              <ArrowIcon isOpen={open} />
-            </Listbox.Button>
-
-            <Listbox.Options className="absolute z-10 mt-2">
-              <div className="bg-white p-4 rounded-lg drop-shadow-2xl">
-                <Listbox.Option
-                  disabled
-                  className="p-2 text-md text-left font-medium uppercase"
-                >
-                  Country
-                </Listbox.Option>
-                {countries.map((country) => {
-                  const isSelected =
-                    country.isoCode === selectedCountry.isoCode;
-                  return (
-                    <Listbox.Option
-                      key={country.isoCode}
-                      value={country.isoCode}
-                    >
-                      {({active}) => (
-                        <div
-                          className={`w-36 py-2 px-3 flex justify-between items-center text-left cursor-pointer rounded
-                          ${active ? 'bg-gray-200' : null}`}
-                        >
-                          {country.name}
-                          {isSelected ? <CheckIcon /> : null}
-                        </div>
-                      )}
-                    </Listbox.Option>
-                  );
-                })}
-              </div>
-            </Listbox.Options>
-          </>
-        )}
-      </Listbox>
-    </div>
-  );
-}
-
-export function CheckIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <path
-        d="M7 10L9 12L13 8M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
-        stroke="#354CF6"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export function ArrowIcon({isOpen}) {
-  return (
-    <svg
-      className={`transition-transform duration-300 ${
-        isOpen ? 'rotate-180' : null
-      }`}
-      aria-hidden="true"
-      width="10"
-      height="6"
-      viewBox="0 0 10 6"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M0.292893 0.292893C0.683416 -0.097631 1.31658 -0.097631 1.7071 0.292893L4.99999 3.58579L8.29288 0.292893C8.6834 -0.0976311 9.31657 -0.0976311 9.70709 0.292893C10.0976 0.683417 10.0976 1.31658 9.70709 1.70711L5.7071 5.70711C5.31657 6.09763 4.68341 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976309 1.31658 -0.0976309 0.683417 0.292893 0.292893Z"
-        fill="#374151"
-      />
-    </svg>
-  );
-}

package/templates/template-hydrogen-default/src/components/DefaultSeo.server.jsx

@@ -1,36 +0,0 @@
-import {useShopQuery, Seo, CacheDays} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-/**
- * A server component that fetches a `shop.name` and sets default values and templates for every page on a website
- */
-export default function DefaultSeo() {
-  const {
-    data: {
-      shop: {name: shopName, description: shopDescription},
-    },
-  } = useShopQuery({
-    query: QUERY,
-    cache: CacheDays(),
-    preload: '*',
-  });
-
-  return (
-    <Seo
-      type="defaultSeo"
-      data={{
-        title: shopName,
-        description: shopDescription,
-      }}
-    />
-  );
-}
-
-const QUERY = gql`
-  query shopInfo {
-    shop {
-      name
-      description
-    }
-  }
-`;

package/templates/template-hydrogen-default/src/components/FeaturedCollection.jsx

@@ -1,26 +0,0 @@
-import {Image, Link} from '@shopify/hydrogen';
-
-/**
- * A shared component that defines a single featured collection to display on a storefront
- */
-export default function FeaturedCollection({collection}) {
-  return collection ? (
-    <div className="shadow-xl rounded-xl grid grid-cols-1 lg:grid-cols-2 items-center bg-white overflow-hidden">
-      {collection.image ? (
-        <Image width="622" height="465" data={collection.image} />
-      ) : null}
-      <div className="px-10 py-10 lg:py-0">
-        <h2 className="text-gray-700 text-3xl font-bold mb-5">
-          {collection.title}
-        </h2>
-        <p className="text-lg text-gray-500 mb-6">{collection.description}</p>
-        <Link
-          to={`/collections/${collection.handle}`}
-          className="inline-block bg-gray-900 text-white text-lg font-medium rounded-md py-4 px-16 uppercase"
-        >
-          Shop Collection
-        </Link>
-      </div>
-    </div>
-  ) : null;
-}

package/templates/template-hydrogen-default/src/components/Footer.server.jsx

@@ -1,103 +0,0 @@
-import {Link} from '@shopify/hydrogen';
-
-/**
- * A server component that specifies the content of the footer on the website
- */
-export default function Footer({collection, product}) {
-  return (
-    <footer role="contentinfo">
-      <div className="relative bg-white border-t border-b border-black border-opacity-5">
-        <div className="mx-auto max-w-7xl px-4 py-14 md:px-8 grid grid-cols-1 md:grid-cols-3 gap-12">
-          <div>
-            <h2 className="text-md font-medium uppercase mb-4">Community</h2>
-            <ul className="mt-8 space-y-4">
-              <li className="text-sm font-medium text-gray-600 hover:text-gray-900">
-                <a
-                  href="https://github.com/Shopify/hydrogen/discussions"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="flex items-center"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="fill-current text-gray-600 mr-3"
-                    width="26"
-                    height="20"
-                    viewBox="0 0 21 20"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      clipRule="evenodd"
-                      d="M10.1319 0.000976562C4.60874 0.000976562 0.135254 4.58917 0.135254 10.2539C0.135254 14.7908 2.99679 18.6229 6.97045 19.9814C7.47028 20.0711 7.65772 19.7635 7.65772 19.4944C7.65772 19.2509 7.64522 18.4434 7.64522 17.5848C5.13357 18.059 4.48379 16.9568 4.28385 16.38C4.17139 16.0853 3.68406 15.1753 3.2592 14.9318C2.90932 14.7396 2.40949 14.2654 3.2467 14.2526C4.03394 14.2397 4.59625 14.9959 4.78369 15.3035C5.68338 16.8542 7.1204 16.4185 7.6952 16.1494C7.78267 15.4829 8.04508 15.0343 8.33249 14.778C6.10824 14.5217 3.78402 13.6374 3.78402 9.71564C3.78402 8.60063 4.17139 7.67786 4.80868 6.96016C4.70871 6.70383 4.35883 5.65291 4.90864 4.24313C4.90864 4.24313 5.74586 3.97399 7.65772 5.29406C8.45745 5.06336 9.30716 4.94802 10.1569 4.94802C11.0066 4.94802 11.8563 5.06336 12.656 5.29406C14.5679 3.96117 15.4051 4.24313 15.4051 4.24313C15.9549 5.65291 15.605 6.70383 15.5051 6.96016C16.1424 7.67786 16.5297 8.58781 16.5297 9.71564C16.5297 13.6502 14.193 14.5217 11.9688 14.778C12.3311 15.0984 12.6435 15.7136 12.6435 16.6748C12.6435 18.0461 12.631 19.1483 12.631 19.4944C12.631 19.7635 12.8185 20.0839 13.3183 19.9814C15.3028 19.2943 17.0273 17.9861 18.2489 16.2411C19.4706 14.4962 20.128 12.4022 20.1285 10.2539C20.1285 4.58917 15.655 0.000976562 10.1319 0.000976562Z"
-                    />
-                  </svg>
-                  Github discussions
-                </a>
-              </li>
-              <li className="text-sm font-medium text-gray-600 hover:text-gray-900">
-                <a
-                  href="https://discord.gg/ppSbThrFaS"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="flex items-center"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="fill-current text-gray-600 mr-3"
-                    width="26"
-                    height="20"
-                    viewBox="0 0 26 20"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path d="M21.3103 1.67597C19.691 0.893476 17.9595 0.324791 16.1494 0.000976562C15.9271 0.416095 15.6673 0.974439 15.4883 1.4186C13.564 1.11972 11.6574 1.11972 9.76855 1.4186C9.58952 0.974439 9.3239 0.416095 9.0996 0.000976562C7.28746 0.324791 5.55403 0.895566 3.93472 1.68012C0.668559 6.77767 -0.216844 11.7486 0.225859 16.649C2.39215 18.3198 4.49155 19.3348 6.55551 19.9989C7.06512 19.2745 7.51962 18.5045 7.91116 17.693C7.16546 17.4003 6.45123 17.0392 5.77638 16.6199C5.95541 16.4829 6.13054 16.3397 6.29973 16.1923C10.4159 18.1807 14.8882 18.1807 18.9551 16.1923C19.1263 16.3397 19.3014 16.4829 19.4785 16.6199C18.8016 17.0412 18.0855 17.4024 17.3398 17.6951C17.7313 18.5045 18.1838 19.2766 18.6954 20.001C20.7614 19.3368 22.8627 18.3219 25.029 16.649C25.5484 10.9682 24.1416 6.04292 21.3103 1.67597ZM8.47192 13.6353C7.2363 13.6353 6.22299 12.4439 6.22299 10.9931C6.22299 9.5423 7.21466 8.34886 8.47192 8.34886C9.72922 8.34886 10.7425 9.54021 10.7209 10.9931C10.7228 12.4439 9.72922 13.6353 8.47192 13.6353ZM16.7829 13.6353C15.5473 13.6353 14.534 12.4439 14.534 10.9931C14.534 9.5423 15.5256 8.34886 16.7829 8.34886C18.0402 8.34886 19.0535 9.54021 19.0319 10.9931C19.0319 12.4439 18.0402 13.6353 16.7829 13.6353Z" />
-                  </svg>
-                  Discord
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <h2 className="text-md font-medium uppercase mb-4">Templates</h2>
-            <ul className="mt-8 space-y-4">
-              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
-                <Link to="/home">Home</Link>
-              </li>
-              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
-                <Link to={`/products/${product?.handle}`}>Product</Link>
-              </li>
-              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
-                <Link to={`/collections/${collection?.handle}`}>
-                  Collection
-                </Link>
-              </li>
-              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
-                <Link to="/404">404</Link>
-              </li>
-            </ul>
-          </div>
-          <div>
-            <h2 className="text-md font-medium uppercase mb-4">Docs</h2>
-            <ul className="mt-8 space-y-4">
-              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
-                <a href="https://shopify.dev/custom-storefronts/hydrogen">
-                  Hydrogen overview
-                </a>
-              </li>
-              <li className="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
-                <a href="https://shopify.dev/custom-storefronts/hydrogen/reference">
-                  Hydrogen reference
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div className="py-6 px-4 md:px-8 bg-gray-50">
-        <p className="text-gray-600">© {new Date().getFullYear()} Shopify</p>
-      </div>
-    </footer>
-  );
-}

package/templates/template-hydrogen-default/src/components/Gallery.client.jsx

@@ -1,66 +0,0 @@
-import {useProduct, MediaFile, Image} from '@shopify/hydrogen/client';
-
-/**
- * A client component that defines a media gallery for hosting images, 3D models, and videos of products
- */
-export default function Gallery() {
-  const {media, selectedVariant} = useProduct();
-
-  const featuredMedia = selectedVariant.image || media[0]?.image;
-  const featuredMediaSrc = featuredMedia?.url.split('?')[0];
-  const galleryMedia = media.filter((med) => {
-    if (
-      med.mediaContentType === MODEL_3D_TYPE ||
-      med.mediaContentType === VIDEO_TYPE ||
-      med.mediaContentType === EXTERNAL_VIDEO_TYPE
-    ) {
-      return true;
-    }
-
-    return !med.image.url.includes(featuredMediaSrc);
-  });
-
-  if (!media.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className="gap-4 flex md:grid md:grid-cols-2 overflow-x-scroll no-scrollbar scroll-snap-x scroll-smooth h-[485px] md:h-auto place-content-start"
-      tabIndex="-1"
-    >
-      <Image
-        data={selectedVariant.image}
-        className="w-[80vw] md:w-full h-full md:h-auto object-cover object-center flex-shrink-0 md:flex-shrink-none snap-start md:col-span-2 border border-gray-200 rounded-lg"
-      />
-      {galleryMedia.map((med) => {
-        let extraProps = {};
-
-        if (med.mediaContentType === MODEL_3D_TYPE) {
-          extraProps = MODEL_3D_PROPS;
-        }
-
-        return (
-          <MediaFile
-            tabIndex="0"
-            key={med.id || med.image.id}
-            className="w-[80vw] md:w-auto h-full md:h-auto object-cover object-center transition-all snap-start border border-gray-200 flex-shrink-0 rounded-lg"
-            data={med}
-            options={{
-              height: '485',
-              crop: 'center',
-            }}
-            {...extraProps}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-const MODEL_3D_TYPE = 'MODEL_3D';
-const MODEL_3D_PROPS = {
-  interactionPromptThreshold: '0',
-};
-const VIDEO_TYPE = 'VIDEO';
-const EXTERNAL_VIDEO_TYPE = 'EXTERNAL_VIDEO';

package/templates/template-hydrogen-default/src/components/Header.client.jsx

@@ -1,62 +0,0 @@
-import {useEffect, useState} from 'react';
-import {Link} from '@shopify/hydrogen/client';
-
-import CartToggle from './CartToggle.client';
-import {useCartUI} from './CartUIProvider.client';
-import CountrySelector from './CountrySelector.client';
-import Navigation from './Navigation.client';
-import MobileNavigation from './MobileNavigation.client';
-
-/**
- * A client component that specifies the content of the header on the website
- */
-export default function Header({collections, storeName}) {
-  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
-  const [scrollbarWidth, setScrollbarWidth] = useState(0);
-  const {isCartOpen} = useCartUI();
-
-  useEffect(() => {
-    const scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-
-    setScrollbarWidth(scrollbarWidth);
-  }, [isCartOpen]);
-
-  return (
-    <header className="h-20 lg:h-32" role="banner">
-      <div
-        className={`fixed z-20 h-20 lg:h-32 w-full border-b border-gray-200 px-6 md:px-8 md:py-6 lg:pt-8 lg:pb-0 mx-auto bg-white ${
-          isMobileNavOpen ? '' : 'bg-opacity-95'
-        }`}
-      >
-        <div
-          className="h-full flex lg:flex-col place-content-between"
-          style={{
-            paddingRight: isCartOpen ? scrollbarWidth : 0,
-          }}
-        >
-          <div className="text-center w-full flex justify-between items-center">
-            <CountrySelector />
-            <MobileNavigation
-              collections={collections}
-              isOpen={isMobileNavOpen}
-              setIsOpen={setIsMobileNavOpen}
-            />
-            <Link
-              className="font-black uppercase text-3xl tracking-widest"
-              to="/"
-            >
-              {storeName}
-            </Link>
-            <CartToggle
-              handleClick={() => {
-                if (isMobileNavOpen) setIsMobileNavOpen(false);
-              }}
-            />
-          </div>
-          <Navigation collections={collections} storeName={storeName} />
-        </div>
-      </div>
-    </header>
-  );
-}

package/templates/template-hydrogen-default/src/components/Layout.server.jsx

@@ -1,86 +0,0 @@
-import {
-  Image,
-  useShopQuery,
-  flattenConnection,
-  LocalizationProvider,
-  CacheHours,
-} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-import Header from './Header.client';
-import Footer from './Footer.server';
-import Cart from './Cart.client';
-import {Suspense} from 'react';
-
-/**
- * A server component that defines a structure and organization of a page that can be used in different parts of the Hydrogen app
- */
-export default function Layout({children, hero}) {
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      numCollections: 3,
-    },
-    cache: CacheHours(),
-    preload: '*',
-  });
-  const collections = data ? flattenConnection(data.collections) : null;
-  const products = data ? flattenConnection(data.products) : null;
-  const storeName = data ? data.shop.name : '';
-
-  return (
-    <LocalizationProvider preload="*">
-      <div className="absolute top-0 left-0">
-        <a
-          href="#mainContent"
-          className="p-4 focus:block sr-only focus:not-sr-only"
-        >
-          Skip to content
-        </a>
-      </div>
-      <div className="min-h-screen max-w-screen text-gray-700 font-sans">
-        {/* TODO: Find out why Suspense needs to be here to prevent hydration errors. */}
-        <Suspense fallback={null}>
-          <Header collections={collections} storeName={storeName} />
-          <Cart />
-        </Suspense>
-        <main role="main" id="mainContent" className="relative bg-gray-50">
-          {hero}
-          <div className="mx-auto max-w-7xl p-4 md:py-5 md:px-8">
-            {children}
-          </div>
-        </main>
-        <Footer collection={collections[0]} product={products[0]} />
-      </div>
-    </LocalizationProvider>
-  );
-}
-
-const QUERY = gql`
-  query layoutContent($numCollections: Int!) {
-    shop {
-      name
-    }
-    collections(first: $numCollections) {
-      edges {
-        node {
-          description
-          handle
-          id
-          title
-          image {
-            ...ImageFragment
-          }
-        }
-      }
-    }
-    products(first: 1) {
-      edges {
-        node {
-          handle
-        }
-      }
-    }
-  }
-  ${Image.Fragment}
-`;

package/templates/template-hydrogen-default/src/components/LoadMoreProducts.client.jsx

@@ -1,56 +0,0 @@
-import {useServerState} from '@shopify/hydrogen/client';
-
-/**
- * A client component that provides functionality to initially show a subset of products and a button to load more products
- */
-export default function LoadMoreProducts({startingCount}) {
-  const {pending, serverState, setServerState} = useServerState();
-
-  return (
-    <div className="flex justify-center h-14">
-      {pending ? (
-        <SpinnerIcon />
-      ) : (
-        <button
-          type="button"
-          disabled={pending}
-          className={`uppercase border-4 bg-white border-black text-black text-center px-5 py-3 font-mono font-bold drop-shadow-lg active:drop-shadow-none hover:bg-black hover:text-white hover:border-white ${
-            pending ? 'opacity-50' : undefined
-          }`}
-          onClick={() => {
-            setServerState(
-              'collectionProductCount',
-              serverState.collectionProductCount
-                ? serverState.collectionProductCount + 24
-                : startingCount + 1,
-            );
-          }}
-        >
-          Load more
-        </button>
-      )}
-    </div>
-  );
-}
-
-function SpinnerIcon() {
-  return (
-    <svg
-      width="54"
-      height="54"
-      viewBox="0 0 54 54"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="animate-spin"
-    >
-      <path
-        d="M43.6663 27.0002C43.6663 36.2049 36.2044 43.6668 26.9997 43.6668C17.7949 43.6668 10.333 36.2049 10.333 27.0002C10.333 17.7954 17.7949 10.3335 26.9997 10.3335C36.2044 10.3335 43.6663 17.7954 43.6663 27.0002ZM13.6663 27.0002C13.6663 34.364 19.6359 40.3335 26.9997 40.3335C34.3635 40.3335 40.333 34.364 40.333 27.0002C40.333 19.6364 34.3635 13.6668 26.9997 13.6668C19.6359 13.6668 13.6663 19.6364 13.6663 27.0002Z"
-        fill="#E6E7EB"
-      />
-      <path
-        d="M26.9997 10.3332C29.1884 10.3332 31.3556 10.7643 33.3777 11.6018C35.3998 12.4394 37.2371 13.6671 38.7848 15.2147C40.3324 16.7624 41.5601 18.5997 42.3977 20.6218C43.2352 22.6439 43.6663 24.8111 43.6663 26.9998L40.333 26.9998C40.333 25.2489 39.9881 23.5151 39.3181 21.8974C38.648 20.2797 37.6659 18.8099 36.4278 17.5717C35.1896 16.3336 33.7198 15.3515 32.1021 14.6814C30.4844 14.0114 28.7506 13.6665 26.9997 13.6665L26.9997 10.3332Z"
-        fill="black"
-      />
-    </svg>
-  );
-}

package/templates/template-hydrogen-default/src/components/LoadingFallback.jsx

@@ -1,26 +0,0 @@
-import CartIcon from './CartIcon';
-import OpenIcon from './OpenIcon';
-
-/**
- * A shared component and Suspense call that's used in `App.server.jsx` to let your app wait for code to load while declaring a loading state
- */
-export default function LoadingFallback() {
-  return (
-    <header className="h-20 lg:h-32 max-w-screen text-gray-700">
-      <div className="fixed z-10 h-20 lg:h-32 w-full bg-white/90 border-b border-black border-opacity-5 px-6 md:px-8 md:py-6 lg:pt-8 lg:pb-0 mx-auto">
-        <div className="h-full flex lg:flex-col place-content-between">
-          <div className="text-center w-full flex justify-between items-center">
-            <div className="hidden lg:block w-16" />
-            <div className="lg:hidden flex justify-center items-center w-7 h-full">
-              <OpenIcon />
-            </div>
-            <p className="font-black uppercase text-3xl tracking-widest">
-              Snowdevil
-            </p>
-            <CartIcon />
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}

package/templates/template-hydrogen-default/src/components/MobileCountrySelector.client.jsx

@@ -1,64 +0,0 @@
-import {useCallback} from 'react';
-import {useAvailableCountries, useCountry} from '@shopify/hydrogen/client';
-import {Listbox} from '@headlessui/react';
-
-import {ArrowIcon, CheckIcon} from './CountrySelector.client';
-
-/**
- * A client component that selects the appropriate country to display for products on a mobile storefront
- */
-export default function MobileCountrySelector() {
-  const countries = [...useAvailableCountries()].sort((a, b) =>
-    a.name.localeCompare(b.name),
-  );
-  const [selectedCountry, setSelectedCountry] = useCountry();
-
-  const setCountry = useCallback(
-    (isoCode) => {
-      setSelectedCountry(
-        countries.find((country) => country.isoCode === isoCode),
-      );
-    },
-    [countries, setSelectedCountry],
-  );
-
-  return (
-    <div className="mt-8 rounded border border-gray-200 w-full">
-      <Listbox onChange={setCountry}>
-        {({open}) => (
-          <>
-            <Listbox.Button className="w-full flex justify-between text-sm items-center py-5 px-7">
-              {selectedCountry.name}
-              <ArrowIcon isOpen={open} />
-            </Listbox.Button>
-            <Listbox.Options className="w-full px-3 pb-2 text-lg">
-              <Listbox.Option
-                disabled
-                className="font-medium px-4 pb-4 w-full text-left uppercase"
-              >
-                Country
-              </Listbox.Option>
-              {countries.map((country) => {
-                const isSelected = country.isoCode === selectedCountry.isoCode;
-                return (
-                  <Listbox.Option key={country.isoCode} value={country.isoCode}>
-                    {({active}) => (
-                      <div
-                        className={`py-2 px-4 rounded flex justify-between items-center text-left w-full cursor-pointer ${
-                          active ? 'bg-gray-100' : null
-                        }`}
-                      >
-                        {country.name}
-                        {isSelected ? <CheckIcon /> : null}
-                      </div>
-                    )}
-                  </Listbox.Option>
-                );
-              })}
-            </Listbox.Options>
-          </>
-        )}
-      </Listbox>
-    </div>
-  );
-}