From fb4d72936c677042e4dad1f8814c4972634391c9 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Thu, 8 Dec 2022 16:34:53 -0500
Subject: [PATCH] Make the Icon demo more useful by showing the code that makes
 the icon.

---
 admin/bando/demos/Icon.svelte | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/admin/bando/demos/Icon.svelte b/admin/bando/demos/Icon.svelte
index 3828d86..deec02d 100644
--- a/admin/bando/demos/Icon.svelte
+++ b/admin/bando/demos/Icon.svelte
@@ -1,5 +1,6 @@
 <script>
   import Icon from "$/client/components/Icon.svelte";
+  import Code from "$/client/components/Code.svelte";
   let size = 64;
   let fill = "none";
   let color = "var(--color)";
@@ -21,7 +22,8 @@
     font-size: 2em;
   }
 
-  icons div input {
+  icons div input,
+  icons div select {
     font-size: 1em;
   }
 </style>
@@ -33,7 +35,18 @@
   <div>color: <input name="color" bind:value={ color } /></div>
   <div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div>
   <div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div>
-  <div>tip_position: <input name="tip_position" bind:value={ tip_position } /></div>
+  <div>tip_position:
+    <select name="tip_position" bind:value={ tip_position }>
+      <option>bottom</option>
+      <option>left</option>
+      <option>right</option>
+      <option>top</option>
+      <option>bottom-left</option>
+      <option>bottom-right</option>
+      <option>top-left</option>
+      <option>top-right</option>
+    </select>
+  </div>
   <Icon name="keyboard"    color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
   <Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
   <Icon name="activity"    color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
@@ -43,4 +56,8 @@
 </icons>
 
 <hr>
+<h4>Code Sample using <code>anchor</code></h4>
+
+<Code language="html" content='<Icon name="anchor"&#13;  color="{color}"&#13;  size="{size}"&#13;  fill="{fill}"&#13;  width="{width}"&#13;  shadow="{shadow}"&#13;  tooltip="{tooltip}"&#13;  tip_position="{tip_position}" />' />
+
 <a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>