Interactive Front‑end developer from Belgium.

 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 }