desertthunder.dev
learn and share notes on atproto (wip) 馃
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1import { Card } from "$components/ui/Card";
2import type { UserProfile } from "$lib/model";
3import type { Component } from "solid-js";
4
5type UserProfileCardProps = { profile: UserProfile; class?: string };
6
7export const UserProfileCard: Component<UserProfileCardProps> = (props) => {
8 return (
9 <Card class={`p-6 ${props.class || ""}`}>
10 <div class="flex items-center gap-4 mb-4">
11 <div class="h-16 w-16 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-2xl font-bold">
12 {props.profile.did.slice(4, 6).toUpperCase()}
13 </div>
14 <div>
15 <h3 class="text-xl font-bold truncate max-w-[200px]" title={props.profile.did}>{props.profile.did}</h3>
16 <p class="text-gray-500 text-sm">AT Protocol User</p>
17 </div>
18 </div>
19
20 <div class="grid grid-cols-3 gap-4 text-center border-t border-gray-100 dark:border-gray-700 pt-4">
21 <div>
22 <div class="text-2xl font-bold text-gray-900 dark:text-white">{props.profile.follower_count}</div>
23 <div class="text-xs text-gray-500 uppercase tracking-wide">Followers</div>
24 </div>
25 <div>
26 <div class="text-2xl font-bold text-gray-900 dark:text-white">{props.profile.following_count}</div>
27 <div class="text-xs text-gray-500 uppercase tracking-wide">Following</div>
28 </div>
29 <div>
30 <div class="text-2xl font-bold text-gray-900 dark:text-white">
31 {props.profile.deck_count + props.profile.indexed_deck_count}
32 </div>
33 <div class="text-xs text-gray-500 uppercase tracking-wide">Decks</div>
34 </div>
35 </div>
36 </Card>
37 );
38};