phobos/src/components/Sidebar.astro
2024-07-25 21:56:21 +02:00

56 lines
1.2 KiB
Text

---
import { Image } from "astro:assets";
import Social from "./Social.astro";
import pb from "../lib/pb";
const avatarRec = await pb
.collection("images")
.getFirstListItem("useAsAvatar=true").catch(() => null);
const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
const socials = await pb.collection("socials").getFullList();
const config = {
icon,
socials,
title: import.meta.env.PUBLIC_TITLE,
description: import.meta.env.PUBLIC_DESCRIPTION,
};
---
<aside>
<div class="p-4">
<a href="/">
{
config.icon && (
<Image
class={"icon"}
src={config.icon}
alt={"Icon"}
width={50}
height={50}
/>
)
}
<h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
>
<p class="pt-4">{config.description}</p>
{
config.socials &&
config.socials.map((s) => (
<Social href={s.url} text={s.name} image={s.icon} alt={s.name} />
))
}
</div>
</aside>
<style>
img.icon {
width: 10rem;
margin: 0 auto;
object-fit: cover;
object-position: center;
border-radius: 100%;
}
</style>