1import Link from "next/link";
2import Image from "next/image";
3import { VisuallyHidden } from "@/components";
4import { slug } from "@/utils";
5import { getByUsername } from "@/services/user";
6
7import styles from "./user.module.css";
8
9type UserProps = {
10 user: string;
11}
12
13const User = async ({ user }: UserProps) => {
14 const { picture, name, role, blurb } = await getByUsername(user)
15
16 return (
17 <article className={styles.user}>
18 <header>
19 <Image src={picture} alt={name} width={280} height={160} className={styles.picture} />
20 <h2>{name}</h2>
21 <p>{role}</p>
22 </header>
23 <p>{blurb}</p>
24 <Link href={`/user/${slug(name)}`}>
25 Visit <VisuallyHidden>{name}</VisuallyHidden>
26 </Link>
27 </article>
28 )
29}
30
31export { User }