jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity
8af5cbf41e
berrypod/lib/berrypod_web/components/block_thumbnails.ex

479 lines
19 KiB
Elixir
Raw Normal View History

add block previews, picker thumbnails and newsletter settings Block cards now show a one-line content summary below the name. Block picker items include SVG wireframe thumbnails. Newsletter block marked as decorative with configurable title/description and form submission prevented on the shop side. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 20:34:52 +00:00
defmodule BerrypodWeb.BlockThumbnails do
@moduledoc """
Tiny SVG wireframe thumbnails for each block type.
Used in the block picker to give a visual hint of what each block looks like.
Each thumbnail is an 80x48 SVG with simple geometric shapes.
"""
use Phoenix.Component
attr :type, :string, required: true
def block_thumbnail(assigns) do
~H"""
<svg
viewBox="0 0 80 48"
class="block-picker-thumb"
role="img"
aria-hidden="true"
>
<.thumb_shapes type={@type} />
</svg>
"""
end
# ── Hero banner ──────────────────────────────────────────────────
defp thumb_shapes(%{type: "hero"} = assigns) do
~H"""
<rect x="0" y="0" width="80" height="48" rx="2" fill="currentColor" opacity="0.08" />
<rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.35" />
<rect x="24" y="18" width="32" height="3" rx="1" fill="currentColor" opacity="0.2" />
<rect x="28" y="30" width="24" height="7" rx="2" fill="currentColor" opacity="0.25" />
"""
end
# ── Featured products ────────────────────────────────────────────
defp thumb_shapes(%{type: "featured_products"} = assigns) do
~H"""
<rect x="2" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
<rect x="22" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
<rect x="42" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
<rect x="62" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
<rect x="4" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="24" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="44" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="64" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="4" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="24" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="44" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="64" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
"""
end
# ── Image + text ─────────────────────────────────────────────────
defp thumb_shapes(%{type: "image_text"} = assigns) do
~H"""
<rect x="2" y="4" width="34" height="40" rx="2" fill="currentColor" opacity="0.12" />
<rect x="42" y="8" width="32" height="4" rx="1" fill="currentColor" opacity="0.3" />
<rect x="42" y="16" width="28" height="3" rx="1" fill="currentColor" opacity="0.15" />
<rect x="42" y="22" width="30" height="3" rx="1" fill="currentColor" opacity="0.15" />
<rect x="42" y="28" width="20" height="3" rx="1" fill="currentColor" opacity="0.15" />
<rect x="42" y="36" width="16" height="5" rx="2" fill="currentColor" opacity="0.2" />
"""
end
# ── Category navigation ──────────────────────────────────────────
defp thumb_shapes(%{type: "category_nav"} = assigns) do
~H"""
<rect x="4" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.15" />
<rect x="23" y="18" width="18" height="12" rx="6" fill="currentColor" opacity="0.15" />
<rect x="44" y="18" width="14" height="12" rx="6" fill="currentColor" opacity="0.15" />
<rect x="61" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.15" />
"""
end
# ── Newsletter signup ────────────────────────────────────────────
defp thumb_shapes(%{type: "newsletter_card"} = assigns) do
~H"""
<rect
x="4"
y="4"
width="72"
height="40"
rx="3"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.12"
stroke-width="1"
/>
<rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.3" />
<rect x="24" y="18" width="32" height="3" rx="1" fill="currentColor" opacity="0.15" />
<rect
x="14"
y="28"
width="36"
height="8"
rx="2"
fill="currentColor"
opacity="0.1"
stroke="currentColor"
stroke-opacity="0.15"
stroke-width="0.5"
/>
<rect x="52" y="28" width="16" height="8" rx="2" fill="currentColor" opacity="0.2" />
"""
end
# ── Social links ─────────────────────────────────────────────────
defp thumb_shapes(%{type: "social_links_card"} = assigns) do
~H"""
<rect
x="4"
y="4"
width="72"
height="40"
rx="3"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.12"
stroke-width="1"
/>
<rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.25" />
<circle cx="24" cy="30" r="5" fill="currentColor" opacity="0.15" />
<circle cx="36" cy="30" r="5" fill="currentColor" opacity="0.15" />
<circle cx="48" cy="30" r="5" fill="currentColor" opacity="0.15" />
<circle cx="60" cy="30" r="5" fill="currentColor" opacity="0.15" />
"""
end
# ── Info card ────────────────────────────────────────────────────
defp thumb_shapes(%{type: "info_card"} = assigns) do
~H"""
<rect
x="4"
y="4"
width="72"
height="40"
rx="3"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.12"
stroke-width="1"
/>
<rect x="10" y="10" width="20" height="3" rx="1" fill="currentColor" opacity="0.25" />
<rect x="10" y="18" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
<rect x="40" y="18" width="28" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="10" y="24" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
<rect x="40" y="24" width="22" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="10" y="30" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
<rect x="40" y="30" width="26" height="2" rx="1" fill="currentColor" opacity="0.12" />
"""
end
# ── Trust badges ─────────────────────────────────────────────────
defp thumb_shapes(%{type: "trust_badges"} = assigns) do
~H"""
<circle cx="16" cy="18" r="7" fill="currentColor" opacity="0.1" />
<circle cx="40" cy="18" r="7" fill="currentColor" opacity="0.1" />
<circle cx="64" cy="18" r="7" fill="currentColor" opacity="0.1" />
<rect x="8" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="32" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="56" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
"""
end
# ── Customer reviews ─────────────────────────────────────────────
defp thumb_shapes(%{type: "reviews_section"} = assigns) do
~H"""
<rect
x="2"
y="2"
width="24"
height="44"
rx="2"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect
x="28"
y="2"
width="24"
height="44"
rx="2"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect
x="54"
y="2"
width="24"
height="44"
rx="2"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect x="6" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="32" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="58" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
<rect x="6" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="32" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="58" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
"""
end
# ── Spacer ───────────────────────────────────────────────────────
defp thumb_shapes(%{type: "spacer"} = assigns) do
~H"""
<line
x1="40"
y1="8"
x2="40"
y2="16"
stroke="currentColor"
stroke-opacity="0.2"
stroke-width="1"
stroke-dasharray="2 2"
/>
<rect
x="30"
y="18"
width="20"
height="12"
rx="1"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.15"
stroke-width="0.5"
stroke-dasharray="2 2"
/>
<line
x1="40"
y1="32"
x2="40"
y2="40"
stroke="currentColor"
stroke-opacity="0.2"
stroke-width="1"
stroke-dasharray="2 2"
/>
"""
end
# ── Divider ──────────────────────────────────────────────────────
defp thumb_shapes(%{type: "divider"} = assigns) do
~H"""
<line
x1="8"
y1="24"
x2="72"
y2="24"
stroke="currentColor"
stroke-opacity="0.25"
stroke-width="1.5"
/>
"""
end
# ── Button ───────────────────────────────────────────────────────
defp thumb_shapes(%{type: "button"} = assigns) do
~H"""
<rect x="22" y="16" width="36" height="16" rx="4" fill="currentColor" opacity="0.2" />
<rect x="28" y="22" width="24" height="4" rx="1" fill="currentColor" opacity="0.3" />
"""
end
# ── Video embed ──────────────────────────────────────────────────
defp thumb_shapes(%{type: "video_embed"} = assigns) do
~H"""
<rect x="4" y="4" width="72" height="40" rx="2" fill="currentColor" opacity="0.08" />
<polygon points="34,18 34,32 48,25" fill="currentColor" opacity="0.25" />
"""
end
# ── Product hero ─────────────────────────────────────────────────
defp thumb_shapes(%{type: "product_hero"} = assigns) do
~H"""
<rect x="2" y="4" width="38" height="40" rx="2" fill="currentColor" opacity="0.1" />
<rect x="46" y="6" width="28" height="4" rx="1" fill="currentColor" opacity="0.3" />
<rect x="46" y="14" width="16" height="3" rx="1" fill="currentColor" opacity="0.2" />
<rect x="46" y="24" width="28" height="8" rx="2" fill="currentColor" opacity="0.2" />
"""
end
# ── Breadcrumb ───────────────────────────────────────────────────
defp thumb_shapes(%{type: "breadcrumb"} = assigns) do
~H"""
<rect x="6" y="20" width="14" height="3" rx="1" fill="currentColor" opacity="0.2" />
<rect x="24" y="21" width="4" height="1.5" rx="0.5" fill="currentColor" opacity="0.15" />
<rect x="32" y="20" width="18" height="3" rx="1" fill="currentColor" opacity="0.2" />
<rect x="54" y="21" width="4" height="1.5" rx="0.5" fill="currentColor" opacity="0.15" />
<rect x="62" y="20" width="12" height="3" rx="1" fill="currentColor" opacity="0.3" />
"""
end
# ── Product grid ─────────────────────────────────────────────────
defp thumb_shapes(%{type: t} = assigns) when t in ~w(product_grid related_products) do
~H"""
<rect x="2" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
<rect x="28" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
<rect x="54" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
<rect x="2" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
<rect x="28" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
<rect x="54" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
"""
end
# ── Collection header ────────────────────────────────────────────
defp thumb_shapes(%{type: "collection_header"} = assigns) do
~H"""
<rect x="16" y="14" width="48" height="6" rx="1" fill="currentColor" opacity="0.3" />
<rect x="28" y="26" width="24" height="3" rx="1" fill="currentColor" opacity="0.15" />
"""
end
# ── Filter bar ───────────────────────────────────────────────────
defp thumb_shapes(%{type: "filter_bar"} = assigns) do
~H"""
<rect x="4" y="18" width="14" height="12" rx="6" fill="currentColor" opacity="0.2" />
<rect x="21" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.1" />
<rect x="40" y="18" width="12" height="12" rx="6" fill="currentColor" opacity="0.1" />
<rect
x="58"
y="18"
width="18"
height="12"
rx="2"
fill="currentColor"
opacity="0.08"
stroke="currentColor"
stroke-opacity="0.15"
stroke-width="0.5"
/>
"""
end
# ── Cart items ───────────────────────────────────────────────────
defp thumb_shapes(%{type: "cart_items"} = assigns) do
~H"""
<rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor" opacity="0.12" />
<rect x="20" y="6" width="30" height="3" rx="1" fill="currentColor" opacity="0.2" />
<rect x="20" y="12" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
<line
x1="4"
y1="20"
x2="76"
y2="20"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect x="4" y="24" width="12" height="12" rx="2" fill="currentColor" opacity="0.12" />
<rect x="20" y="26" width="24" height="3" rx="1" fill="currentColor" opacity="0.2" />
<rect x="20" y="32" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
"""
end
# ── Order summary ────────────────────────────────────────────────
defp thumb_shapes(%{type: "order_summary"} = assigns) do
~H"""
<rect
x="4"
y="4"
width="72"
height="40"
rx="3"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect x="10" y="12" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="50" y="12" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="10" y="18" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
<rect x="50" y="18" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
<line
x1="10"
y1="24"
x2="70"
y2="24"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect x="10" y="28" width="14" height="3" rx="1" fill="currentColor" opacity="0.25" />
<rect x="50" y="28" width="20" height="3" rx="1" fill="currentColor" opacity="0.25" />
<rect x="20" y="36" width="40" height="6" rx="2" fill="currentColor" opacity="0.2" />
"""
end
# ── Contact form ─────────────────────────────────────────────────
defp thumb_shapes(%{type: "contact_form"} = assigns) do
~H"""
<rect
x="8"
y="4"
width="64"
height="8"
rx="2"
fill="currentColor"
opacity="0.08"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect
x="8"
y="16"
width="64"
height="8"
rx="2"
fill="currentColor"
opacity="0.08"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect
x="8"
y="28"
width="64"
height="12"
rx="2"
fill="currentColor"
opacity="0.08"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect x="8" y="43" width="20" height="5" rx="2" fill="currentColor" opacity="0.2" />
"""
end
# ── Content body ─────────────────────────────────────────────────
defp thumb_shapes(%{type: "content_body"} = assigns) do
~H"""
<rect x="4" y="6" width="50" height="4" rx="1" fill="currentColor" opacity="0.25" />
<rect x="4" y="14" width="72" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="4" y="20" width="68" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="4" y="26" width="72" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="4" y="32" width="60" height="2" rx="1" fill="currentColor" opacity="0.12" />
<rect x="4" y="38" width="66" height="2" rx="1" fill="currentColor" opacity="0.12" />
"""
end
# ── Fallback for any unmatched type ──────────────────────────────
defp thumb_shapes(assigns) do
~H"""
<rect
x="4"
y="4"
width="72"
height="40"
rx="3"
fill="currentColor"
opacity="0.06"
stroke="currentColor"
stroke-opacity="0.1"
stroke-width="0.5"
/>
<rect x="20" y="16" width="40" height="4" rx="1" fill="currentColor" opacity="0.2" />
<rect x="26" y="24" width="28" height="3" rx="1" fill="currentColor" opacity="0.12" />
"""
end
end
Reference in New Issue Copy Permalink