From 5dbc6e9b9847b30aafd0fa0756ce5cb266f298b4 Mon Sep 17 00:00:00 2001
From: kurone-kito <krone@kit.black>
Date: Sun, 14 Jul 2024 05:22:06 +0900
Subject: [PATCH] feat(node:web): implemented the explore page

---
 nodePackages/web/src/constants.yml            | 17 +++++++
 nodePackages/web/src/i18n/en.ts               |  3 ++
 nodePackages/web/src/i18n/ja.ts               |  3 ++
 nodePackages/web/src/i18n/types.ts            |  2 +
 .../web/src/routes/[[language]]/explore.tsx   | 49 ++++++++++++++++---
 5 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/nodePackages/web/src/constants.yml b/nodePackages/web/src/constants.yml
index 15f7dfaa..d77a8ee0 100644
--- a/nodePackages/web/src/constants.yml
+++ b/nodePackages/web/src/constants.yml
@@ -1,4 +1,21 @@
 iconsToDo: 160
+newList:
+  - CircleCircle
+  - CircleCross
+  - CircleSquare
+  - EnvelopePlus
+  - EnvelopeQ
+  - FaceMirror
+  - History
+  - HomeReload
+  - Keyboard
+  - KeyboardThin
+  - ListThin
+  - OSC
+  - StarThin
+  - Resolution
+  - Return
+  - ReturnReverse
 npmReact: npm i @kurone-kito/launchpad-icons-react@next
 npmSolid: npm i @kurone-kito/launchpad-icons-solid@next
 vccUrl: vcc://vpm/addRepo?url=
diff --git a/nodePackages/web/src/i18n/en.ts b/nodePackages/web/src/i18n/en.ts
index f289c73b..df4196b5 100644
--- a/nodePackages/web/src/i18n/en.ts
+++ b/nodePackages/web/src/i18n/en.ts
@@ -7,6 +7,9 @@ const en: Resources = {
   commandToClipboard: 'Copy the command',
   docs: 'Docs',
   explore: 'Explore',
+  exploreDescription:
+    'The Launchpad Icons provide&nbsp;<strong>{{ num }} icons</strong>. The&nbsp;<marker>highlighted</marker>&nbsp;icons are those added in the latest version.',
+  exploreTitle: 'Icons explorer',
   features: 'Features',
   features1Body: '...and {{ num }}+ icons in the future!',
   features1Heading: '{{ num }} icons',
diff --git a/nodePackages/web/src/i18n/ja.ts b/nodePackages/web/src/i18n/ja.ts
index da09db3d..0eb6cd5c 100644
--- a/nodePackages/web/src/i18n/ja.ts
+++ b/nodePackages/web/src/i18n/ja.ts
@@ -7,6 +7,9 @@ const ja: Resources = {
   commandToClipboard: 'コマンドをコピー',
   docs: 'ドキュメント',
   explore: 'アイコンを探す',
+  exploreDescription:
+    'Launchpad Iconsは<strong>{{ num }}個</strong>のアイコンを提供しています。最新バージョンで新規追加したアイコンは<marker>ハイライト</marker>表示しています。',
+  exploreTitle: 'アイコンを探す',
   features: '特徴',
   features1Body: '今後{{ num }}個以上のアイコンを予定！',
   features1Heading: '{{ num }}個のアイコン',
diff --git a/nodePackages/web/src/i18n/types.ts b/nodePackages/web/src/i18n/types.ts
index e5f8caee..f04edb14 100644
--- a/nodePackages/web/src/i18n/types.ts
+++ b/nodePackages/web/src/i18n/types.ts
@@ -9,6 +9,8 @@ export type ResourcesKeys =
   | 'commandToClipboard'
   | 'docs'
   | 'explore'
+  | 'exploreDescription'
+  | 'exploreTitle'
   | 'features'
   | 'features1Body'
   | 'features1Heading'
diff --git a/nodePackages/web/src/routes/[[language]]/explore.tsx b/nodePackages/web/src/routes/[[language]]/explore.tsx
index 5f4c582d..06512ad9 100644
--- a/nodePackages/web/src/routes/[[language]]/explore.tsx
+++ b/nodePackages/web/src/routes/[[language]]/explore.tsx
@@ -1,14 +1,51 @@
+import * as icons from '@kurone-kito/launchpad-icons-solid';
 import type { Component } from 'solid-js';
+import { For, onMount } from 'solid-js';
+import { themeChange } from 'theme-change';
+import { Head } from '../../components/molecules/Head.js';
+import { IconItem } from '../../components/atoms/IconItem.js';
+import { DefaultTemplate } from '../../components/templates/DefaultTemplate.jsx';
+import Constants from '../../constants.yml';
+import { useTranslator } from '../../modules/createI18N.js';
+
+const { iconNames } = icons;
+const iconsLength = iconNames.length;
+const newList = Constants['newList'] as readonly string[];
 
 /**
  * The explore page.
  * @returns The component.
  */
-const Explore: Component = () => (
-  <article class="article-container">
-    <h2>Explore page</h2>
-    <p>TODO: Add the content here.</p>
-  </article>
-);
+const Explore: Component = () => {
+  onMount(() => themeChange(false));
+  const t = useTranslator();
+  return (
+    <DefaultTemplate>
+      <article class="article-container">
+        <Head next="./pricing" prev="./explore" title={t('exploreTitle')} />
+        <h2 class="heading-root pt-10">{t('exploreTitle')}</h2>
+        <p
+          class="[&_marker]:border-accent py-4 text-lg font-light [&_marker]:rounded-md [&_marker]:border-2 [&_marker]:p-0.5 [&_strong]:font-extrabold"
+          innerHTML={t('exploreDescription', { num: iconsLength })}
+        />
+        <div
+          class="grid grid-cols-3 gap-x-2 gap-y-2 py-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 lg:gap-x-4 xl:grid-cols-7 2xl:grid-cols-9"
+          role="list"
+        >
+          <For each={iconNames}>
+            {(icon) => {
+              const Icon = icons[icon];
+              return (
+                <IconItem name={icon} new={newList.includes(icon)}>
+                  <Icon class="h-full w-full" />
+                </IconItem>
+              );
+            }}
+          </For>
+        </div>
+      </article>
+    </DefaultTemplate>
+  );
+};
 
 export default Explore;