refactor: extract skip_link to shared ShopComponents module

Move the accessibility skip link from ThemeLive.PreviewPages to the
shared ShopComponents module for reuse on public storefront pages.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/shop_components.ex

@@ -38,4 +38,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     </div>
     """
   end
+
+  @doc """
+  Renders the skip link for keyboard navigation accessibility.
+
+  This is a standard accessibility pattern that allows keyboard users
+  to skip directly to the main content.
+  """
+  def skip_link(assigns) do
+    ~H"""
+    <a href="#main-content" class="skip-link">
+      Skip to main content
+    </a>
+    """
+  end
 end

lib/simpleshop_theme_web/live/theme_live/preview_pages.ex

@@ -4,16 +4,6 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
 
   embed_templates "preview_pages/*"
 
-  @doc """
-  Renders the skip link for keyboard navigation accessibility.
-  """
-  def skip_link(assigns) do
-    ~H"""
-    <a href="#main-content" class="skip-link">
-      Skip to main content
-    </a>
-    """
-  end
 
   @doc """
   Renders the shop header with logo based on logo_mode setting.

lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex

@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>

lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex

@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>

lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex

@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>

lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex

@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>

lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex

@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>

lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex

@@ -1,6 +1,6 @@
 <div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>

lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex

@@ -3,7 +3,7 @@
 %>
 <div class="shop-container min-h-screen" style="position: relative; background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Skip Link for Accessibility -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.skip_link />
+  <.skip_link />
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>