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 <a
42 font-medium
43 href={`https://bsky.app/profile/${props.data.actor.did}`}
44 target="_blank"
45 hover:underline
46 text={`${props.isExtension ? "xs" : "sm"} gray-700`}
47 title={`@${profile!.handle}`}
48 >
49 {profile!.displayName ?? profile!.handle}{" "}
50 {!props.isExtension && profile!.displayName && (
51 <span font-normal text-gray-500>
52 (@{profile!.handle})
53 </span>
54 )}
55 </a>
56 )) || (
57 <a
58 font-medium
59 href={`https://bsky.app/profile/${props.data.actor.did}`}
60 target="_blank"
61 hover:underline
62 text={`${props.isExtension ? "xs" : "sm"} gray-700`}
63 >
64 {props.data.actor.did}
65 </a>
66 )}{" "}
67 <span text-gray-800>{props.data.liked ? "liked" : "unliked"}</span>{" "}
68 <a
69 text-blue-800
70 hover="underline text-blue-400"
71 href={postUrl() ?? props.data.record.subject?.uri}
72 >
73 this post
74 </a>{" "}
75 </p>
76 <div grow />
77 <div text="xs gray-500 end">
78 {new Date(props.data.time / 1000).toLocaleTimeString()}
79 </div>
80 </div>
81 );
82};