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}
10
11export const ActivityItem: Component<ActivityItemProps> = (props) => {
12 const [postUrl, setPostUrl] = createSignal<string | null>(null);
13
14 const profile = props.data.actor.profile;
15
16 createEffect(() => {
17 const postUri = parseCanonicalResourceUri(
18 props.data.record.subject?.uri ?? "",
19 );
20 if (postUri.ok) {
21 setPostUrl(
22 `https://bsky.app/profile/${postUri.value.repo}/post/${postUri.value.rkey}`,
23 );
24 }
25 });
26
27 return (
28 <div
29 class={`flex flex-wrap items-center border py-1 px-2 ${
30 props.data.liked
31 ? "bg-green-50 border-green-200"
32 : "bg-red-50 border-red-200"
33 }`}
34 >
35 <p text-wrap>
36 <span text-lg>{props.data.liked ? "❤️" : "💔"}</span>{" "}
37 {(profile && (
38 <span font-medium text="sm gray-700">
39 {profile!.displayName ?? profile!.handle}{" "}
40 {profile!.displayName && (
41 <span font-normal text-gray-500>
42 (@{profile!.handle})
43 </span>
44 )}
45 </span>
46 )) || (
47 <span font-medium text="sm gray-700">
48 {props.data.actor.did}
49 </span>
50 )}{" "}
51 <span text-gray-800>{props.data.liked ? "liked" : "unliked"}</span>{" "}
52 <a
53 text-blue-800
54 hover="underline text-blue-400"
55 href={postUrl() ?? props.data.record.subject?.uri}
56 >
57 this post
58 </a>{" "}
59 </p>
60 <div grow />
61 <div text="xs gray-500 end">
62 {new Date(props.data.time / 1000).toLocaleTimeString()}
63 </div>
64 </div>
65 );
66};