From 097b57fd49a5b5492b029dda5cfbff22057fb137 Mon Sep 17 00:00:00 2001
From: Luke <lwalton@zebra.com>
Date: Wed, 3 Jul 2024 12:42:17 +0100
Subject: [PATCH] refactor: Update icons example page to match widgetbook

---
 example/lib/pages/assets/icons_example.dart | 63 +++++++++++++++++----
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart
index 6d15709a..6decbdb4 100644
--- a/example/lib/pages/assets/icons_example.dart
+++ b/example/lib/pages/assets/icons_example.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../widgets.dart';
@@ -15,22 +16,62 @@ class IconsExample extends StatefulWidget {
 class _IconsExampleState extends State<IconsExample> {
   bool showGeneratedColors = false;
 
-//TODO: LUKE ADD NAMES TO ICONS
   @override
   Widget build(BuildContext context) {
     return ExampleScaffold(
       name: IconsExample.name,
       child: SingleChildScrollView(
-        padding: EdgeInsets.all(ZetaSpacing.medium),
-        child: Column(
-          children: [
-            Wrap(
-              spacing: 20,
-              runSpacing: 20,
-              children: icons.values.map((e) => ZetaIcon(e, size: 48)).toList(),
-            ),
-            const SizedBox(height: 20),
-          ],
+        key: PageStorageKey(0),
+        child: Center(
+          child: Column(
+            children: [
+              Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4),
+              Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium)
+                  .paddingAll(ZetaSpacing.xl_4),
+              Wrap(
+                spacing: ZetaSpacing.xl_4,
+                runSpacing: ZetaSpacing.xl_4,
+                children: icons.entries.map(
+                  (e) {
+                    final nameArr = (e.key.split('_')).join(' ').capitalize();
+                    return Container(
+                      width: 120,
+                      height: 120,
+                      child: InkWell(
+                        borderRadius: ZetaRadius.rounded,
+                        hoverColor: Zeta.of(context).colors.surfaceHover,
+                        onTap: () async {
+                          await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
+                          ScaffoldMessenger.of(context).showMaterialBanner(
+                            ZetaBanner(context: context, title: 'Icon name copied'),
+                          );
+                          await Future.delayed(Duration(seconds: 4));
+                          ScaffoldMessenger.of(context).clearMaterialBanners();
+                        },
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            ZetaIcon(
+                              IconData(
+                                e.value.codePoint,
+                                fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,
+                                fontPackage: ZetaIcons.package,
+                              ),
+                              size: ZetaSpacing.xl_6,
+                            ),
+                            Text(
+                              nameArr,
+                              textAlign: TextAlign.center,
+                            )
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                ).toList(),
+              ),
+            ],
+          ),
         ),
       ),
     );