etienneburdet.com
Atproto AMA app
1import { Avatar } from "./Avatar";
2
3export type QuestionCardProps = {
4 questionContent: string;
5 askerHandle: string;
6 askerAvatar?: string;
7 answerContent: string;
8 responderHandle: string;
9 responderAvatar?: string;
10 answeredAt: number;
11};
12
13export function QuestionCard(props: QuestionCardProps) {
14 const formatDate = (timestamp: number) => {
15 return new Date(timestamp).toLocaleDateString(undefined, {
16 year: 'numeric',
17 month: 'short',
18 day: 'numeric',
19 });
20 };
21
22 return (
23 <div class="question-card">
24 <div class="question-card__section">
25 <div class="question-card__metadata">
26 <Avatar src={props.askerAvatar} handle={props.askerHandle} size="sm" />
27 <span class="question-card__metadata-name">@{props.askerHandle}</span>
28 <span>asked</span>
29 <a href={`/${props.responderHandle}/answers`} class="question-card__metadata-link">
30 @{props.responderHandle}
31 </a>
32 </div>
33 <p class="question-card__content">{props.questionContent}</p>
34 </div>
35
36 <div class="question-card__section">
37 <div class="question-card__metadata">
38 <Avatar src={props.responderAvatar} handle={props.responderHandle} size="sm" />
39 <a href={`/${props.responderHandle}/answers`} class="question-card__metadata-link">
40 @{props.responderHandle}
41 </a>
42 <span>answered</span>
43 <span class="question-card__metadata-date">{formatDate(props.answeredAt)}</span>
44 </div>
45 <p class="question-card__content">{props.answerContent}</p>
46 </div>
47 </div>
48 );
49}