feat(node:web): implemented the explore page

kurone-kito · Aug 3, 2024 · 9448b7e · 9448b7e
1 parent 649cb01
commit 9448b7e
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,57 @@
+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/atoms/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 getKeys = <T extends { [key: string]: unknown }>(obj: T): (keyof T)[] =>
+  Object.keys(obj);
+
+const iconNames = getKeys(icons.iconsMapping);
+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={icons.iconsMapping[icon]}
+                  new={newList.includes(icon)}
+                >
+                  <Icon class="h-full w-full" />
+                </IconItem>
+              );
+            }}
+          </For>
+        </div>
+      </article>
+    </DefaultTemplate>
+  );
+};
 
 export default Explore;