Skip to content

Commit d314aea

Browse files
dvcoldvcol
committed
feat(about): adds about page buttons
1 parent 17a11ba commit d314aea

File tree

9 files changed

+466
-7
lines changed

9 files changed

+466
-7
lines changed

‎src/components/common/buttons/ButtonLinkExternal.vue

+19-3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ defineProps({
1717
type: String,
1818
required: false,
1919
},
20+
title: {
21+
type: String,
22+
required: false,
23+
},
2024
icon: {
2125
type: Object as PropType<Component>,
2226
required: false,
@@ -39,8 +43,14 @@ const anchor = ref();
3943
>
4044
<span>{{ label }}</span>
4145
<template #trigger>
42-
<a ref="anchor" class="anchor-link" :href="href">
43-
<NButton tertiary class="external-link" v-bind="$attrs">
46+
<a ref="anchor" class="anchor-link" :href="href" :title="title">
47+
<NButton
48+
tertiary
49+
class="external-link"
50+
:class="{ slotted: $slots.default }"
51+
v-bind="$attrs"
52+
>
53+
<slot />
4454
<template #icon>
4555
<NIcon :component="icon" />
4656
</template>
@@ -58,9 +68,15 @@ const anchor = ref();
5868
color: inherit;
5969
text-decoration: none;
6070
61-
.external-link {
71+
.external-link:not(.slotted) {
6272
width: 2.25rem;
6373
}
74+
75+
.slotted {
76+
i {
77+
margin-left: calc(0% - var(--n-icon-margin));
78+
}
79+
}
6480
}
6581
</style>
6682

‎src/components/icons/IconAccountAlert.vue

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
4+
<path
5+
stroke-dasharray="20"
6+
stroke-dashoffset="20"
7+
d="M5 21V20C5 17.7909 6.79086 16 9 16H13C15.2091 16 17 17.7909 17 20V21"
8+
>
9+
<animate
10+
fill="freeze"
11+
attributeName="stroke-dashoffset"
12+
dur="0.4s"
13+
values="20;0"
14+
/>
15+
</path>
16+
<path
17+
stroke-dasharray="20"
18+
stroke-dashoffset="20"
19+
d="M11 13C9.34315 13 8 11.6569 8 10C8 8.34315 9.34315 7 11 7C12.6569 7 14 8.34315 14 10C14 11.6569 12.6569 13 11 13Z"
20+
>
21+
<animate
22+
fill="freeze"
23+
attributeName="stroke-dashoffset"
24+
begin="0.5s"
25+
dur="0.4s"
26+
values="20;0"
27+
/>
28+
</path>
29+
<path stroke-dasharray="6" stroke-dashoffset="6" d="M20 3V7">
30+
<animate
31+
fill="freeze"
32+
attributeName="stroke-dashoffset"
33+
begin="1s"
34+
dur="0.2s"
35+
values="6;0"
36+
/>
37+
<animate
38+
attributeName="stroke-width"
39+
begin="1.5s"
40+
dur="3s"
41+
keyTimes="0;0.1;0.2;0.3;1"
42+
repeatCount="indefinite"
43+
values="2;3;3;2;2"
44+
/>
45+
</path>
46+
</g>
47+
<circle cx="20" cy="11" r="1" fill="currentColor" fill-opacity="0">
48+
<animate
49+
fill="freeze"
50+
attributeName="fill-opacity"
51+
begin="1.2s"
52+
dur="0.4s"
53+
values="0;1"
54+
/>
55+
<animate
56+
attributeName="r"
57+
begin="1.8s"
58+
dur="3s"
59+
keyTimes="0;0.1;0.2;0.3;1"
60+
repeatCount="indefinite"
61+
values="1;2;2;1;1"
62+
/>
63+
</circle>
64+
</svg>
65+
</template>

‎src/components/icons/IconCoffe.vue

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<path
4+
fill="currentColor"
5+
fill-opacity="0"
6+
d="M17 14V17a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V14z"
7+
>
8+
<animate
9+
fill="freeze"
10+
attributeName="fill-opacity"
11+
begin="0.8s"
12+
dur="0.15s"
13+
values="0;0.3"
14+
/>
15+
</path>
16+
<g
17+
fill="none"
18+
stroke="currentColor"
19+
stroke-linecap="round"
20+
stroke-linejoin="round"
21+
stroke-width="2"
22+
>
23+
<path
24+
stroke-dasharray="48"
25+
stroke-dashoffset="48"
26+
d="M17 9v9a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9z"
27+
>
28+
<animate
29+
fill="freeze"
30+
attributeName="stroke-dashoffset"
31+
dur="0.6s"
32+
values="48;0"
33+
/>
34+
</path>
35+
<path
36+
stroke-dasharray="14"
37+
stroke-dashoffset="14"
38+
d="M17 14H20C20.55 14 21 13.55 21 13V10C21 9.45 20.55 9 20 9H17"
39+
>
40+
<animate
41+
fill="freeze"
42+
attributeName="stroke-dashoffset"
43+
begin="0.6s"
44+
dur="0.2s"
45+
values="14;28"
46+
/>
47+
</path>
48+
</g>
49+
<mask id="lineMdCoffeeHalfEmptyTwotoneLoop0">
50+
<path
51+
fill="none"
52+
stroke="#fff"
53+
stroke-width="2"
54+
d="M8 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M16 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4"
55+
>
56+
<animateMotion
57+
calcMode="linear"
58+
dur="3s"
59+
path="M0 0v-8"
60+
repeatCount="indefinite"
61+
/>
62+
</path>
63+
</mask>
64+
<rect
65+
width="24"
66+
height="0"
67+
y="7"
68+
fill="currentColor"
69+
mask="url(#lineMdCoffeeHalfEmptyTwotoneLoop0)"
70+
>
71+
<animate fill="freeze" attributeName="y" begin="0.8s" dur="0.6s" values="7;2" />
72+
<animate
73+
fill="freeze"
74+
attributeName="height"
75+
begin="0.8s"
76+
dur="0.6s"
77+
values="0;5"
78+
/>
79+
</rect>
80+
</svg>
81+
</template>

‎src/components/icons/IconEye.vue

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<defs>
4+
<clipPath id="lineMdWatchLoop0">
5+
<rect width="24" height="12" />
6+
</clipPath>
7+
<symbol id="lineMdWatchLoop1">
8+
<path
9+
fill="none"
10+
stroke="#fff"
11+
stroke-linecap="round"
12+
stroke-linejoin="round"
13+
stroke-width="2"
14+
d="M23 16.5C23 10.4249 18.0751 5.5 12 5.5C5.92487 5.5 1 10.4249 1 16.5z"
15+
clip-path="url(#lineMdWatchLoop0)"
16+
>
17+
<animate
18+
attributeName="d"
19+
dur="6s"
20+
keyTimes="0;0.07;0.93;1"
21+
repeatCount="indefinite"
22+
values="M23 16.5C23 11.5 18.0751 12 12 12C5.92487 12 1 11.5 1 16.5z;M23 16.5C23 10.4249 18.0751 5.5 12 5.5C5.92487 5.5 1 10.4249 1 16.5z;M23 16.5C23 10.4249 18.0751 5.5 12 5.5C5.92487 5.5 1 10.4249 1 16.5z;M23 16.5C23 11.5 18.0751 12 12 12C5.92487 12 1 11.5 1 16.5z"
23+
/>
24+
</path>
25+
</symbol>
26+
<mask id="lineMdWatchLoop2">
27+
<use href="#lineMdWatchLoop1" />
28+
<use href="#lineMdWatchLoop1" transform="rotate(180 12 12)" />
29+
<circle cx="12" cy="12" r="0" fill="#fff">
30+
<animate
31+
attributeName="r"
32+
dur="6s"
33+
keyTimes="0;0.03;0.97;1"
34+
repeatCount="indefinite"
35+
values="0;3;3;0"
36+
/>
37+
</circle>
38+
</mask>
39+
</defs>
40+
<rect width="24" height="24" fill="currentColor" mask="url(#lineMdWatchLoop2)" />
41+
</svg>
42+
</template>

‎src/components/icons/IconGithub.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<mask id="lineMdGithubLoop0" width="24" height="24" x="0" y="0">
4+
<g fill="#fff">
5+
<ellipse cx="9.5" cy="9" rx="1.5" ry="1" />
6+
<ellipse cx="14.5" cy="9" rx="1.5" ry="1" />
7+
</g>
8+
</mask>
9+
<g
10+
fill="none"
11+
stroke="currentColor"
12+
stroke-linecap="round"
13+
stroke-linejoin="round"
14+
stroke-width="2"
15+
>
16+
<path
17+
stroke-dasharray="30"
18+
stroke-dashoffset="30"
19+
d="M12 4C13.6683 4 14.6122 4.39991 15 4.5C15.5255 4.07463 16.9375 3 18.5 3C18.8438 4 18.7863 5.21921 18.5 6C19.25 7 19.5 8 19.5 9.5C19.5 11.6875 19.017 13.0822 18 14C16.983 14.9178 15.8887 15.3749 14.5 15.5C15.1506 16.038 15 17.3743 15 18C15 18.7256 15 21 15 21M12 4C10.3317 4 9.38784 4.39991 9 4.5C8.47455 4.07463 7.0625 3 5.5 3C5.15625 4 5.21371 5.21921 5.5 6C4.75 7 4.5 8 4.5 9.5C4.5 11.6875 4.98301 13.0822 6 14C7.01699 14.9178 8.1113 15.3749 9.5 15.5C8.84944 16.038 9 17.3743 9 18C9 18.7256 9 21 9 21"
20+
>
21+
<animate
22+
fill="freeze"
23+
attributeName="stroke-dashoffset"
24+
dur="0.6s"
25+
values="30;0"
26+
/>
27+
</path>
28+
<path stroke-dasharray="10" stroke-dashoffset="10" d="M9 19">
29+
<animate
30+
fill="freeze"
31+
attributeName="stroke-dashoffset"
32+
begin="0.7s"
33+
dur="0.2s"
34+
values="10;0"
35+
/>
36+
<animate
37+
attributeName="d"
38+
dur="3s"
39+
repeatCount="indefinite"
40+
values="M9 19c-1.406 0-2.844-.563-3.688-1.188C4.47 17.188 4.22 16.157 3 15.5;M9 19c-1.406 0-3-.5-4-.5-.532 0-1 0-2-.5;M9 19c-1.406 0-2.844-.563-3.688-1.188C4.47 17.188 4.22 16.157 3 15.5"
41+
/>
42+
</path>
43+
</g>
44+
<rect
45+
width="8"
46+
height="4"
47+
x="8"
48+
y="11"
49+
fill="currentColor"
50+
mask="url(#lineMdGithubLoop0)"
51+
>
52+
<animate
53+
attributeName="y"
54+
dur="10s"
55+
keyTimes="0;0.45;0.46;0.54;0.55;1"
56+
repeatCount="indefinite"
57+
values="11;11;7;7;11;11"
58+
/>
59+
</rect>
60+
</svg>
61+
</template>

‎src/components/icons/IconStar.vue

+6
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@
1919
dur="0.5s"
2020
values="0;1"
2121
/>
22+
<animate
23+
attributeName="d"
24+
dur="1.5s"
25+
repeatCount="indefinite"
26+
values="M12 3L9.65 8.76L3.44 9.22L8.2 13.24L6.71 19.28L12 16M12 3L14.35 8.76L20.56 9.22L15.8 13.24L17.29 19.28L12 16;M12 7L10.82 10.38L7.24 10.45L10.1 12.62L9.06 16.05L12 14M12 7L13.18 10.38L16.76 10.45L13.9 12.62L14.94 16.05L12 14;M12 3L9.65 8.76L3.44 9.22L8.2 13.24L6.71 19.28L12 16M12 3L14.35 8.76L20.56 9.22L15.8 13.24L17.29 19.28L12 16"
27+
/>
2228
</path>
2329
</svg>
2430
</template>

0 commit comments

Comments
 (0)