🏝️ now with islands

src/islands/paragraph/index.tsx

@@ -0,0 +1,21 @@
+import type { Component } from 'solid-js'
+import { useI18n } from '@solid-primitives/i18n'
+
+interface Variables {
+  [key: string]: string
+}
+
+interface Props {
+  key: string
+  variable?: Variables
+}
+
+const Paragraph: Component<Props> = (props) => {
+  const [t] = useI18n()
+  return (
+
+      <p>{t(props.key, props.variable)}</p>
+  )
+}
+
+export default Paragraph

src/routes/[...404].tsx

@@ -1,10 +1,26 @@
-import C404 from '@layouts/404'
+import Paragraph from '@islands/paragraph'
 import { Provider } from '@locales'
+import { Link } from '@solidjs/router'
 
-export default function () {
+export default function() {
   return (
     <Provider>
-      <C404 />
+      <Title>404</Title>
+      <div class="full flex-center flex-col bg-gray-100/75 text-gray-400">
+        <h1 class="text-4xl font-extrabold">404</h1>
+        <div class="flex space-x-1 mt-1">
+          <Paragraph key='hello' />
+          <div class="pt-1">
+            <div class="i-carbon-face-dissatisfied-filled h-4 w-4" />
+          </div>
+        </div>
+        <Link href="/" class="flex items-center space-x-1 mt-4 transition hover:(text-gray-400/40)">
+          <div class="i-carbon-arrow-left h-7 w-7" />
+          <span class="font-extrabold">
+            <Paragraph key='goback' />
+          </span>
+        </Link>
+      </div>
     </Provider>
   )
 }

src/routes/hi/[...name].tsx

@@ -1,11 +1,19 @@
-import Name from '@layouts/name'
+import Paragraph from '@islands/paragraph'
 import { Provider } from '@locales'
+import { Link, useParams } from '@solidjs/router'
+
+export default function() {
+  const params = useParams()
 
-export default function () {
   return (
     <Provider>
-      <Title>Hi</Title>
-      <Name />
+      <Title>Hello World</Title>
+      <div class="full flex-center flex-col bg-gray-100/75 space-y-2">
+        <Paragraph key='hello' variable={{ name: params.name }} />
+        <Link href="/">
+          <div class="i-carbon-arrow-left h-7 w-7" />
+        </Link>
+      </div>
     </Provider>
   )
 }

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import App from '@layouts/app'
+import App from '@islands/app'
 import { Provider } from '@locales'
 
 export default function () {

tsconfig.json

@@ -15,7 +15,7 @@
     "paths": {
       "@assets/*": ["src/assets/*"],
       "@components/*": ["src/components/*"],
-      "@layouts/*": ["src/layouts/*"],
+      "@islands/*": ["src/islands/*"],
       "@locales": ["src/locales"],
       "@pages/*": ["src/pages/*"]
     }