thehrz/thehrz.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Button

Browse Source
This commit is contained in:
thehrz 2023-10-03 13:09:08 +08:00
parent 947aac4ed7
commit fb37fd45a9
Signed by: thehrz
GPG Key ID: C84CBCE7D5F88855
6 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -2,7 +2,6 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>thehrz</title>
</head>

3
src/components.d.ts vendored
View File

@ -7,8 +7,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
Bar: typeof import('./components/Bar.vue')['default']
Btn: typeof import('./components/Btn.vue')['default']
Button: typeof import('./components/button.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}

5
src/components/Bar.vue
View File

@ -1,5 +0,0 @@
<template>
<nav class="px-9xl flex items-center">
<p class="font-sans font-semibold text-6">thehrz.net</p>
</nav>
</template>

13
src/components/Btn.vue
View File

@ -1,13 +0,0 @@
<template>
<button type="button" class="">
<slot></slot>
</button>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

24
src/components/button.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<a
class="bg-white border-solid border-2 border-#dcdfe6 c-black decoration-none flex items-center rounded text-4 h-11 px-3 shadow"
target="_blank"
:href="to"
>
<div v-if="icon" :class="icon" class="h-24px w-24px" />
<div class="ml-2" />
<slot />
</a>
</template>
<script setup lang="ts">
defineOptions({
name: "AButton",
})
const props = defineProps<{
to: string
icon?: string
}>()
</script>
<style scoped></style>

14
src/pages/index.vue
View File

@ -1,9 +1,21 @@
<script setup lang="ts">
const links = [
{
icon: "i-mdi-github",
link: "https://github.com/thehrz"
}
]
</script>
<template>
<section class="flex flex-col items-center">
<img class="w-8em shadow-lg" alt="thehrz" src="/thehrz.jpg" >
<h1 class="my-8 text-2.5em leading-[1.1] md:text-3.5em c-coolgray-700 font-300">Hi! I'm thehrz.</h1>
<p class="c-dark-100">🚧 under construction...</p>
<Button v-for="link in links" :to="link.link" :icon="link.icon">Github</Button>
<p class="mt-8 c-dark-100">🚧 under construction...</p>
</section>
</template>