an app to share curated trails
sidetrail.app
1import type { User } from "../data/queries";
2import type { ReactNode } from "react";
3import { Card } from "@/components/Card";
4import "./TrailCard.css";
5
6type Props = {
7 uri?: string;
8 rkey: string;
9 creatorHandle: string;
10 title: string;
11 description: string;
12 accentColor: string;
13 backgroundColor: string;
14 creator: User;
15 stopsCount: number;
16 walkersSlot?: ReactNode;
17};
18
19export function TrailCard({
20 rkey,
21 creatorHandle,
22 title,
23 description,
24 accentColor,
25 backgroundColor,
26 creator,
27 stopsCount,
28 walkersSlot,
29}: Props) {
30 return (
31 <Card
32 href={`/@${creatorHandle}/trail/${rkey}`}
33 accentColor={accentColor}
34 backgroundColor={backgroundColor}
35 >
36 <div className="TrailCard">
37 <h3 className="TrailCard-title">{title}</h3>
38 <p className="TrailCard-description">{description}</p>
39 <div className="TrailCard-meta">
40 <span className="TrailCard-creator">@{creator.handle}</span>
41 <div className="TrailCard-activity">
42 {walkersSlot}
43 <span className="TrailCard-steps">{stopsCount} stops</span>
44 </div>
45 </div>
46 </div>
47 </Card>
48 );
49}