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