@zalify/storefront-kit 0.1.0

package/src/react/blocks/video.tsx

@@ -0,0 +1,132 @@
+/**
+ * Port of blocks/video.liquid — general video block: a Shopify-hosted
+ * file (ambient loop or click-to-play with native controls) or a
+ * YouTube/Vimeo link behind a cover-image facade that loads nothing
+ * until clicked. Behavior from the <video-player> island in
+ * src/entries/video.ts. CSS: app/styles/components/blocks-video.css
+ */
+import {useState} from 'react';
+import type {BlockProps} from '../engine/types';
+import {t} from '../engine/translate';
+import {Icon} from '../components/Icon';
+import {imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
+import {
+  mp4Sources,
+  useViewportPlayback,
+  videoPreviewImage,
+  type ThemeVideo,
+} from '../components/VideoModal';
+
+interface VideoSettings {
+  video?: ThemeVideo;
+  /** `video_url` setting: JSON stores the raw URL string; the Liquid
+   *  runtime's {type, id} object shape is accepted too. */
+  video_url?: string | {type?: string; id?: string; url?: string};
+  image?: string;
+  autoplay?: boolean;
+  aspect?: 'auto' | 'square' | 'portrait' | 'landscape';
+}
+
+/** Mirror of Liquid's external video_url object (type + id). */
+function parseExternal(
+  value: VideoSettings['video_url'],
+): {type: 'youtube' | 'vimeo'; id: string} | null {
+  let url = '';
+  if (typeof value === 'object' && value !== null) {
+    if ((value.type === 'youtube' || value.type === 'vimeo') && value.id) {
+      return {type: value.type, id: value.id};
+    }
+    url = value.url ?? '';
+  } else if (typeof value === 'string') {
+    url = value;
+  }
+  if (!url) return null;
+  const youtube = url.match(
+    /(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{6,})/,
+  );
+  if (youtube) return {type: 'youtube', id: youtube[1]};
+  const vimeo = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  if (vimeo) return {type: 'vimeo', id: vimeo[1]};
+  return null;
+}
+
+export default function VideoBlock({settings}: BlockProps<VideoSettings>) {
+  const {autoplay = true, aspect = 'auto'} = settings;
+  const hostedMp4 = mp4Sources(settings.video).at(-1);
+  const external = parseExternal(settings.video_url);
+  const poster =
+    settingImageUrl(settings.image) ?? videoPreviewImage(settings.video);
+
+  // Ambient loops play only while visible (watchPreviews in video.ts).
+  const previewRef = useViewportPlayback();
+  // External embed facade: the iframe gets its src only on click.
+  const [playing, setPlaying] = useState(false);
+
+  const frameClass = hostedMp4 ? '' : ' video-block--frame';
+  const embedUrl = external
+    ? external.type === 'youtube'
+      ? `https://www.youtube-nocookie.com/embed/${external.id}?autoplay=1&playsinline=1&rel=0`
+      : `https://player.vimeo.com/video/${external.id}?autoplay=1`
+    : null;
+
+  return (
+    <div className={`video-block video-block--${aspect}${frameClass}`}>
+      {hostedMp4 ? (
+        <video
+          ref={autoplay ? previewRef : undefined}
+          className="video-block__media"
+          playsInline
+          preload="metadata"
+          {...(autoplay
+            ? {autoPlay: true, loop: true, muted: true, 'data-video-preview': ''}
+            : {controls: true})}
+          poster={poster ? imageUrl(poster, 1500) : undefined}
+        >
+          <source src={hostedMp4.url} type={hostedMp4.mime_type} />
+        </video>
+      ) : embedUrl ? (
+        <>
+          <button
+            type="button"
+            className="video-block__facade"
+            onClick={() => setPlaying(true)}
+            aria-label={t('general.play_video')}
+            hidden={playing}
+          >
+            {poster ? (
+              <img
+                className="video-block__media"
+                src={imageUrl(poster, 1500)}
+                srcSet={[400, 700, 1000, 1500]
+                  .map((w) => `${imageUrl(poster, w)} ${w}w`)
+                  .join(', ')}
+                loading="lazy"
+                alt=""
+              />
+            ) : (
+              <PlaceholderSvg className="video-block__media video-block__placeholder" />
+            )}
+            <span className="video-block__play">
+              <Icon name="icon-play" />
+            </span>
+          </button>
+          <iframe
+            className="video-block__media"
+            src={playing ? embedUrl : undefined}
+            title={t('general.play_video')}
+            allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
+            allowFullScreen
+            hidden={!playing}
+          />
+        </>
+      ) : (
+        <>
+          <PlaceholderSvg className="video-block__media video-block__placeholder" />
+          <span className="video-block__play">
+            <Icon name="icon-play" />
+          </span>
+        </>
+      )}
+    </div>
+  );
+}

package/src/react/components/Facets.tsx

@@ -0,0 +1,424 @@
+/**
+ * Port of snippets/facets.liquid + src/entries/facets.ts (<facets-form>).
+ * CSS: app/styles/components/snippets-facets.css
+ *
+ * One GET-style form holds the toolbar (sort popover) and the Filters
+ * modal. Sort changes apply immediately; filter changes apply on
+ * "Apply". Closing the dialog without applying resets the form to the
+ * currently applied (= URL) state. Applying navigates with the host's
+ * router (via the adapter seam), updating the URL search params (the
+ * mirror of the Liquid island's Section Rendering swap + pushState).
+ *
+ * URL contract (what the route loader should parse):
+ *   sort_by=<value>                      – sort handle (see sort options)
+ *   filter.<key>=<json>                  – one param per applied filter
+ *     value, where <key> is the ProductFilter key from the Storefront
+ *     filter value's `input` (e.g. filter.variantOption={"name":"color",
+ *     "value":"Red"}), and price as filter.price={"min":10,"max":50}
+ *   q=<terms>                            – preserved search terms
+ */
+import {useEffect, useRef} from 'react';
+import type React from 'react';
+import {cleanFormParams} from '../../commerce/index.ts';
+import {useAdapter} from '../adapter';
+import {t} from '../engine/translate';
+import {Icon} from './Icon';
+
+const FILTER_PREFIX = 'filter.';
+
+export interface SortOption {
+  value: string;
+  label: string;
+}
+
+/** Shopify's canonical collection sort handles (Liquid collection.sort_options). */
+export const COLLECTION_SORT_OPTIONS: SortOption[] = [
+  {value: 'manual', label: 'Featured'},
+  {value: 'best-selling', label: 'Best selling'},
+  {value: 'title-ascending', label: 'Alphabetically, A-Z'},
+  {value: 'title-descending', label: 'Alphabetically, Z-A'},
+  {value: 'price-ascending', label: 'Price, low to high'},
+  {value: 'price-descending', label: 'Price, high to low'},
+  {value: 'created-ascending', label: 'Date, old to new'},
+  {value: 'created-descending', label: 'Date, new to old'},
+];
+
+/** Shopify's canonical search sort handles (Liquid search.sort_options). */
+export const SEARCH_SORT_OPTIONS: SortOption[] = [
+  {value: 'relevance', label: 'Relevance'},
+  {value: 'price-ascending', label: 'Price, low to high'},
+  {value: 'price-descending', label: 'Price, high to low'},
+];
+
+export interface FacetsProps {
+  /** Storefront API filters (collection.products.filters / search filters). */
+  filters: any[];
+  /** Base URL the clear-all link points at (mirror of results_url). */
+  resultsUrl: string;
+  resultsCount: number;
+  sortOptions?: SortOption[];
+  defaultSortBy?: string;
+  /** Search terms, preserved as a hidden q input. */
+  terms?: string;
+}
+
+/** Vetted CSS color keywords — mirror of snippets/swatch-style.liquid. */
+const CSS_COLORS =
+  ',aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow,lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen,';
+
+/**
+ * Mirror of snippets/swatch-style.liquid: resolve the `--swatch` fill
+ * from the value's native swatch, else the value name as a vetted CSS
+ * keyword. (The metaobject-based swatch_color lookup has no Storefront
+ * mirror here.)
+ */
+function swatchStyle(swatch: any, name: string): React.CSSProperties {
+  const imageUrl =
+    swatch?.image?.previewImage?.url ??
+    swatch?.image?.image?.url ??
+    (typeof swatch?.image === 'string' ? swatch.image : undefined);
+  if (imageUrl) return {'--swatch': `url(${imageUrl})`} as React.CSSProperties;
+  if (swatch?.color) return {'--swatch': swatch.color} as React.CSSProperties;
+  const probe = String(name ?? '')
+    .toLowerCase()
+    .trim()
+    .replace(/[\s-]/g, '');
+  if (probe && CSS_COLORS.includes(`,${probe},`))
+    return {'--swatch': probe} as React.CSSProperties;
+  return {};
+}
+
+/** filter value → URL param, from the Storefront `input` JSON. */
+function valueParam(value: any): {name: string; value: string} | null {
+  try {
+    const input =
+      typeof value?.input === 'string' ? JSON.parse(value.input) : value?.input;
+    if (!input || typeof input !== 'object') return null;
+    const key = Object.keys(input)[0];
+    if (!key) return null;
+    return {name: `${FILTER_PREFIX}${key}`, value: JSON.stringify(input[key])};
+  } catch {
+    return null;
+  }
+}
+
+function isPriceFilter(filter: any): boolean {
+  const type = String(filter?.type ?? '').toLowerCase();
+  return type === 'price_range';
+}
+
+export function Facets({
+  filters,
+  resultsUrl,
+  resultsCount,
+  sortOptions = COLLECTION_SORT_OPTIONS,
+  defaultSortBy = 'manual',
+  terms,
+}: FacetsProps) {
+  const adapter = useAdapter();
+  const {Link} = adapter;
+  const navigate = adapter.useNavigate();
+  const searchParams = adapter.useSearchParams();
+  const pathname = adapter.usePathname();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Applied state comes straight from the URL (the mirror of the
+  // server-rendered form state in Liquid).
+  const activeCount = [...searchParams.keys()].filter((key) =>
+    key.startsWith(FILTER_PREFIX),
+  ).length;
+
+  const currentSort = searchParams.get('sort_by') ?? defaultSortBy;
+  const sortLabel =
+    sortOptions.find((option) => option.value === currentSort)?.label ?? '';
+
+  let appliedPrice: {min?: number; max?: number} = {};
+  try {
+    appliedPrice = JSON.parse(searchParams.get('filter.price') ?? 'null') ?? {};
+  } catch {
+    appliedPrice = {};
+  }
+
+  /** Mirror of facets.ts #formUrl(): FormData → clean search params
+   * (shared cleanFormParams from commerce-core), with the price pair
+   * merged into one filter.price JSON param. */
+  const formUrl = (): string => {
+    const form = formRef.current;
+    if (!form) return pathname;
+    const entries: Array<[string, FormDataEntryValue]> = [];
+    let priceMin = '';
+    let priceMax = '';
+    for (const [name, raw] of new FormData(form)) {
+      const value = typeof raw === 'string' ? raw : '';
+      if (name === 'price.min') {
+        priceMin = value;
+        continue;
+      }
+      if (name === 'price.max') {
+        priceMax = value;
+        continue;
+      }
+      entries.push([name, value]);
+    }
+    const params = cleanFormParams(entries);
+    if (priceMin !== '' || priceMax !== '') {
+      const price: {min?: number; max?: number} = {};
+      if (priceMin !== '') price.min = Number(priceMin);
+      if (priceMax !== '') price.max = Number(priceMax);
+      params.append('filter.price', JSON.stringify(price));
+    }
+    return `${pathname}?${params}`;
+  };
+
+  const closePanels = () => {
+    for (const panel of rootRef.current?.querySelectorAll('details[open]') ??
+      []) {
+      panel.removeAttribute('open');
+    }
+  };
+
+  const openFilters = () => {
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.open) dialog.showModal();
+  };
+
+  const cancelFilters = () => dialogRef.current?.close();
+
+  /** Backdrop light-dismiss: clicks on the <dialog> itself hit the backdrop. */
+  const onDialogClick = (event: React.MouseEvent) => {
+    if (event.target === dialogRef.current) dialogRef.current?.close();
+  };
+
+  /** Any close path (Cancel, X, Esc, backdrop) discards unapplied edits. */
+  const onDialogClose = () => formRef.current?.reset();
+
+  /** Sort radios apply immediately. */
+  const onSortChange = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => void navigate(formUrl()), 100);
+  };
+
+  const onSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    // Capture the form state BEFORE closing — close resets the form
+    const url = formUrl();
+    dialogRef.current?.close();
+    void navigate(url);
+  };
+
+  useEffect(() => {
+    const onDocumentClick = (event: MouseEvent) => {
+      if (event.target instanceof Node && rootRef.current?.contains(event.target))
+        return;
+      closePanels();
+    };
+    const onKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closePanels();
+    };
+    document.addEventListener('click', onDocumentClick);
+    document.addEventListener('keydown', onKeydown);
+    return () => {
+      document.removeEventListener('click', onDocumentClick);
+      document.removeEventListener('keydown', onKeydown);
+      clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const clearAllHref = `${resultsUrl}${terms ? `?q=${encodeURIComponent(terms)}` : ''}`;
+  const colorNames = t('products.color_option_match')
+    .toLowerCase()
+    .split(',')
+    .map((name) => name.trim())
+    .filter(Boolean);
+
+  return (
+    <div ref={rootRef}>
+      {/* Remount on URL change so uncontrolled defaults track the applied state */}
+      <form
+        key={searchParams.toString()}
+        ref={formRef}
+        action={resultsUrl}
+        method="get"
+        onSubmit={onSubmit}
+      >
+        {terms ? <input type="hidden" name="q" value={terms} /> : null}
+        <div className="facets-toolbar">
+          <span className="facets-toolbar__count">
+            {t(resultsCount === 1 ? 'facets.items.one' : 'facets.items.other', {
+              count: resultsCount,
+            })}
+          </span>
+
+          <div className="facets-toolbar__actions">
+            <span className="facets-toolbar__group">
+              <button
+                type="button"
+                className="facets-toolbar__button"
+                onClick={openFilters}
+              >
+                {t('facets.filter')}
+                <span className="facets-toolbar__value">( {activeCount} )</span>
+              </button>
+              {activeCount > 0 && (
+                <Link
+                  className="facets-toolbar__clear"
+                  to={clearAllHref}
+                  aria-label={t('facets.clear_all')}
+                >
+                  <Icon name="icon-close" />
+                </Link>
+              )}
+            </span>
+
+            <details className="facet-sort">
+              <summary className="facets-toolbar__button">
+                {t('facets.sort')}
+                <span className="facets-toolbar__value">( {sortLabel} )</span>
+              </summary>
+              <div className="facet-sort__panel">
+                {sortOptions.map((option) => (
+                  <label className="facet-sort__option" key={option.value}>
+                    <input
+                      type="radio"
+                      className="visually-hidden"
+                      name="sort_by"
+                      value={option.value}
+                      defaultChecked={option.value === currentSort}
+                      onChange={onSortChange}
+                    />
+                    <span>{option.label}</span>
+                  </label>
+                ))}
+              </div>
+            </details>
+          </div>
+        </div>
+
+        <dialog
+          className="facets-dialog"
+          ref={dialogRef}
+          scroll-lock=""
+          onClick={onDialogClick}
+          onClose={onDialogClose}
+          aria-label={t('facets.filters')}
+        >
+          <header className="facets-dialog__header">
+            <h2 className="facets-dialog__title">{t('facets.filters')}</h2>
+            <button
+              type="button"
+              className="facets-dialog__close"
+              onClick={cancelFilters}
+              aria-label={t('general.close')}
+            >
+              <Icon name="icon-close" />
+            </button>
+          </header>
+
+          <div className="facets-dialog__body">
+            {filters.map((filter: any) => {
+              if (isPriceFilter(filter)) {
+                return (
+                  <fieldset className="facets-group" key={filter.id ?? filter.label}>
+                    <legend className="facets-group__label">{filter.label}</legend>
+                    <div className="facets-group__price cluster">
+                      <label>
+                        <span className="visually-hidden">{t('facets.from')}</span>
+                        <input
+                          type="number"
+                          name="price.min"
+                          placeholder={t('facets.from')}
+                          min="0"
+                          defaultValue={appliedPrice.min ?? ''}
+                        />
+                      </label>
+                      <label>
+                        <span className="visually-hidden">{t('facets.to')}</span>
+                        <input
+                          type="number"
+                          name="price.max"
+                          placeholder={t('facets.to')}
+                          min="0"
+                          defaultValue={appliedPrice.max ?? ''}
+                        />
+                      </label>
+                    </div>
+                  </fieldset>
+                );
+              }
+
+              // Color filters get swatch chips: native swatch data on any
+              // value, or a filter named like a color
+              const values: any[] = filter.values ?? [];
+              const filterLabelDown = String(filter.label ?? '').toLowerCase();
+              const filterIsColor =
+                Boolean(values[0]?.swatch) ||
+                colorNames.some((name) => filterLabelDown.includes(name));
+
+              return (
+                <fieldset className="facets-group" key={filter.id ?? filter.label}>
+                  <legend className="facets-group__label">{filter.label}</legend>
+                  <div className="facets-group__values">
+                    {values.map((value: any) => {
+                      const param = valueParam(value);
+                      if (!param) return null;
+                      const active = searchParams
+                        .getAll(param.name)
+                        .includes(param.value);
+                      const disabled = value.count === 0 && !active;
+                      return (
+                        <label
+                          className={`facet-pill${disabled ? ' facet-pill--disabled' : ''}`}
+                          key={value.id ?? param.value}
+                        >
+                          <input
+                            type="checkbox"
+                            className="visually-hidden"
+                            name={param.name}
+                            value={param.value}
+                            defaultChecked={active}
+                            disabled={disabled}
+                          />
+                          <span className="facet-pill__label">
+                            {filterIsColor && (
+                              <span
+                                className="swatch facet-pill__swatch"
+                                style={swatchStyle(value.swatch, value.label)}
+                              ></span>
+                            )}
+                            {value.label}
+                          </span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </fieldset>
+              );
+            })}
+          </div>
+
+          <footer className="facets-dialog__footer">
+            <button
+              type="button"
+              className="facets-dialog__cancel"
+              onClick={cancelFilters}
+            >
+              {t('facets.cancel')}
+            </button>
+            <button type="submit" className="button">
+              {t('facets.apply')}
+            </button>
+          </footer>
+        </dialog>
+
+        <noscript>
+          <button type="submit" className="button button--secondary">
+            {t('facets.apply')}
+          </button>
+        </noscript>
+      </form>
+    </div>
+  );
+}

package/src/react/components/Icon.tsx

@@ -0,0 +1,96 @@
+/**
+ * Mirror of `{{ 'icon-*.svg' | inline_asset_content }}`: inlines the
+ * theme's SVG icons (copied from the theme's assets/) so they inherit
+ * currentColor. The SVG markup is inlined as string constants (copied
+ * verbatim from the theme's assets/icons/*.svg) so the package stays
+ * bundler-agnostic — no import.meta.glob.
+ */
+
+export type IconName =
+  | 'icon-account'
+  | 'icon-cart'
+  | 'icon-chevron-left'
+  | 'icon-chevron-right'
+  | 'icon-close'
+  | 'icon-facebook'
+  | 'icon-instagram'
+  | 'icon-pause'
+  | 'icon-pinterest'
+  | 'icon-play'
+  | 'icon-search'
+  | 'icon-star'
+  | 'icon-tiktok'
+  | 'icon-x'
+  | 'icon-youtube';
+
+const ICONS: Record<IconName, string> = {
+  'icon-account': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" slot="signed-out-avatar">
+  <circle cx="10" cy="6.5" r="2.75" stroke="currentColor" stroke-width="var(--icon-stroke-width)" />
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    stroke-width="var(--icon-stroke-width)"
+    d="m5.172 14.591-.437.786a.588.588 0 0 0 .514.873h9.502a.588.588 0 0 0 .514-.873l-.437-.786a5.523 5.523 0 0 0-9.656 0" />
+</svg>`,
+  'icon-cart': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+    stroke-width="var(--icon-stroke-width)"
+    d="M3.392 6.875h13.216v8.016c0 .567-.224 1.112-.624 1.513-.4.402-.941.627-1.506.627H5.522a2.13 2.13 0 0 1-1.506-.627 2.15 2.15 0 0 1-.624-1.513zM8.818 2.969h2.333c.618 0 1.211.247 1.649.686a2.35 2.35 0 0 1 .683 1.658v1.562H6.486V5.313c0-.622.246-1.218.683-1.658a2.33 2.33 0 0 1 1.65-.686" />
+</svg>`,
+  'icon-chevron-left': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5 5.5L8 12l6.5 6.5"/>
+</svg>`,
+  'icon-chevron-right': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.5 5.5L16 12l-6.5 6.5"/>
+</svg>`,
+  'icon-close': `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 6l12 12M18 6L6 18"/>
+</svg>`,
+  'icon-facebook': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+  <path stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+</svg>`,
+  'icon-instagram': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+  <rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="1.5"/>
+  <circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="1.5"/>
+  <circle cx="17.3" cy="6.7" r="1.1" fill="currentColor"/>
+</svg>`,
+  'icon-pause': `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.5 3.5v9M10.5 3.5v9"/>
+</svg>`,
+  'icon-pinterest': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <path fill="currentColor" d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026z"/>
+</svg>`,
+  'icon-play': `<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3.2v9.6c0 .4.45.65.8.43l7-4.8a.5.5 0 0 0 0-.86l-7-4.8A.5.5 0 0 0 5 3.2Z"/>
+</svg>`,
+  'icon-search': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" aria-hidden="true">
+  <path stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" d="M3.12939 3.15747C4.90196 1.47122 7.63947 1.37352 9.36572 2.98853L9.52979 3.15063C11.2696 4.96073 11.2614 7.81258 9.54443 9.53247C7.78203 11.2161 5.03421 11.2591 3.29541 9.69653L3.13037 9.54028C1.40138 7.73421 1.40065 4.96368 3.12939 3.15747Z"/>
+  <path stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" d="M9.66699 9.66675L13.3337 13.3334"/>
+</svg>`,
+  'icon-star': `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2.5l2.95 6.32 6.93.84-5.11 4.75 1.34 6.84L12 17.85l-6.11 3.4 1.34-6.84-5.11-4.75 6.93-.84z"/>
+</svg>`,
+  'icon-tiktok': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <path fill="currentColor" d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
+</svg>`,
+  'icon-x': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+  <path fill="currentColor" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
+</svg>`,
+  'icon-youtube': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+  <path stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/>
+  <path fill="currentColor" d="M9.75 15.02 15.5 11.75 9.75 8.48z"/>
+</svg>`,
+};
+
+export function Icon({name, className}: {name: IconName; className?: string}) {
+  const svg = ICONS[name];
+  if (!svg) return null;
+  if (!className) {
+    return <span dangerouslySetInnerHTML={{__html: svg}} style={{display: 'contents'}} />;
+  }
+  return (
+    <span
+      className={className}
+      style={{display: 'contents'}}
+      dangerouslySetInnerHTML={{__html: svg}}
+    />
+  );
+}