use ux_package template for ux-icons page

symfony · Nov 4, 2024 · 81252f7 · 81252f7
1 parent 65e59d1
commit 81252f7
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 99 deletions.
diff --git a/ux.symfony.com/src/Controller/Icons/IconsController.php b/ux.symfony.com/src/Controller/Icons/IconsController.php
@@ -42,7 +42,7 @@ public function index(
         ];
         $iconSets = array_map(fn ($iconSet) => $iconSetRepository->find($iconSet), $iconSets);
 
-        return $this->render('icons/index.html.twig', [
+        return $this->render('ux_packages/icons.html.twig', [
             'package' => $packageRepository->find('icons'),
             'iconSets' => $iconSets,
         ]);

diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php
@@ -25,7 +25,7 @@ public function findAll(?string $query = null): array
                 'icons',
                 'UX Icons',
                 'app_icons',
-                '#fff',
+                'purple',
                 'linear-gradient(to bottom right, cyan, purple)',
                 'SVG icons made easy',
                 'Render SVG icons seamlessly from your Twig templates.',

diff --git a/ux.symfony.com/templates/icons/_aside.html.twig b/ux.symfony.com/templates/icons/_aside.html.twig
diff --git a/ux.symfony.com/templates/icons/index.html.twig b/ux.symfony.com/templates/icons/index.html.twig
diff --git a/ux.symfony.com/templates/ux_packages/icons.html.twig b/ux.symfony.com/templates/ux_packages/icons.html.twig
@@ -0,0 +1,52 @@
+{% extends 'ux_packages/package.html.twig' %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <meta name="turbo-prefetch" content="false">
+{% endblock %}
+
+{% block package_header %}
+    {% component PackageHeader with {
+        package: 'icons',
+        eyebrowText: 'SVG icons made easy'
+    } %}
+        {% block title_header %}
+            UX Icons
+        {% endblock %}
+
+        {% block sub_content %}
+            Render SVG icons seamlessly from your Twig templates.
+            <br/>
+            Find the <code>perfect icon</code> among <code>200,000 choices</code> from the most popular <code>icon sets</code>.
+        {% endblock %}
+    {% endcomponent %}
+{% endblock %}
+
+{% block package_content %}
+    <section class="container-fluid container-xxl px-4 px-md-5 py-3">
+        <twig:Icon:IconSearch/>
+    </section>
+
+    <section class="container-fluid container-xxl px-4 px-md-5 py-3">
+        <p class="eyebrows" style="margin: 4rem 0 0;">Iconic Packages</p>
+        <div class="d-md-flex justify-content-md-between text-center align-items-center text-md-start">
+            <h2 class="ubuntu pt-2 component-headlines">Popular <em class="rainbow-emphasis">Icon Sets</em></h2>
+        </div>
+        <div class="mt-3 mt-md-5">
+            <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem;">
+                {% for icon_set in iconSets %}
+                    <twig:Icon:IconSetCard
+                        iconSet="{{ icon_set }}"
+                        index="{{ loop.index0 }}"
+                    />
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
+{% endblock %}
+
+{% block body %}
+    {{ parent() }}
+    <twig:Icon:IconModal/>
+{% endblock %}