From 813108100d37f80a28ea493976ab16fc139a8dcc Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Mon, 17 Apr 2023 23:23:54 +0200
Subject: [PATCH] Add icon detail page

---
 docs/.vitepress/components/CloseButton.vue    | 57 +++++++++++
 .../components/IconDetailOverlay.vue          | 94 +++++++++----------
 docs/.vitepress/components/IconPreview.vue    | 60 ++++++++++++
 docs/icons/[iconName].md                      | 16 ----
 docs/icons/[name].md                          | 33 +++++++
 .../{[iconName].paths.ts => [name].paths.ts}  |  9 +-
 6 files changed, 203 insertions(+), 66 deletions(-)
 create mode 100644 docs/.vitepress/components/CloseButton.vue
 create mode 100644 docs/.vitepress/components/IconPreview.vue
 delete mode 100644 docs/icons/[iconName].md
 create mode 100644 docs/icons/[name].md
 rename docs/icons/{[iconName].paths.ts => [name].paths.ts} (85%)

diff --git a/docs/.vitepress/components/CloseButton.vue b/docs/.vitepress/components/CloseButton.vue
new file mode 100644
index 000000000..320a28fa2
--- /dev/null
+++ b/docs/.vitepress/components/CloseButton.vue
@@ -0,0 +1,57 @@
+<template>
+  <button v-bind="$listeners" class="icon-button">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+  </button>
+</template>
+
+<style scoped>
+
+.icon-button {
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  padding: 6px;
+  border-radius: 8px;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  border-radius: 6px;
+  background-color: var(--vp-c-bg-alt);
+  display: inline-flex;
+  /* width: 56px;
+  height: 56px; */
+  font-size: 24px;
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.icon-button:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.icon-button:active {
+    border-color: var(--vp-button-alt-active-border);
+    color: var(--vp-button-alt-active-text);
+    background-color: var(--vp-button-alt-active-bg);
+}
+
+.icon-button.active {
+  border-color: var(--vp-c-brand);
+  /* color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg); */
+}
+</style>
diff --git a/docs/.vitepress/components/IconDetailOverlay.vue b/docs/.vitepress/components/IconDetailOverlay.vue
index 697053f52..90f7a4dc3 100644
--- a/docs/.vitepress/components/IconDetailOverlay.vue
+++ b/docs/.vitepress/components/IconDetailOverlay.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
   import type { IconEntity } from '../types'
   import { ref, computed } from 'vue'
-  import {
-    Dialog,
-    DialogPanel,
-    DialogTitle,
-    DialogDescription,
-  } from '@headlessui/vue'
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import CloseButton from './CloseButton.vue';
+import IconPreview from './IconPreview.vue';
 
   const props = defineProps<{
     icon: IconEntity
@@ -29,27 +25,30 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
     if (!props.icon) return null
     return createLucideIcon(props.icon.name, props.icon.iconNode)
   })
+
+  const tags = computed(() => {
+    if (!props.icon) return []
+    return props.icon.tags.join(' • ')
+  })
 </script>
 
-<template >
-  <div class="overlay-container" v-if="props.icon">
-    <div class="overlay-panel">
-      <div class="icon-container">
-        <component :is="iconComponent" class="icon-component" />
-        <svg class="icon-grid" :viewBox="`0 0 ${size} ${size}`" fill="none" stroke-width="0.1" xmlns="http://www.w3.org/2000/svg">
-          <g :key="`grid-${i}`" v-for="(_, i) in gridLines">
-            <line :key="`horizontal-${i}`" :x1="0" :y1="i + 1" :x2="size" :y2="i + 1" />
-            <line :key="`vertical-${i}`" :x1="i + 1" y1="0" :x2="i + 1" :y2="size" />
-          </g>
-        </svg>
-      </div>
-      <div class="icon-info">
-        <h1 class="icon-name">
-          {{ props.icon.name }}
-        </h1>
+<template>
+  <Transition name="drawer">
+    <div class="overlay-container" v-if="props.icon">
+      <div class="overlay-panel">
+        <CloseButton class="close-button" @click="onClose" />
+        <IconPreview :name="props.icon.name" :iconNode="props.icon.iconNode"/>
+        <div class="icon-info">
+          <h1 class="icon-name">
+            {{ props.icon.name }}
+          </h1>
+          <p class="icon-tags">
+            {{ tags }}
+          </p>
+        </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <style scoped>
@@ -98,30 +97,6 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
   box-shadow: var(--vp-shadow-5);
 }
 
-.icon-container {
-  height: 100%;
-  aspect-ratio: 1/1;
-  position: relative;
-  background: var(--vp-c-bg-alt);
-  border-radius: 8px;
-}
-
-.icon-grid {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  stroke: var(--vp-c-divider);
-}
-
-.icon-component {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 1;
-}
-
 .icon-info {
   padding: 0 24px;
 }
@@ -130,8 +105,33 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
   font-size: 24px;
   font-weight: 500;
   line-height: 32px;
+  margin-bottom: 12px;
 }
 
+.icon-tags {
+  font-size: 16px;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
 
+.close-button {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+}
+
+.drawer-enter-active {
+  transition: all 0.2s cubic-bezier(.21,.8,.46,.9);
+}
+
+.drawer-leave-active {
+  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
 
 </style>
diff --git a/docs/.vitepress/components/IconPreview.vue b/docs/.vitepress/components/IconPreview.vue
new file mode 100644
index 000000000..d9196c880
--- /dev/null
+++ b/docs/.vitepress/components/IconPreview.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { IconEntity } from '../types'
+import { computed } from 'vue'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import CloseButton from './CloseButton.vue';
+
+const props = defineProps<{
+  name: IconEntity['name']
+  iconNode: IconEntity['iconNode']
+}>()
+
+const size = 24
+
+const gridLines = computed(() => Array.from({ length:(size - 1) }))
+
+const iconComponent = computed(() => {
+  if (!props.name || !props.iconNode) return null
+  return createLucideIcon(props.name, props.iconNode)
+})
+</script>
+
+
+<template>
+  <div class="icon-container">
+    <component :is="iconComponent" class="icon-component" />
+    <svg class="icon-grid" :viewBox="`0 0 ${size} ${size}`" fill="none" stroke-width="0.1" xmlns="http://www.w3.org/2000/svg">
+      <g :key="`grid-${i}`" v-for="(_, i) in gridLines">
+        <line :key="`horizontal-${i}`" :x1="0" :y1="i + 1" :x2="size" :y2="i + 1" />
+        <line :key="`vertical-${i}`" :x1="i + 1" y1="0" :x2="i + 1" :y2="size" />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+
+.icon-grid {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  stroke: var(--vp-c-divider);
+}
+.icon-container {
+  height: 100%;
+  aspect-ratio: 1/1;
+  position: relative;
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+}
+.icon-component {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  opacity: 0.8;
+}
+</style>
diff --git a/docs/icons/[iconName].md b/docs/icons/[iconName].md
deleted file mode 100644
index f80937d16..000000000
--- a/docs/icons/[iconName].md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: page
----
-
-<script setup>
-import { onMounted } from 'vue'
-import { data } from './index.data.ts'
-import IconsOverview from '../.vitepress/components/IconsOverview.vue'
-
-const { categories, icons } = data
-onMounted(() => {
-  console.log(data)
-})
-</script>
-
-<IconsOverview :icons="icons" />
diff --git a/docs/icons/[name].md b/docs/icons/[name].md
new file mode 100644
index 000000000..0347a0ef3
--- /dev/null
+++ b/docs/icons/[name].md
@@ -0,0 +1,33 @@
+---
+layout: doc
+footer: false
+editLink: false
+next: false
+prev: false
+---
+
+<script setup>
+import { onMounted, computed } from 'vue'
+import { useData } from 'vitepress'
+// import { data } from './index.data.ts'
+import IconPreview from '../.vitepress/components/IconPreview.vue'
+
+const { params } = useData()
+
+onMounted(() => {
+  console.log(params, 'data')
+})
+const tags = computed(() => {
+  if (!params.tags) return []
+  return params.tags.join(' • ')
+})
+
+</script>
+
+
+
+# {{ $params.name }} {#name}
+
+<IconPreview :name="$params.name" :iconNode="$params.iconNode" />
+
+
diff --git a/docs/icons/[iconName].paths.ts b/docs/icons/[name].paths.ts
similarity index 85%
rename from docs/icons/[iconName].paths.ts
rename to docs/icons/[name].paths.ts
index e3ff1706d..b28301b85 100644
--- a/docs/icons/[iconName].paths.ts
+++ b/docs/icons/[name].paths.ts
@@ -15,8 +15,11 @@ export function getAllNames() {
 export default {
   paths: async () => {
     const icons = await getAllData()
-    return icons.map(({ name: iconName }) => ({
-      params: { iconName }
-    }))
+    return icons.map((iconData) => {
+
+      return {
+        params: iconData,
+      }
+    })
   }
 }