Intial commit from techit@Techits-Mac-Pro

2025-09-21 19:59:04 +07:00
commit bee7386709
27 changed files with 9890 additions and 0 deletions
@@ -0,0 +1,28 @@
+<script setup>
+const { t, locale, setLocale } = useI18n()
+const currentLocale = ref(locale.value)
+
+const toggleLocale = () => {
+  const newLocale = currentLocale.value === 'en' ? 'th' : 'en'
+  setLocale(newLocale).then(() => {
+    window.location.reload()
+  })
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <UTooltip :text="t('ui.language.tooltip')">
+      <UButton 
+      @click="toggleLocale" 
+      variant="outline" 
+      color="neutral"
+      size="sm"
+      :label="t('ui.language.switch')"
+      />
+    </UTooltip>
+    <template #fallback>
+        <USkeleton class="size-8" />
+    </template>
+  </ClientOnly>
+</template>
@@ -0,0 +1,21 @@
+<template>
+    <footer class="footer site-footer">
+        <div class="site-footer">
+            <div class="container">
+                <section class="row">
+                    <section class="footer-notice">
+                        <img width="48" height="48" src="/favicon.ico" alt="*nix" class="text-2xl"></img>
+                        <h2 class="text-2xl font-bold my-[0.5em]">*nix in Thailand (นิกซ์ในประเทศไทย)</h2>
+                        <p class="my-[0.5em]">{{t('footer.copyright.notice', {'year': year, 'yearB': year + 543})}}</p>
+                        <LanguageSwitcher/>
+                    </section>
+                </section>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script setup lang="ts">
+const {t} = useI18n();
+const year = 2025
+</script>
@@ -0,0 +1,78 @@
+<template>
+    <header>
+        <div class="site-title">
+            <div class="container flex justify-between">
+                <div class="row w-fit items-center">
+                    <div class="row flex">
+                        <img width="48" height="48" src="/favicon.ico" alt="*nix" class="text-2xl mr-4"></img>
+                        <img width="124" height="20" src="/wordmark.svg" alt="in Thailand" class="text-2xl my-[13px]"></img>
+                    </div>
+                </div>
+                <div class="hidden sm:flex w-fit items-center justify-end">
+                    <div class="row">
+                        <UFieldGroup>
+                            <UButton size="sm" :label="t('sites.join-discord')" to="https://discord.gg/p5wuX5GwB7" icon="i-lucide-users" />
+                            <UDropdownMenu
+                                size="sm"
+                                :items="siteTitleItems"
+                                :content="{
+                                    align: 'end',
+                                    side: 'bottom',
+                                    sideOffset: 8
+                                }"
+                                :ui="{
+                                    content: 'w-36'
+                                }"
+                            >
+                                <UButton size="sm" :label="t('sites.all')" icon="i-lucide-map" color="neutral" variant="outline" />
+                            </UDropdownMenu>
+                        </UFieldGroup>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <nav class="site-navbar">
+            <div class="container">
+                <div class="hidden sm:flex">
+                    <ul class="nav navbar-nav">
+                        <li class="nav-link">
+                            <NuxtLinkLocale href="/">{{ t('nav.home') }}</NuxtLinkLocale>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLinkLocale href="/about">{{ t('nav.about') }}</NuxtLinkLocale>
+                        </li>
+                        <li class="nav-link">
+                            <NuxtLinkLocale href="/contact">{{ t('nav.contact') }}</NuxtLinkLocale>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+</template>
+
+<script lang="ts" setup>
+const { t } = useI18n();
+const siteTitleItems = ref<DropdownMenuItem[]>([
+  {
+    label: t('sites.wiki'),
+    icon: 'i-lucide-book-open-text',
+    to: 'https://wiki.unix.in.th'
+  },
+  {
+    label: t('sites.identity'),
+    icon: 'i-lucide-user',
+    to: 'https://identity.unix.in.th'
+  },
+  {
+    label: t('sites.forum'),
+    icon: 'i-lucide-messages-square',
+    to: 'https://forum.unix.in.th'
+  },
+  {
+    label: t('sites.status'),
+    icon: 'i-lucide-activity',
+    to: 'https://status.unix.in.th'
+  },
+])
+</script>