From 62b490be89562275489321acb96f6e989906b3e6 Mon Sep 17 00:00:00 2001 From: Sitt Guruvanich Date: Sun, 11 Aug 2024 03:39:37 +0700 Subject: [PATCH] feat: display HeroCards in front of floating blobs --- auto-imports.d.ts | 144 +- src/App.vue | 7 +- src/assets/{blob.svg => blobs.svg} | 0 src/assets/tayan.svg | 9823 +++++++++++++++++++ src/components/HeroCards.vue | 132 + src/components/Navbar.vue | 2 +- src/components/index.js | 1 + src/components/ui/avatar/Avatar.vue | 24 + src/components/ui/avatar/AvatarFallback.vue | 11 + src/components/ui/avatar/AvatarImage.vue | 9 + src/components/ui/avatar/index.ts | 24 + src/components/ui/badge/Badge.vue | 16 + src/components/ui/badge/index.ts | 25 + src/components/ui/card/Card.vue | 14 + src/components/ui/card/CardContent.vue | 14 + src/components/ui/card/CardDescription.vue | 14 + src/components/ui/card/CardFooter.vue | 14 + src/components/ui/card/CardHeader.vue | 14 + src/components/ui/card/CardTitle.vue | 14 + src/components/ui/card/index.ts | 6 + 20 files changed, 10237 insertions(+), 71 deletions(-) rename src/assets/{blob.svg => blobs.svg} (100%) create mode 100644 src/assets/tayan.svg create mode 100644 src/components/HeroCards.vue create mode 100644 src/components/ui/avatar/Avatar.vue create mode 100644 src/components/ui/avatar/AvatarFallback.vue create mode 100644 src/components/ui/avatar/AvatarImage.vue create mode 100644 src/components/ui/avatar/index.ts create mode 100644 src/components/ui/badge/Badge.vue create mode 100644 src/components/ui/badge/index.ts create mode 100644 src/components/ui/card/Card.vue create mode 100644 src/components/ui/card/CardContent.vue create mode 100644 src/components/ui/card/CardDescription.vue create mode 100644 src/components/ui/card/CardFooter.vue create mode 100644 src/components/ui/card/CardHeader.vue create mode 100644 src/components/ui/card/CardTitle.vue create mode 100644 src/components/ui/card/index.ts diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 1f999e9..e1c4201 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -5,80 +5,92 @@ // Generated by unplugin-auto-import export {} declare global { - const EffectScope: typeof import('vue')['EffectScope'] - const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate'] - const computed: typeof import('vue')['computed'] - const createApp: typeof import('vue')['createApp'] - const createPinia: typeof import('pinia')['createPinia'] - const customRef: typeof import('vue')['customRef'] - const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] - const defineComponent: typeof import('vue')['defineComponent'] - const defineStore: typeof import('pinia')['defineStore'] - const effectScope: typeof import('vue')['effectScope'] - const getActivePinia: typeof import('pinia')['getActivePinia'] - const getCurrentInstance: typeof import('vue')['getCurrentInstance'] - const getCurrentScope: typeof import('vue')['getCurrentScope'] - const h: typeof import('vue')['h'] - const inject: typeof import('vue')['inject'] - const isProxy: typeof import('vue')['isProxy'] - const isReactive: typeof import('vue')['isReactive'] - const isReadonly: typeof import('vue')['isReadonly'] - const isRef: typeof import('vue')['isRef'] - const mapActions: typeof import('pinia')['mapActions'] - const mapGetters: typeof import('pinia')['mapGetters'] - const mapState: typeof import('pinia')['mapState'] - const mapStores: typeof import('pinia')['mapStores'] - const mapWritableState: typeof import('pinia')['mapWritableState'] - const markRaw: typeof import('vue')['markRaw'] - const nextTick: typeof import('vue')['nextTick'] - const onActivated: typeof import('vue')['onActivated'] - const onBeforeMount: typeof import('vue')['onBeforeMount'] + const EffectScope: (typeof import('vue'))['EffectScope'] + const acceptHMRUpdate: (typeof import('pinia'))['acceptHMRUpdate'] + const computed: (typeof import('vue'))['computed'] + const createApp: (typeof import('vue'))['createApp'] + const createPinia: (typeof import('pinia'))['createPinia'] + const customRef: (typeof import('vue'))['customRef'] + const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent'] + const defineComponent: (typeof import('vue'))['defineComponent'] + const defineStore: (typeof import('pinia'))['defineStore'] + const effectScope: (typeof import('vue'))['effectScope'] + const getActivePinia: (typeof import('pinia'))['getActivePinia'] + const getCurrentInstance: (typeof import('vue'))['getCurrentInstance'] + const getCurrentScope: (typeof import('vue'))['getCurrentScope'] + const h: (typeof import('vue'))['h'] + const inject: (typeof import('vue'))['inject'] + const isProxy: (typeof import('vue'))['isProxy'] + const isReactive: (typeof import('vue'))['isReactive'] + const isReadonly: (typeof import('vue'))['isReadonly'] + const isRef: (typeof import('vue'))['isRef'] + const mapActions: (typeof import('pinia'))['mapActions'] + const mapGetters: (typeof import('pinia'))['mapGetters'] + const mapState: (typeof import('pinia'))['mapState'] + const mapStores: (typeof import('pinia'))['mapStores'] + const mapWritableState: (typeof import('pinia'))['mapWritableState'] + const markRaw: (typeof import('vue'))['markRaw'] + const nextTick: (typeof import('vue'))['nextTick'] + const onActivated: (typeof import('vue'))['onActivated'] + const onBeforeMount: (typeof import('vue'))['onBeforeMount'] const onBeforeRouteLeave: (typeof import('vue-router'))['onBeforeRouteLeave'] const onBeforeRouteUpdate: (typeof import('vue-router'))['onBeforeRouteUpdate'] - const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] - const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] - const onDeactivated: typeof import('vue')['onDeactivated'] - const onErrorCaptured: typeof import('vue')['onErrorCaptured'] - const onMounted: typeof import('vue')['onMounted'] - const onRenderTracked: typeof import('vue')['onRenderTracked'] - const onRenderTriggered: typeof import('vue')['onRenderTriggered'] - const onScopeDispose: typeof import('vue')['onScopeDispose'] - const onServerPrefetch: typeof import('vue')['onServerPrefetch'] - const onUnmounted: typeof import('vue')['onUnmounted'] - const onUpdated: typeof import('vue')['onUpdated'] - const provide: typeof import('vue')['provide'] - const reactive: typeof import('vue')['reactive'] - const readonly: typeof import('vue')['readonly'] - const ref: typeof import('vue')['ref'] - const resolveComponent: typeof import('vue')['resolveComponent'] - const setActivePinia: typeof import('pinia')['setActivePinia'] - const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix'] - const shallowReactive: typeof import('vue')['shallowReactive'] - const shallowReadonly: typeof import('vue')['shallowReadonly'] - const shallowRef: typeof import('vue')['shallowRef'] - const storeToRefs: typeof import('pinia')['storeToRefs'] - const toRaw: typeof import('vue')['toRaw'] - const toRef: typeof import('vue')['toRef'] - const toRefs: typeof import('vue')['toRefs'] - const toValue: typeof import('vue')['toValue'] - const triggerRef: typeof import('vue')['triggerRef'] - const unref: typeof import('vue')['unref'] - const useAttrs: typeof import('vue')['useAttrs'] - const useColorMode: typeof import('@vueuse/core')['useColorMode'] - const useCssModule: typeof import('vue')['useCssModule'] - const useCssVars: typeof import('vue')['useCssVars'] + const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount'] + const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate'] + const onDeactivated: (typeof import('vue'))['onDeactivated'] + const onErrorCaptured: (typeof import('vue'))['onErrorCaptured'] + const onMounted: (typeof import('vue'))['onMounted'] + const onRenderTracked: (typeof import('vue'))['onRenderTracked'] + const onRenderTriggered: (typeof import('vue'))['onRenderTriggered'] + const onScopeDispose: (typeof import('vue'))['onScopeDispose'] + const onServerPrefetch: (typeof import('vue'))['onServerPrefetch'] + const onUnmounted: (typeof import('vue'))['onUnmounted'] + const onUpdated: (typeof import('vue'))['onUpdated'] + const provide: (typeof import('vue'))['provide'] + const reactive: (typeof import('vue'))['reactive'] + const readonly: (typeof import('vue'))['readonly'] + const ref: (typeof import('vue'))['ref'] + const resolveComponent: (typeof import('vue'))['resolveComponent'] + const setActivePinia: (typeof import('pinia'))['setActivePinia'] + const setMapStoreSuffix: (typeof import('pinia'))['setMapStoreSuffix'] + const shallowReactive: (typeof import('vue'))['shallowReactive'] + const shallowReadonly: (typeof import('vue'))['shallowReadonly'] + const shallowRef: (typeof import('vue'))['shallowRef'] + const storeToRefs: (typeof import('pinia'))['storeToRefs'] + const toRaw: (typeof import('vue'))['toRaw'] + const toRef: (typeof import('vue'))['toRef'] + const toRefs: (typeof import('vue'))['toRefs'] + const toValue: (typeof import('vue'))['toValue'] + const triggerRef: (typeof import('vue'))['triggerRef'] + const unref: (typeof import('vue'))['unref'] + const useAttrs: (typeof import('vue'))['useAttrs'] + const useColorMode: (typeof import('@vueuse/core'))['useColorMode'] + const useCssModule: (typeof import('vue'))['useCssModule'] + const useCssVars: (typeof import('vue'))['useCssVars'] const useLink: (typeof import('vue-router'))['useLink'] const useRoute: (typeof import('vue-router'))['useRoute'] const useRouter: (typeof import('vue-router'))['useRouter'] - const useSlots: typeof import('vue')['useSlots'] - const watch: typeof import('vue')['watch'] - const watchEffect: typeof import('vue')['watchEffect'] - const watchPostEffect: typeof import('vue')['watchPostEffect'] - const watchSyncEffect: typeof import('vue')['watchSyncEffect'] + const useSlots: (typeof import('vue'))['useSlots'] + const watch: (typeof import('vue'))['watch'] + const watchEffect: (typeof import('vue'))['watchEffect'] + const watchPostEffect: (typeof import('vue'))['watchPostEffect'] + const watchSyncEffect: (typeof import('vue'))['watchSyncEffect'] } // for type re-export declare global { // @ts-ignore - export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' + export type { + Component, + ComponentPublicInstance, + ComputedRef, + ExtractDefaultPropTypes, + ExtractPropTypes, + ExtractPublicPropTypes, + InjectionKey, + PropType, + Ref, + VNode, + WritableComputedRef, + } from 'vue' import('vue') } diff --git a/src/App.vue b/src/App.vue index 76dae61..4d6fcd1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,15 +1,14 @@ diff --git a/src/assets/blob.svg b/src/assets/blobs.svg similarity index 100% rename from src/assets/blob.svg rename to src/assets/blobs.svg diff --git a/src/assets/tayan.svg b/src/assets/tayan.svg new file mode 100644 index 0000000..b946e22 --- /dev/null +++ b/src/assets/tayan.svg @@ -0,0 +1,9823 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/HeroCards.vue b/src/components/HeroCards.vue new file mode 100644 index 0000000..a2c8126 --- /dev/null +++ b/src/components/HeroCards.vue @@ -0,0 +1,132 @@ + + diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 739e3f1..b79edbe 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -36,7 +36,7 @@ const routes: RouteProps[] = [ ] /* functions */ -let openGitHub = () => (window.open('https://github.com/krutt', '_blank', 'noreferrer, noopener')) +let openGitHub = () => window.open('https://github.com/krutt', '_blank', 'noreferrer, noopener')