Belgian Front-end developer. Building websites, web applications, user interfaces & design systems.

 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 }