···

       
1
       
1
       
+
       
---

     

       
2
       
2
       
+
       
interface Props {

     

       
3
       
3
       
+
       
    text: string

     

       
4
       
4
       
+
       
    color: string

     

       
5
       
5
       
+
       
}

     

       
6
       
6
       
+
       


     

       
7
       
7
       
+
       
const { text, color } = Astro.props

     

       
8
       
8
       
+
       
const bgColorCss = "var(" + color + "-950)"

     

       
9
       
9
       
+
       
const borderColorCss = "var(" + color + "-800)"

     

       
10
       
10
       
+
       
---

     

       
11
       
11
       
+
       
<span class="p-0.5 pl-2 pr-2 border text-xs rounded-full scale-95 font-extrabold" 

     

       
12
       
12
       
+
       
    style={`background:${bgColorCss};border-color:${borderColorCss};`}>

     

       
13
       
13
       
+
       
    {text}

     

       
14
       
14
       
+
       
</span>

     

···

       
8
       
8
       
 
       
<Layout>

     

       
9
       
9
       
 
       
    <section class="h-[50%] grid-cols-5 grid p-24 pt-48 gap-16">

     

       
10
       
10
       
 
       
        <Profile/>

     

       
11
       
11
       
-
       
        <div class="col-span-3 gap-16 flex flex-col">

     

       
11
       
11
       
+
       
        <div class="col-span-3 gap-12 flex flex-col">

     

       
12
       
12
       
 
       
            <Contributions/>

     

       
13
       
13
       
 
       
            <Pinned/>

     

       
14
       
14
       
 
       
        </div>