feat: use wit-vue-ui

witnet · Sep 19, 2024 · 60d8437 · 60d8437
1 parent 91f0d8f
commit 60d8437
Show file tree

Hide file tree

Showing 26 changed files with 1,297 additions and 2,247 deletions.
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -1,3 +1,5 @@
+@import url('wit-vue-ui/style.css');
+
 html {
   height: 100%;
   margin: 0;

diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
@@ -96,33 +96,6 @@
     content: attr(data-text);
   }
 
-  /* Button */
-  .btn {
-    @apply w-full py-sm px-md-alt cursor-pointer border-2 border-black-950;
-  }
-  .btn-primary {
-    @apply font-semibold rounded-full bg-wit-blue-500 hover:bg-wit-blue-400 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-black-950 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-75;
-  }
-  .btn-dark {
-    @apply font-semibold rounded-full bg-white-50 hover:bg-white-100 text-black-950 focus:outline-none focus:ring focus:ring-wit-blue-500 focus:ring-opacity-80 shadow-[3px_7px_0px] shadow-wit-blue-500 hover:shadow-none hover:translate-x-xs hover:translate-y-xs ease-[cubic-bezier(0.25,0.4,0.55,1.4)] duration-75;
-  }
-  .btn-secondary {
-    @apply font-semibold rounded-full bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2 shadow-[3px_7px_0px] shadow-black-950;
-  }
-  .btn-terciary {
-    @apply font-semibold rounded-full border-white-50 bg-black-950 hover:bg-black-900 text-white-50 focus:outline-none focus:ring focus:ring-black-500 focus:ring-opacity-80 border-2;
-    white-space: nowrap;
-  }
-  .btn-disabled {
-    @apply cursor-not-allowed font-semibold rounded-full shadow-md bg-wit-blue-500 text-black-950 bg-opacity-80;
-  }
-  /* Navbar */
-  .navbar-links {
-    @apply text-white-50 sm:bg-black-950;
-  }
-  .nav-link {
-    @apply text-black-950 sm:text-white-50;
-  }
   .section-description-max-w {
     @apply max-w-md-x-screen sm:max-w-max md:max-w-lg-x-screen;
   }

diff --git a/components/ArrowButton.vue b/components/ArrowButton.vue
diff --git a/components/CustomButton.vue b/components/CustomButton.vue
diff --git a/components/FooterSection.vue b/components/FooterSection.vue
@@ -1,114 +1,46 @@
 <template>
-  <NuxtLayout
-    name="section"
-    :frame-classes="'bg-black-950'"
-    :content-classes="'grid justify-items-center'"
-    :section-animation="false"
+  <WFooter
+    :footer-sections="footerLinks"
+    :ado-description="t('footer.ado_text')"
   >
-    <template #content>
-      <div class="footer grid gap-xl">
-        <div class="grid grid-cols-[max-content_1fr] md:grid-cols-1 gap-3xl">
-          <div
-            class="grid grid-cols-[max-content_max-content_max-content] gap-3xl sm:gap-xl sm:grid-cols-2 justify-items-start"
-          >
-            <div
-              v-for="section in footerLinks"
-              :key="section.title"
-              class="py-2 flex flex-col gap-sm"
-            >
-              <p class="title font-bold footer-text mb-sm">
-                {{ $t(`footer.links.${section.title}.title`) }}
-              </p>
-              <ul class="py-2 flex flex-col gap-sm">
-                <li
-                  v-for="link in section.links"
-                  :key="link.text"
-                  class="link-list-item"
-                >
-                  <a
-                    class="link footer-text"
-                    :href="link.url"
-                    :data-text="$t(link.text)"
-                    target="_blank"
-                  >
-                    {{ $t(link.text) }}
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="w-full grid gap-md xs:mt-lg">
-            <AdoIcon class="mb-2 w-[50px] h-auto" />
-            <i18n-t
-              keypath="footer.ado_text"
-              tag="p"
-              class="footer-text"
-              scope="global"
-            >
-              <a
-                class="py-1 underline footer-text"
-                :href="URLS.ado"
-                target="_blank"
-              >
-                theado.org
-              </a>
-            </i18n-t>
-          </div>
-        </div>
-        <div
-          class="grid grid-cols-[max-content_max-content_1fr] sm:grid-cols-1 align-middle gap-lg pt-xl items-center"
+    <template #custom-contributors>
+      <i18n-t
+        keypath="footer.copyright.base1"
+        class="copyright max-w-100 footer-text"
+        tag="span"
+        scope="global"
+      >
+        <a
+          class="underline py-1 footer-text"
+          :href="URLS.witnet_foundation"
+          target="_blank"
+          >{{ $t('footer.copyright.witnet_foundation') }}</a
         >
-          <WitOracleIcon class="w-[140px] h-auto white" name="witnet_dark" />
-          <div class="h-max self-center">
-            <i18n-t
-              keypath="footer.copyright.base1"
-              class="copyright max-w-100 footer-text"
-              tag="p"
-              scope="global"
-            >
-              <span>2018-{{ new Date().getFullYear() }}</span>
-              <a
-                class="underline py-1 footer-text"
-                :href="URLS.witnet_foundation"
-                target="_blank"
-                >{{ $t('footer.copyright.witnet_foundation') }}</a
-              >
-              <a
-                class="underline py-1 footer-text"
-                href="https://creativecommons.org/publicdomain/zero/1.0/"
-                target="_blank"
-                >{{ $t('footer.copyright.license') }}</a
-              >
-            </i18n-t>
-            <i18n-t
-              keypath="footer.copyright.base2"
-              class="copyright max-w-100 footer-text"
-              tag="p"
-              scope="global"
-            >
-              <a
-                class="underline py-1 footer-text"
-                href="https://creativecommons.org/publicdomain/zero/1.0/"
-                target="_blank"
-                >{{ $t('footer.copyright.license') }}</a
-              >
-            </i18n-t>
-          </div>
-          <!-- <client-only>
-            <LanguageSwitcher class="justify-self-end self-center" />
-          </client-only> -->
-        </div>
-      </div>
+      </i18n-t>
     </template>
-  </NuxtLayout>
+    <template #custom-license>
+      <i18n-t
+        keypath="footer.copyright.base2"
+        class="copyright max-w-100 footer-text"
+        tag="p"
+        scope="global"
+      >
+        <a
+          class="underline py-1 footer-text"
+          href="https://creativecommons.org/publicdomain/zero/1.0/"
+          target="_blank"
+          >{{ $t('footer.copyright.license') }}</a
+        >
+      </i18n-t>
+    </template>
+  </WFooter>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { WFooter, type FooterLink, type FooterSection } from 'wit-vue-ui'
 import snakeCase from 'lodash.snakecase'
 import { URLS } from '../constants'
-import AdoIcon from '@/assets/svg/ado.svg?component'
-import WitOracleIcon from '@/assets/svg/witnet-logo-dark.svg?component'
-
+const { t } = useI18n()
 const footerSections = {
   developers: ['reference', 'randomness', 'supported_chains', 'solidity_sdk'],
   ecosystem: [
@@ -121,17 +53,20 @@ const footerSections = {
   // community: ['telegram', 'discord', 'x', 'reddit', 'youtube'],
 }
 
-function getFooterLinks(sections) {
+function getFooterLinks(sections: Record<string, string[]>): FooterSection[] {
   return Object.entries(sections).map(([sectionName, sectionItems]) => ({
-    title: sectionName,
-    links: sectionItems.map((sectionItem) => ({
+    title: sectionName.charAt(0).toLocaleUpperCase() + sectionName.slice(1),
+    links: sectionItems.map((sectionItem: string) => ({
       url: URLS[sectionItem],
-      text: getI18nStringFromSectionItem(sectionName, sectionItem),
-    })),
-  }))
+      label: t(getI18nStringFromSectionItem(sectionName, sectionItem)),
+    })) as FooterLink[],
+  })) as FooterSection[]
 }
 
-function getI18nStringFromSectionItem(sectionName, sectionItem) {
+function getI18nStringFromSectionItem(
+  sectionName: string,
+  sectionItem: string,
+) {
   return `footer.links.${sectionName}.${snakeCase(sectionItem)}`
 }
 

diff --git a/components/IconWithText.vue b/components/IconWithText.vue
diff --git a/components/RoundedIcon.vue b/components/RoundedIcon.vue
diff --git a/components/SocialLinks.vue b/components/SocialLinks.vue
@@ -1,33 +1,10 @@
 <template>
-  <div ref="socials" class="h-[90vh] max-h-[900px]">
-    <div
-      class="opacity-60 hover:opacity-100 transition-all grid gap-y-4 grid-flow-row content-center gap-y-md justify-items-end"
-    >
-      <IconExternalLink :url="URLS.x" :icon="Twitter" />
-      <IconExternalLink :url="URLS.telegram" :icon="Telegram" />
-      <IconExternalLink :url="URLS.discord" :icon="Discord" />
-      <IconExternalLink :url="URLS.github" :icon="Github" />
-      <div class="flex mt-3xl">
-        <p
-          class="text-sm font-light text-white-400 [writing-mode:vertical-lr] -rotate-180 subtitle"
-        >
-          {{ $t('socials-title-1') }}
-        </p>
-        <p
-          class="text-sm font-light text-white-400 [writing-mode:vertical-lr] -rotate-180 subtitle"
-        >
-          {{ $t('socials-title-2') }}
-        </p>
-      </div>
-    </div>
+  <div ref="socials">
+    <WSocialsBar />
   </div>
 </template>
 <script setup lang="ts">
-import Twitter from '@/assets/svg/socials/twitter.svg?component'
-import Telegram from '@/assets/svg/socials/telegram.svg?component'
-import Discord from '@/assets/svg/socials/discord.svg?component'
-import Github from '@/assets/svg/socials/github.svg?component'
-import { URLS } from '@/constants'
+import { WSocialsBar } from 'wit-vue-ui'
 
 const socials = ref(null)
 const { gsap } = useGsap()