vbv/client/src/views/StyelGuideView.vue

<script setup lang="ts">

import MainNavigationBar from '@/components/MainNavigationBar.vue';
import IconLsApply from '@/components/icons/IconLsApply.vue';
import IconLsNetwork from '@/components/icons/IconLsNetwork.vue';
import IconLsWatch from '@/components/icons/IconLsWatch.vue';
import IconLsPractice from '@/components/icons/IconLsPractice.vue';
import IconLsTest from '@/components/icons/IconLsTest.vue';
import IconLsStart from '@/components/icons/IconLsStart.vue';
import IconLsEnd from '@/components/icons/IconLsEnd.vue';
import IconSmileyHappy from '@/components/icons/IconSmileyHappy.vue';
import IconSmileyThinking from '@/components/icons/IconSmileyThinking.vue';
import IconSmileyNeutral from '@/components/icons/IconSmileyNeutral.vue';
import IconMessage from '@/components/icons/IconMessage.vue';
import IconArrowUp from '@/components/icons/IconArrowUp.vue';
import IconArrowDown from '@/components/icons/IconArrowDown.vue';
import IconArrowLeft from '@/components/icons/IconArrowLeft.vue';
import IconArrowRight from '@/components/icons/IconArrowRight.vue';
import IconClose from '@/components/icons/IconClose.vue';
import IconCheck from '@/components/icons/IconCheck.vue';
import IconInfo from '@/components/icons/IconInfo.vue';
import IconCheckboxChecked from '@/components/icons/IconCheckboxChecked.vue';
import IconCheckboxUnchecked from '@/components/icons/IconCheckboxUnchecked.vue';

const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
const colorValues = [100, 300, 500, 700, 900,];

function colorBgClass(color: string, value: number) {
  return `bg-${color}-${value}`;
}

</script>

<template>
  <MainNavigationBar/>

  <main class="px-8 py-4">
    <h1>Style Guide</h1>

    <div class="border-b text-gray-700 pb-2 mt-12">
      <h2 class="heading-1">Icons</h2>
    </div>

    <div class="mt-8 mb-8 flex gap-4">
      <div>
        IconMessage
        <IconMessage/>
      </div>

      <div>
        IconArrowUp
        <IconArrowUp/>
      </div>

      <div>
        IconArrowDown
        <IconArrowDown/>
      </div>

      <div>
        IconArrowLeft
        <IconArrowLeft/>
      </div>

      <div>
        IconArrowRight
        <IconArrowRight/>
      </div>

      <div>
        IconClose
        <IconClose/>
      </div>

      <div>
        IconCheck
        <IconCheck/>
      </div>

      <div>
        IconInfo
        <IconInfo/>
      </div>

      <div>
        IconCheckboxChecked
        <IconCheckboxChecked/>
      </div>

      <div>
        IconCheckboxUnchecked
        <IconCheckboxUnchecked/>
      </div>


    </div>

    <div class="mt-8 mb-8 flex gap-4">
      <div>
        IconLsApply
        <IconLsApply/>
      </div>

      <div>
        IconLsWatch
        <IconLsWatch/>
      </div>

      <div>
        IconLsTest
        <IconLsTest/>
      </div>

      <div>
        IconLsPractice
        <IconLsPractice/>
      </div>

      <div>
        IconLsNetwork
        <IconLsNetwork/>
      </div>

      <div>
        IconLsStart
        <IconLsStart/>
      </div>

      <div>
        IconLsEnd
        <IconLsEnd/>
      </div>
    </div>

    <div class="mt-8 mb-8 flex gap-4">
      <div>
        IconSmileyHappy
        <IconSmileyHappy/>
      </div>

      <div>
        IconSmileyThinking
        <IconSmileyThinking/>
      </div>

      <div>
        IconSmileyNeutral
        <IconSmileyNeutral/>
      </div>
    </div>

    <div class="border-b text-gray-700 pb-2 mt-8">
      <h2 class="heading-1">Colors</h2>
    </div>
    <table class="text-gray-700">
      <tr class="h-12 md:h-18 lg:h-24">
      <td></td>
        <td class="text-center" v-for="value in colorValues">{{value}}</td>
      </tr>
      <tr v-for="color in colors" class="h-12 md:h-18 lg:h-24">
        <td>{{color}}</td>
        <td v-for="value in colorValues" class="px-2">
          <div class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
        </td>
      </tr>
    </table>

    <div class="border-b text-gray-700 pb-2 mt-12">
      <h2 class="heading-1">Typography</h2>
    </div>

    <h1 class="mt-8">Heading 1</h1>
    <h2 class="mt-8">Heading 2</h2>
    <h3 class="mt-8">Heading 3</h3>

    <div class="mt-8 text-xl font-bold">Text Large Bold</div>
    <div class="mt-8 text-xl">Text Large</div>
    <div class="mt-8 link text-xl">Link Large</div>
    <div class="mt-8 font-bold">Text Bold</div>
    <div class="mt-8">Text</div>
    <div class="mt-8 link">Link</div>
    <div class="mt-8 text-sm">Text Small</div>
    <div class="mt-8 link text-sm">Link Small</div>

    <div class="border-b text-gray-700 pb-2 mt-12">
      <h2 class="heading-1">Components</h2>
    </div>

    <h2 class="mt-8 mb-8">Buttons</h2>

    <div class="flex w-128 content-center justify-between mb-16">
      <button class="btn-primary">Primary</button>
      <a class="btn-primary inline-block" href="/">Primary Link</a>
      <button class="btn-secondary">Secondary</button>
      <button class="btn-blue">Blue</button>
    </div>
  </main>
</template>

<style scoped>
</style>