grain.social is a photo sharing platform built on atproto.
1import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
2import { Un$Typed } from "$lexicon/util.ts";
3import { cn } from "@bigmoves/bff/components";
4import { profileLink } from "../utils.ts";
5import { ActorAvatar } from "./ActorAvatar.tsx";
6
7export function ActorInfo(
8 { class: classProp, profile, avatarSize = 28 }: Readonly<
9 { class?: string; profile: Un$Typed<ProfileView>; avatarSize?: number }
10 >,
11) {
12 return (
13 <div class={cn("flex items-center gap-2 min-w-0", classProp)}>
14 <ActorAvatar profile={profile} size={avatarSize} class="shrink-0" />
15 <a
16 href={profileLink(profile.handle)}
17 class="hover:underline text-zinc-600 dark:text-zinc-500 truncate max-w-[300px] sm:max-w-[400px]"
18 >
19 <span class="text-zinc-950 dark:text-zinc-50 font-semibold text-">
20 {profile.displayName || profile.handle}
21 </span>{" "}
22 <span class="truncate">@{profile.handle}</span>
23 </a>
24 </div>
25 );
26}