mirror of
https://github.com/morten-olsen/morten-olsen.github.io.git
synced 2026-02-08 01:46:28 +01:00
43 lines
807 B
Plaintext
43 lines
807 B
Plaintext
---
|
|
import { Icon } from 'astro-icon/components'
|
|
|
|
import type { Profile } from '@/data/data'
|
|
|
|
type Props = {
|
|
profile: Profile['basics']['profiles'][number]
|
|
}
|
|
const { profile } = Astro.props
|
|
---
|
|
|
|
<a href={profile.url} target='_blank'>
|
|
<Icon class='icon' name={profile.icon} />
|
|
<div class='network'>{profile.network}</div>
|
|
<div class='username'>{profile.username}</div>
|
|
</a>
|
|
|
|
<style lang='less'>
|
|
a {
|
|
display: grid;
|
|
align-items: center;
|
|
column-gap: var(--space-sm);
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
grid-template-areas: 'icon network' 'icon username';
|
|
}
|
|
|
|
.icon {
|
|
grid-area: icon;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.network {
|
|
grid-area: network;
|
|
}
|
|
|
|
.username {
|
|
grid-area: username;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|