brabli
105 lines
4.0 KiB
Twig
105 lines
4.0 KiB
Twig
<!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>
|