hydrogen-forge 0.1.0

package/templates/starter/app/components/CollectionFilters.tsx

@@ -0,0 +1,330 @@
+import {useSearchParams} from 'react-router';
+import {useState} from 'react';
+
+export type SortOption = {
+  label: string;
+  value: string;
+};
+
+export type FilterOption = {
+  label: string;
+  value: string;
+  count?: number;
+};
+
+export type FilterGroup = {
+  id: string;
+  label: string;
+  options: FilterOption[];
+};
+
+type CollectionFiltersProps = {
+  filters?: FilterGroup[];
+  sortOptions?: SortOption[];
+  productCount?: number;
+};
+
+const DEFAULT_SORT_OPTIONS: SortOption[] = [
+  {label: 'Featured', value: 'featured'},
+  {label: 'Best Selling', value: 'best-selling'},
+  {label: 'Alphabetically, A-Z', value: 'title-asc'},
+  {label: 'Alphabetically, Z-A', value: 'title-desc'},
+  {label: 'Price, Low to High', value: 'price-asc'},
+  {label: 'Price, High to Low', value: 'price-desc'},
+  {label: 'Date, Old to New', value: 'created-asc'},
+  {label: 'Date, New to Old', value: 'created-desc'},
+];
+
+/**
+ * Collection filters and sorting controls.
+ */
+export function CollectionFilters({
+  filters = [],
+  sortOptions = DEFAULT_SORT_OPTIONS,
+  productCount,
+}: CollectionFiltersProps) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
+
+  const currentSort = searchParams.get('sort') || 'featured';
+  const activeFilters = getActiveFilters(searchParams, filters);
+
+  function handleSortChange(value: string) {
+    const newParams = new URLSearchParams(searchParams);
+    if (value === 'featured') {
+      newParams.delete('sort');
+    } else {
+      newParams.set('sort', value);
+    }
+    setSearchParams(newParams);
+  }
+
+  function handleFilterChange(groupId: string, value: string) {
+    const newParams = new URLSearchParams(searchParams);
+    const currentValues = newParams.getAll(groupId);
+
+    if (currentValues.includes(value)) {
+      // Remove the filter
+      newParams.delete(groupId);
+      currentValues
+        .filter((v) => v !== value)
+        .forEach((v) => newParams.append(groupId, v));
+    } else {
+      // Add the filter
+      newParams.append(groupId, value);
+    }
+
+    setSearchParams(newParams);
+  }
+
+  function clearAllFilters() {
+    const newParams = new URLSearchParams();
+    const sort = searchParams.get('sort');
+    if (sort) {
+      newParams.set('sort', sort);
+    }
+    setSearchParams(newParams);
+  }
+
+  return (
+    <div className="mb-8">
+      {/* Top bar with product count and sort */}
+      <div className="flex items-center justify-between border-b border-secondary-200 pb-4">
+        <div className="flex items-center gap-4">
+          {/* Mobile filter toggle */}
+          <button
+            type="button"
+            onClick={() => setIsFiltersOpen(!isFiltersOpen)}
+            className="flex items-center gap-2 rounded-md border border-secondary-300 px-3 py-2 text-sm font-medium text-secondary-700 transition-colors hover:bg-secondary-50 lg:hidden"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+              />
+            </svg>
+            Filters
+            {activeFilters.length > 0 && (
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs text-white">
+                {activeFilters.length}
+              </span>
+            )}
+          </button>
+
+          {/* Product count */}
+          {productCount !== undefined && (
+            <span className="text-sm text-secondary-500">
+              {productCount} {productCount === 1 ? 'product' : 'products'}
+            </span>
+          )}
+        </div>
+
+        {/* Sort dropdown */}
+        <div className="flex items-center gap-2">
+          <label htmlFor="sort" className="text-sm text-secondary-600">
+            Sort by:
+          </label>
+          <select
+            id="sort"
+            value={currentSort}
+            onChange={(e) => handleSortChange(e.target.value)}
+            className="rounded-md border border-secondary-300 bg-white py-2 pl-3 pr-8 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+          >
+            {sortOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Active filters */}
+      {activeFilters.length > 0 && (
+        <div className="mt-4 flex flex-wrap items-center gap-2">
+          <span className="text-sm text-secondary-500">Active filters:</span>
+          {activeFilters.map((filter) => (
+            <button
+              key={`${filter.groupId}-${filter.value}`}
+              type="button"
+              onClick={() => handleFilterChange(filter.groupId, filter.value)}
+              className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-sm text-primary-700 transition-colors hover:bg-primary-100"
+            >
+              {filter.label}
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          ))}
+          <button
+            type="button"
+            onClick={clearAllFilters}
+            className="text-sm text-secondary-500 underline-offset-2 hover:text-secondary-700 hover:underline"
+          >
+            Clear all
+          </button>
+        </div>
+      )}
+
+      {/* Filter groups (mobile: collapsible, desktop: horizontal) */}
+      {filters.length > 0 && (
+        <div
+          className={`mt-4 space-y-4 lg:flex lg:gap-6 lg:space-y-0 ${
+            isFiltersOpen ? 'block' : 'hidden lg:flex'
+          }`}
+        >
+          {filters.map((group) => (
+            <FilterGroupComponent
+              key={group.id}
+              group={group}
+              searchParams={searchParams}
+              onFilterChange={handleFilterChange}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type FilterGroupComponentProps = {
+  group: FilterGroup;
+  searchParams: URLSearchParams;
+  onFilterChange: (groupId: string, value: string) => void;
+};
+
+function FilterGroupComponent({
+  group,
+  searchParams,
+  onFilterChange,
+}: FilterGroupComponentProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedValues = searchParams.getAll(group.id);
+
+  return (
+    <div className="relative">
+      {/* Desktop: Dropdown button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="hidden items-center gap-1 rounded-md border border-secondary-300 px-3 py-2 text-sm font-medium text-secondary-700 transition-colors hover:bg-secondary-50 lg:flex"
+      >
+        {group.label}
+        {selectedValues.length > 0 && (
+          <span className="ml-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary-600 text-xs text-white">
+            {selectedValues.length}
+          </span>
+        )}
+        <svg
+          className={`ml-1 h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {/* Mobile: Always visible as section */}
+      <div className="lg:hidden">
+        <h4 className="mb-2 text-sm font-medium text-secondary-900">
+          {group.label}
+        </h4>
+        <div className="space-y-2">
+          {group.options.map((option) => (
+            <FilterCheckbox
+              key={option.value}
+              option={option}
+              checked={selectedValues.includes(option.value)}
+              onChange={() => onFilterChange(group.id, option.value)}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Desktop: Dropdown panel */}
+      {isOpen && (
+        <div className="absolute left-0 top-full z-10 mt-2 hidden w-56 rounded-lg border border-secondary-200 bg-white p-4 shadow-lg lg:block">
+          <div className="space-y-2">
+            {group.options.map((option) => (
+              <FilterCheckbox
+                key={option.value}
+                option={option}
+                checked={selectedValues.includes(option.value)}
+                onChange={() => onFilterChange(group.id, option.value)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+type FilterCheckboxProps = {
+  option: FilterOption;
+  checked: boolean;
+  onChange: () => void;
+};
+
+function FilterCheckbox({option, checked, onChange}: FilterCheckboxProps) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        className="h-4 w-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
+      />
+      <span className="text-sm text-secondary-700">{option.label}</span>
+      {option.count !== undefined && (
+        <span className="text-sm text-secondary-400">({option.count})</span>
+      )}
+    </label>
+  );
+}
+
+function getActiveFilters(
+  searchParams: URLSearchParams,
+  filters: FilterGroup[],
+) {
+  const active: Array<{groupId: string; value: string; label: string}> = [];
+
+  filters.forEach((group) => {
+    const values = searchParams.getAll(group.id);
+    values.forEach((value) => {
+      const option = group.options.find((o) => o.value === value);
+      if (option) {
+        active.push({
+          groupId: group.id,
+          value,
+          label: `${group.label}: ${option.label}`,
+        });
+      }
+    });
+  });
+
+  return active;
+}

package/templates/starter/app/components/CollectionGrid.tsx

@@ -0,0 +1,141 @@
+import {Link} from 'react-router';
+import {Image} from '@shopify/hydrogen';
+import type {Collection} from '@shopify/hydrogen/storefront-api-types';
+
+type CollectionGridProps = {
+  collections: Pick<
+    Collection,
+    'id' | 'title' | 'handle' | 'description' | 'image'
+  >[];
+  columns?: 2 | 3 | 4;
+};
+
+/**
+ * A responsive grid of collection cards with images and titles.
+ */
+export function CollectionGrid({
+  collections,
+  columns = 3,
+}: CollectionGridProps) {
+  const gridCols = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
+  };
+
+  return (
+    <div className={`grid gap-6 ${gridCols[columns]}`}>
+      {collections.map((collection) => (
+        <CollectionCard key={collection.id} collection={collection} />
+      ))}
+    </div>
+  );
+}
+
+type CollectionCardProps = {
+  collection: Pick<
+    Collection,
+    'id' | 'title' | 'handle' | 'description' | 'image'
+  >;
+};
+
+/**
+ * A single collection card with image, title, and optional description.
+ */
+export function CollectionCard({collection}: CollectionCardProps) {
+  return (
+    <Link
+      to={`/collections/${collection.handle}`}
+      prefetch="intent"
+      className="group block"
+    >
+      <div className="relative aspect-square overflow-hidden rounded-xl bg-secondary-100">
+        {collection.image ? (
+          <Image
+            data={collection.image}
+            aspectRatio="1/1"
+            sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
+            className="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <svg
+              className="h-16 w-16 text-secondary-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1}
+                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+              />
+            </svg>
+          </div>
+        )}
+
+        {/* Overlay gradient */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-transparent" />
+
+        {/* Title overlay */}
+        <div className="absolute inset-x-0 bottom-0 p-4">
+          <h3 className="text-lg font-semibold text-white drop-shadow-md">
+            {collection.title}
+          </h3>
+          {collection.description && (
+            <p className="mt-1 line-clamp-2 text-sm text-white/80">
+              {collection.description}
+            </p>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+/**
+ * Skeleton loader for collection grid.
+ */
+export function CollectionGridSkeleton({count = 6}: {count?: number}) {
+  return (
+    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {Array.from({length: count}).map((_, i) => (
+        <div key={i} className="animate-pulse">
+          <div className="aspect-square rounded-xl bg-secondary-200" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Empty state for when there are no collections.
+ */
+export function CollectionGridEmpty() {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="mb-4 rounded-full bg-secondary-100 p-4">
+        <svg
+          className="h-8 w-8 text-secondary-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+          />
+        </svg>
+      </div>
+      <h3 className="text-lg font-medium text-secondary-900">
+        No collections found
+      </h3>
+      <p className="mt-1 text-sm text-secondary-500">
+        Check back later for new collections.
+      </p>
+    </div>
+  );
+}

package/templates/starter/app/components/Footer.tsx

@@ -0,0 +1,218 @@
+import {Suspense} from 'react';
+import {Await, NavLink} from 'react-router';
+import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
+
+export interface FooterProps {
+  footer: Promise<FooterQuery | null>;
+  header: HeaderQuery;
+  publicStoreDomain: string;
+}
+
+export function Footer({
+  footer: footerPromise,
+  header,
+  publicStoreDomain,
+}: FooterProps) {
+  return (
+    <Suspense>
+      <Await resolve={footerPromise}>
+        {(footer) => (
+          <footer className="border-t border-secondary-200 bg-secondary-50">
+            <div className="container-narrow py-12">
+              <div className="grid gap-8 md:grid-cols-4">
+                {/* Brand Section */}
+                <div className="md:col-span-2">
+                  <h3 className="text-lg font-bold text-secondary-900">
+                    {header.shop.name}
+                  </h3>
+                  <p className="mt-2 text-sm text-secondary-600">
+                    Quality products, exceptional service.
+                  </p>
+                </div>
+
+                {/* Navigation Section */}
+                <div>
+                  <h4 className="text-sm font-semibold uppercase tracking-wider text-secondary-900">
+                    Quick Links
+                  </h4>
+                  {footer?.menu && header.shop.primaryDomain?.url && (
+                    <FooterMenu
+                      menu={footer.menu}
+                      primaryDomainUrl={header.shop.primaryDomain.url}
+                      publicStoreDomain={publicStoreDomain}
+                    />
+                  )}
+                </div>
+
+                {/* Connect Section */}
+                <div>
+                  <h4 className="text-sm font-semibold uppercase tracking-wider text-secondary-900">
+                    Connect
+                  </h4>
+                  <div className="mt-4 flex space-x-4">
+                    <SocialLink href="#" label="Twitter">
+                      <svg
+                        className="h-5 w-5"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                      </svg>
+                    </SocialLink>
+                    <SocialLink href="#" label="Instagram">
+                      <svg
+                        className="h-5 w-5"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    </SocialLink>
+                  </div>
+                </div>
+              </div>
+
+              {/* Copyright */}
+              <div className="mt-12 border-t border-secondary-200 pt-8">
+                <p className="text-center text-sm text-secondary-500">
+                  © {new Date().getFullYear()} {header.shop.name}. All rights
+                  reserved.
+                </p>
+                <p className="mt-2 text-center text-xs text-secondary-400">
+                  Powered by{' '}
+                  <a
+                    href="https://github.com/nathanmcmullendev/hydrogen-forge"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary-600 hover:text-primary-700"
+                  >
+                    Hydrogen Forge
+                  </a>
+                </p>
+              </div>
+            </div>
+          </footer>
+        )}
+      </Await>
+    </Suspense>
+  );
+}
+
+function FooterMenu({
+  menu,
+  primaryDomainUrl,
+  publicStoreDomain,
+}: {
+  menu: FooterQuery['menu'];
+  primaryDomainUrl: FooterProps['header']['shop']['primaryDomain']['url'];
+  publicStoreDomain: string;
+}) {
+  return (
+    <nav className="mt-4 flex flex-col space-y-2" role="navigation">
+      {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
+        if (!item.url) return null;
+        // if the url is internal, we strip the domain
+        const url =
+          item.url.includes('myshopify.com') ||
+          item.url.includes(publicStoreDomain) ||
+          item.url.includes(primaryDomainUrl)
+            ? new URL(item.url).pathname
+            : item.url;
+        const isExternal = !url.startsWith('/');
+        return isExternal ? (
+          <a
+            href={url}
+            key={item.id}
+            rel="noopener noreferrer"
+            target="_blank"
+            className="text-sm text-secondary-600 transition-colors hover:text-secondary-900"
+          >
+            {item.title}
+          </a>
+        ) : (
+          <NavLink
+            end
+            key={item.id}
+            prefetch="intent"
+            to={url}
+            className={({isActive}) =>
+              isActive
+                ? 'text-sm font-medium text-secondary-900'
+                : 'text-sm text-secondary-600 transition-colors hover:text-secondary-900'
+            }
+          >
+            {item.title}
+          </NavLink>
+        );
+      })}
+    </nav>
+  );
+}
+
+function SocialLink({
+  href,
+  label,
+  children,
+}: {
+  href: string;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      className="text-secondary-500 transition-colors hover:text-secondary-700"
+    >
+      {children}
+    </a>
+  );
+}
+
+const FALLBACK_FOOTER_MENU = {
+  id: 'gid://shopify/Menu/199655620664',
+  items: [
+    {
+      id: 'gid://shopify/MenuItem/461633060920',
+      resourceId: 'gid://shopify/ShopPolicy/23358046264',
+      tags: [],
+      title: 'Privacy Policy',
+      type: 'SHOP_POLICY',
+      url: '/policies/privacy-policy',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461633093688',
+      resourceId: 'gid://shopify/ShopPolicy/23358013496',
+      tags: [],
+      title: 'Refund Policy',
+      type: 'SHOP_POLICY',
+      url: '/policies/refund-policy',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461633126456',
+      resourceId: 'gid://shopify/ShopPolicy/23358111800',
+      tags: [],
+      title: 'Shipping Policy',
+      type: 'SHOP_POLICY',
+      url: '/policies/shipping-policy',
+      items: [],
+    },
+    {
+      id: 'gid://shopify/MenuItem/461633159224',
+      resourceId: 'gid://shopify/ShopPolicy/23358079032',
+      tags: [],
+      title: 'Terms of Service',
+      type: 'SHOP_POLICY',
+      url: '/policies/terms-of-service',
+      items: [],
+    },
+  ],
+};