My personal site hosted @ https://indexx.dev
indexx.dev
1import { useEffect, useState } from "react";
2const actorDid = import.meta.env.PUBLIC_ACTOR_DID;
3
4if (!actorDid) {
5 console.error(
6 "PUBLIC_ACTOR_DID is not defined. Please check your .env file.",
7 );
8}
9
10export default function Status() {
11 const [data, setData] = useState(null);
12 const [error, setError] = useState(null);
13
14 useEffect(() => {
15 const fetchStatus = async () => {
16 if (!actorDid) {
17 setError("Configuration error: Actor DID is missing.");
18 return;
19 }
20 try {
21 const res = await fetch(
22 `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${actorDid}&limit=1&filter=posts_no_replies`,
23 );
24 if (!res.ok) throw new Error(`HTTP ${res.status}`);
25
26 const json = await res.json();
27 const latestPost = json.feed[0].post;
28
29 const status = {
30 text: latestPost.record.text,
31 createdAt: latestPost.record.createdAt,
32 link: `https://bsky.app/profile/${actorDid}/post/${
33 latestPost.uri.split("/")[4]
34 }`,
35 };
36 setData(status);
37 } catch (err) {
38 console.error("Fetch failed:", err);
39 setError(err.message);
40 }
41 };
42
43 fetchStatus();
44 }, [actorDid]);
45
46 if (error) {
47 return (
48 <span
49 className="badge bg-dark"
50 style={{
51 color: "#595959 !important",
52 //outline: "1px solid white",
53 //outlineOffset: "1px",
54 }}
55 >
56 Error: {error}
57 </span>
58 );
59 }
60 if (!data) {
61 return (
62 <span
63 className="badge bg-dark"
64 style={{
65 color: "#595959 !important",
66 //outline: "1px solid white",
67 //outlineOffset: "1px",
68 }}
69 >
70 Loading status...
71 </span>
72 );
73 }
74
75 const date = new Date(data.createdAt);
76 const now = new Date();
77 const diff = now.getTime() - date.getTime();
78
79 const days = Math.floor(diff / (1000 * 60 * 60 * 24));
80
81 if (days >= 2) {
82 return null;
83 }
84
85 const minutes = Math.floor(diff / 60000);
86 const hours = Math.floor(minutes / 60);
87
88 let timeAgo = "just now";
89 if (days > 0) timeAgo = `${days} days ago`;
90 else if (hours > 0) timeAgo = `${hours} hours ago`;
91 else if (minutes > 0) timeAgo = `${minutes} minutes ago`;
92
93 if (days == 1) timeAgo = "1 day ago";
94
95 const oldStatusClasses = days >= 1
96 ? "opacity-75 text-decoration-line-through"
97 : "";
98
99 return (
100 <a
101 href={data.link}
102 target="_blank"
103 className={`badge bg-white ${oldStatusClasses}`}
104 //style={{ outline: "1px solid white", outlineOffset: "1px" }}
105 >
106 I'm.. "{data.text}", {timeAgo}
107 </a>
108 );
109}