feat(node:web): implemented the explore page

kurone-kito · Nov 27, 2024 · e165a4d · e165a4d
1 parent cb7ca14
commit e165a4d
Show file tree

Hide file tree

Showing 5 changed files with 73 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:
+  - Bulb
+  - CameraFlash
+  - Circleless
+  - Copy
+  - Edit
+  - Eye
+  - EyeMove
+  - InfoLight
+  - Join
+  - Play
+  - Speaker
+  - User
+  - Users2
+  - Users3
+  - Voice
+  - Wave
 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
@@ -9,6 +9,9 @@ const en: Resources = {
     'The Launchpad Icons are a collection of VRChat-like icons. All icons are provided in SVG vector format.',
   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
@@ -9,6 +9,9 @@ const ja: Resources = {
     'Launchpad IconsはVRChatライクなアイコン集です。全アイコンをSVGベクター形式で提供しています。',
   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
@@ -10,6 +10,8 @@ export type ResourcesKeys =
   | 'description'
   | '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,56 @@
+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 { IconItem } from '../../components/atoms/IconItem.js';
+import { Head } from '../../components/organisms/Head.js';
+import { DefaultTemplate } from '../../components/templates/DefaultTemplate.js';
+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"
+          pagePath="explore"
+          prev="./docs"
+          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;