diff --git a/lib/simpleshop_theme_web/components/page_templates/contact.html.heex b/lib/simpleshop_theme_web/components/page_templates/contact.html.heex index 1016329..3c37e2f 100644 --- a/lib/simpleshop_theme_web/components/page_templates/contact.html.heex +++ b/lib/simpleshop_theme_web/components/page_templates/contact.html.heex @@ -15,7 +15,7 @@ />
- <.contact_form email="hello@example.com" response_time="We typically respond within 24 hours" /> + <.contact_form email="hello@example.com" />
<.order_tracking_card /> diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex index 8940008..a733f9c 100644 --- a/lib/simpleshop_theme_web/components/shop_components.ex +++ b/lib/simpleshop_theme_web/components/shop_components.ex @@ -1740,41 +1740,46 @@ defmodule SimpleshopThemeWeb.ShopComponents do end @doc """ - Renders social media links as full-width cards with icons and text labels. + Renders social media links in a single card with a compact grid layout. ## Attributes + * `title` - Optional. Card heading. Defaults to "Follow us". * `links` - Optional. List of maps with `platform`, `url`, and `label` keys. - Supported platforms: :instagram, :pinterest, :facebook, :twitter, :tiktok + Supported platforms: :instagram, :pinterest, :facebook, :twitter, :tiktok, :patreon, :youtube ## Examples <.social_links_card /> - <.social_links_card links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Follow on Instagram"}]} /> + <.social_links_card title="Connect with us" links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Instagram"}]} /> """ + attr :title, :string, default: "Follow us" attr :links, :list, default: [ - %{platform: :instagram, url: "#", label: "Follow on Instagram"}, - %{platform: :pinterest, url: "#", label: "Follow on Pinterest"} + %{platform: :instagram, url: "#", label: "Instagram"}, + %{platform: :pinterest, url: "#", label: "Pinterest"} ] def social_links_card(assigns) do ~H""" -
- <%= for link <- @links do %> - - +

<%= @title %>

+
+ <%= for link <- @links do %> + - <.social_icon platform={link.platform} /> - - <%= link.label %> - - <% end %> + + <.social_icon platform={link.platform} /> + + <%= link.label %> + + <% end %> +
""" end @@ -1814,32 +1819,256 @@ defmodule SimpleshopThemeWeb.ShopComponents do """ end + @doc """ + Renders a social media icon for the given platform. + + All icons are from Simple Icons (simpleicons.org), MIT licensed. + + ## Supported platforms + + **Commercial/Creative:** + :instagram, :pinterest, :tiktok, :facebook, :twitter, :youtube, :patreon, :kofi, :etsy, :gumroad, :bandcamp + + **Open Web/Federated:** + :mastodon, :pixelfed, :bluesky, :peertube, :lemmy, :matrix + + **Developer/Hacker:** + :github, :gitlab, :codeberg, :sourcehut + + **Communication:** + :discord, :telegram, :signal + + **Other:** + :substack, :rss, :website + """ attr :platform, :atom, required: true + # Commercial/Creative platforms defp social_icon(%{platform: :instagram} = assigns) do ~H""" - - - - + + """ end defp social_icon(%{platform: :pinterest} = assigns) do ~H""" - - - - + + """ end + defp social_icon(%{platform: :tiktok} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :facebook} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :twitter} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :youtube} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :patreon} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :kofi} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :etsy} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :gumroad} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :bandcamp} = assigns) do + ~H""" + + + + """ + end + + # Open Web/Federated platforms + defp social_icon(%{platform: :mastodon} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :pixelfed} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :bluesky} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :peertube} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :lemmy} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :matrix} = assigns) do + ~H""" + + + + """ + end + + # Developer/Hacker platforms + defp social_icon(%{platform: :github} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :gitlab} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :codeberg} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :sourcehut} = assigns) do + ~H""" + + + + """ + end + + # Communication platforms + defp social_icon(%{platform: :discord} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :telegram} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :signal} = assigns) do + ~H""" + + + + """ + end + + # Other platforms + defp social_icon(%{platform: :substack} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :rss} = assigns) do + ~H""" + + + + """ + end + + defp social_icon(%{platform: :website} = assigns) do + ~H""" + + + + """ + end + + # Fallback for unknown platforms defp social_icon(assigns) do ~H""" - - + + """ end