WIP website
banana.tngl.sh
1---
2interface Badge {
3 icon: string,
4 href: string
5 color: string
6}
7
8interface Props {
9 type: string
10 icon?: string,
11 title: string,
12 subtitle: string,
13 tag?: string,
14 tagcolor?: string,
15 href: string
16 badges?: Badge[]
17}
18
19const { type, icon = "Box", title, subtitle, tag, tagcolor, href, badges } = Astro.props
20
21var color = "--catppuccin-color-yellow"
22if (type=="project") {
23 color = "--catppuccin-color-red"
24} else if (type=="repo") {
25 color = "--catppuccin-color-peach"
26} else if (type=="team") {
27 color = "--catppuccin-color-mauve"
28} else if (type=="misc") {
29 color = "--catppuccin-color-maroon"
30} else if (type=="freelance") {
31 color = "--catppuccin-color-sky"
32}
33const colorCss = "var(" + color + ")"
34
35var iconName = icon
36if (iconName == "Box") {
37 if (type=="project") {
38 iconName = "Archive"
39 } else if (type=="repo") {
40 iconName = "BookMarked"
41 } else if (type=="team") {
42 iconName = "Users"
43 } else if (type=="misc") {
44 iconName = "Box"
45 } else if (type=="freelance") {
46 iconName = "ReceiptText"
47 }
48}
49
50import LucideIcon from "./LucideIcon.astro"
51import Badgebar from "./Badgebar.astro"
52import Tag from "./Tag.astro"
53---
54<div class="p-4 border border-ctp-surface0 flex flex-col -mt-px w-full">
55 <div class="flex flex-wrap sm:flex-nowrap justify-between gap-2 sm:gap-4">
56 <a href=`${href}` class="flex flex-col gap-1 group">
57 <span class="text-xl flex gap-2 items-center">
58 <LucideIcon name=`${iconName}` width="20" height="20" style={`stroke:${colorCss}`} />
59 <span class="group-hover:underline font-bold">{title} </span>
60 <span class="hidden md:flex items-center">
61 {tag && tagcolor && (
62 <Tag text={tag} color={tagcolor}/>
63 )}
64 </span>
65 </span>
66 <span class="text-sm">
67 <span class="flex gap-1">{subtitle}</span>
68 </span>
69 </a>
70 <span>
71 { badges && (
72 <Badgebar badges={badges} size="20"/>
73 )}
74 </span>
75 </div>
76 <div>
77 <slot/>
78 </div>
79</div>