its for when you want to get like notifications for your reposts
ptr.pet
1import type {} from "@atcute/bluesky";
2import type {} from "@atcute/atproto";
3import { parseCanonicalResourceUri } from "@atcute/lexicons/syntax";
4import { Component, createSignal, createEffect } from "solid-js";
5import { Notification } from "./types.js";
6
7interface ActivityItemProps {
8 data: Notification;
9 isExtension: boolean;
10}
11
12export const ActivityItem: Component<ActivityItemProps> = (props) => {
13 const [postUrl, setPostUrl] = createSignal<string | null>(null);
14
15 const profile = props.data.actor.profile;
16
17 createEffect(() => {
18 const postUri = parseCanonicalResourceUri(
19 props.data.record.subject?.uri ?? "",
20 );
21 if (postUri.ok) {
22 setPostUrl(
23 `https://bsky.app/profile/${postUri.value.repo}/post/${postUri.value.rkey}`,
24 );
25 }
26 });
27
28 return (
29 <div
30 class={`flex flex-wrap items-center border py-1 px-2 ${
31 props.data.liked
32 ? "bg-green-50 border-green-200"
33 : "bg-red-50 border-red-200"
34 }`}
35 >
36 <p text-wrap>
37 <span text={props.isExtension ? "sm" : "lg"}>
38 {props.data.liked ? "❤️" : "💔"}
39 </span>{" "}
40 {(profile && (
41 <span
42 font-medium
43 text={`${props.isExtension ? "xs" : "sm"} gray-700`}
44 title={`@${profile!.handle}`}
45 >
46 {profile!.displayName ?? profile!.handle}
47 </span>
48 )) || (
49 <span
50 font-medium
51 text={`${props.isExtension ? "xs" : "sm"} gray-700`}
52 >
53 {props.data.actor.did}
54 </span>
55 )}{" "}
56 <span text-gray-800>{props.data.liked ? "liked" : "unliked"}</span>{" "}
57 <a
58 text-blue-800
59 hover="underline text-blue-400"
60 href={postUrl() ?? props.data.record.subject?.uri}
61 >
62 this post
63 </a>{" "}
64 </p>
65 <div grow />
66 <div text="xs gray-500 end">
67 {new Date(props.data.time / 1000).toLocaleTimeString()}
68 </div>
69 </div>
70 );
71};