Add showcase code

2026-04-30 12:22:50 +01:00
parent 93258abd38
commit 5f1404d77c
4 changed files with 281 additions and 0 deletions
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>PCM Badge Bundle — Dev Preview</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        accent: '#7c3aed',
+                        primary: '#0f172a',
+                    },
+                    fontSize: {
+                        '2xs': ['0.625rem', '0.875rem'],
+                    },
+                },
+            },
+        };
+    </script>
+</head>
+<body class="bg-zinc-50 text-zinc-900 p-8 font-sans">
+    <h1 class="text-2xl font-bold mb-2">PCM Badge Bundle</h1>
+    <p class="text-zinc-600 mb-8">Local dev preview. Edit <code class="bg-zinc-200 px-1 rounded">dev/templates/showcase.html.twig</code> to add new variants.</p>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Solid (all colours)</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for colour in colours %}
+                <twig:Pcm:Badge colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Outline (all colours)</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for colour in colours %}
+                <twig:Pcm:Badge colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">No icons</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for sample in samples %}
+                <twig:Pcm:Badge :obj="sample">{{ sample.label }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Icons</h2>
+        <div class="flex flex-wrap gap-2">
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge outline icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge outline icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge outline icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Custom classes</h2>
+        <div class="flex flex-wrap gap-2 items-center">
+            <twig:Pcm:Badge colour="green" class="rounded-full" label="Sale 20% off" />
+            <twig:Pcm:Badge class="text-xl p-2" colour="maroon" outline>Danger!</twig:Pcm:Badge>
+            <twig:Pcm:Badge icon="material-symbols:add-alert" class="rounded-full text-xl" colour="maroon" outline>Danger!</twig:Pcm:Badge>
+        </div>
+    </section>
+</body>
+</html>