1
1
<script setup lang="ts">
2
2
import { contributors } from ' ../contributors'
3
+ import { AvatarFallback , AvatarImage , AvatarRoot , TooltipContent , TooltipProvider , TooltipRoot , TooltipTrigger } from ' @oku-ui/primitives'
4
+
5
+ function getInitials(name : string ) {
6
+ return name .match (/ \b [A-Z ] / gi )?.join (' ' ) ?? name [0 ]
7
+ }
3
8
</script >
4
9
5
10
<template >
6
- <div class =" flex flex-wrap gap-2 justify-center" >
7
- <a
8
- v-for =" { name, avatar } of contributors"
9
- :key =" name"
10
- :href =" `https://github.com/${name}`"
11
- class =" m-0"
12
- rel =" noopener noreferrer"
13
- :aria-label =" `${name} on GitHub`"
14
- >
15
- <img
16
- loading =" lazy"
17
- :src =" avatar"
18
- width =" 50"
19
- height =" 50"
20
- class =" rounded-full h-12 w-12"
21
- :alt =" `${name}'s avatar`"
11
+ <div class =" flex flex-wrap gap-4 justify-center my-8 not-prose" >
12
+ <TooltipProvider >
13
+ <TooltipRoot
14
+ v-for =" { name, avatar } of contributors"
15
+ :key =" name"
16
+ :delay-duration =" 0"
17
+ :disable-hoverable-content =" true"
22
18
>
23
- </a >
19
+ <TooltipTrigger as =" template" >
20
+ <AvatarRoot as =" template" >
21
+ <a
22
+ :href =" `https://github.com/${name}`"
23
+ class =" group relative inline-flex items-center justify-center"
24
+ rel =" noopener noreferrer"
25
+ :aria-label =" `${name} on GitHub`"
26
+ target =" _blank"
27
+ >
28
+ <div
29
+ class =" h-14 w-14 rounded-full overflow-hidden bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center shadow-lg transform transition-all group-hover:scale-110"
30
+ >
31
+ <AvatarImage
32
+ :src =" avatar"
33
+ :alt =" `${name}'s avatar`"
34
+ class =" h-full w-full object-cover"
35
+ />
36
+ <AvatarFallback
37
+ class =" text-center uppercase text-sm font-semibold text-white"
38
+ :delay-ms =" 1000"
39
+ >
40
+ {{ getInitials(name) }}
41
+ </AvatarFallback >
42
+ </div >
43
+ </a >
44
+ </AvatarRoot >
45
+ </TooltipTrigger >
46
+
47
+ <TooltipContent
48
+ class =" text-xs font-semibold text-white px-3 py-1 rounded bg-gray-800 border border-gray-600 shadow-md transform transition-opacity duration-200"
49
+ side =" bottom"
50
+ >
51
+ {{ name }}
52
+ </TooltipContent >
53
+ </TooltipRoot >
54
+ </TooltipProvider >
24
55
</div >
25
- </template >
56
+ </template >
0 commit comments