From eb785a10456df61a170ca1dbf935c46253cbd516 Mon Sep 17 00:00:00 2001
From: "Natalie B." <22222885+espeon@users.noreply.github.com>
Date: Fri, 7 Feb 2025 23:33:23 -0600
Subject: [PATCH] fixed vpositioning on a bunch of screens

---
 src/components/error.tsx                      |   6 +-
 .../views/app-bsky/actorProfile.tsx           | 115 ++++++++++++++++++
 src/lib/getDidDoc.ts                          |  20 +++
 src/lib/preprocess.tsx                        |  39 ++++++
 src/lib/utils.ts                              | 100 ++++++++++++++-
 src/routes/at:/$handle.index.tsx              |  41 +++++--
 .../at:/$handle/$collection.$rkey.lazy.tsx    |  58 ++++++++-
 .../at:/$handle/$collection.index.lazy.tsx    |   2 +-
 src/routes/counter.lazy.tsx                   |   2 +-
 src/routes/index.lazy.tsx                     | 112 +++++++++++++----
 10 files changed, 445 insertions(+), 50 deletions(-)
 create mode 100644 src/components/views/app-bsky/actorProfile.tsx
 create mode 100644 src/lib/getDidDoc.ts
 create mode 100644 src/lib/preprocess.tsx

diff --git a/src/components/error.tsx b/src/components/error.tsx
index 4d9e430..248a0c2 100644
--- a/src/components/error.tsx
+++ b/src/components/error.tsx
@@ -6,10 +6,12 @@ import { SmartSearchBar } from "./smartSearchBar";
 export default function ShowError({ error }: { error: Error }) {
   const router = useRouter();
   return (
-    <div className="flex flex-col min-h-screen justify-center items-center gap-4">
+    <div className="flex flex-col max-h-[calc(100vh-5rem)] h-screen justify-center items-center gap-4">
       <div className="flex flex-col gap-2 items-center">
         <CircleAlert className="text-red-500" width={48} height={48} />
-        <div className="h-min text-wrap break-words max-w-md w-full text-center">Error: {error.message}</div>
+        <div className="h-min text-wrap break-words max-w-md w-full text-center">
+          Error: {error.message}
+        </div>
       </div>
       <div className="flex flex-row gap-2 items-center">
         <Button variant="secondary" onClick={() => router.history.back()}>
diff --git a/src/components/views/app-bsky/actorProfile.tsx b/src/components/views/app-bsky/actorProfile.tsx
new file mode 100644
index 0000000..556f258
--- /dev/null
+++ b/src/components/views/app-bsky/actorProfile.tsx
@@ -0,0 +1,115 @@
+import { AppBskyActorProfile } from "@atcute/client/lexicons";
+import { CollectionViewComponent, CollectionViewProps } from "../getView";
+import { getBlueskyCdnLink } from "@/components/json/appBskyEmbedImages";
+import { AtSign, Pin, Tag, WalletCards } from "lucide-react";
+import { preprocessText } from "@/lib/preprocess";
+import { BlueskyPostWithoutEmbed } from "./embed";
+import { Link } from "@tanstack/react-router";
+
+const StarterPackInfo = ({
+  profile,
+}: {
+  profile: AppBskyActorProfile.Record;
+}) => {
+  if (!profile.joinedViaStarterPack) return null;
+
+  const [, , handle, collection, rkey] =
+    profile.joinedViaStarterPack.uri.split("/");
+
+  return (
+    <>
+      <WalletCards height="1rem" className="inline" />
+      <Link
+        to="/at:/$handle/$collection/$rkey"
+        params={{ handle, collection, rkey }}
+        className="text-muted-foreground text-sm mt-4 mb-1"
+      >
+        Joined via starter pack: {profile.joinedViaStarterPack.uri}
+      </Link>
+    </>
+  );
+};
+
+export const AppBskyActorProfileView: CollectionViewComponent<
+  CollectionViewProps
+> = ({ data, repoData }: CollectionViewProps) => {
+  const profile = data.value as AppBskyActorProfile.Record;
+  return (
+    <>
+      {profile ? (
+        profile?.banner ? (
+          <div className="relative">
+            <img
+              src={getBlueskyCdnLink(
+                repoData?.did!,
+                profile?.banner?.ref.$link,
+                "jpeg",
+              )}
+              className="w-full rounded-lg -z-10 border object-cover -mb-16"
+            />
+            {profile.avatar ? (
+              <img
+                src={getBlueskyCdnLink(
+                  repoData?.did!,
+                  profile?.avatar?.ref.$link,
+                  "jpeg",
+                )}
+                className="w-32 h-32 rounded-full object-cover ml-12"
+              />
+            ) : (
+              <div className="w-32 h-32 bg-neutral-500 rounded-full grid place-items-center ml-12">
+                <AtSign className="w-16 h-16" />
+              </div>
+            )}
+          </div>
+        ) : profile.avatar ? (
+          <img
+            src={getBlueskyCdnLink(
+              repoData?.did!,
+              profile?.avatar?.ref.$link,
+              "jpeg",
+            )}
+            className="w-32 h-32 rounded-full object-cover ml-12"
+          />
+        ) : (
+          <div className="w-32 h-32 bg-neutral-500 rounded-full grid place-items-center ml-12">
+            <AtSign className="w-16 h-16" />
+          </div>
+        )
+      ) : (
+        <div> Nothing doing!</div>
+      )}
+      <div className="ml-12 mt-2">
+        <h1 className="text-2xl">
+          {profile.displayName}{" "}
+          <span className="text-muted-foreground">
+            {repoData?.handle && "@" + repoData.handle}
+            {repoData?.handleIsCorrect ? "" : " (invalid)"}
+          </span>
+        </h1>
+        <p>{profile.description && preprocessText(profile.description)}</p>
+        {profile.labels && (
+          <div className="text-muted-foreground text-sm mt-4 mb-1">
+            <Tag height="1rem" className="inline" /> Labels
+          </div>
+        )}
+        <StarterPackInfo profile={profile} />
+        {profile.labels?.values.map((l) => (
+          <div className="bg-blue-400 dark:bg-blue-700">{l.val}</div>
+        ))}
+        {profile.pinnedPost && (
+          <>
+            <div className="text-muted-foreground text-sm mt-4 mb-1">
+              <Pin height="1rem" className="inline" />
+              Pinned Post{" "}
+            </div>
+            <BlueskyPostWithoutEmbed
+              uri={profile.pinnedPost.uri}
+              showEmbeddedPost={true}
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/src/lib/getDidDoc.ts b/src/lib/getDidDoc.ts
new file mode 100644
index 0000000..b659fc0
--- /dev/null
+++ b/src/lib/getDidDoc.ts
@@ -0,0 +1,20 @@
+import { DidDocument } from "@atcute/client/utils/did";
+
+export default async function getDidDoc(did: string): Promise<DidDocument> {
+  try {
+    if (did.startsWith("did:web:")) {
+      const response = await fetch(
+        `https://${did.replace("did:web:", "")}/.well-known/did.json`,
+      );
+      return await response.json();
+    } else if (did.startsWith("did:plc")) {
+      const response = await fetch(`https://plc.directory/${did}`);
+      return await response.json();
+    }
+    throw new Error(`Unsupported DID format: ${did}`);
+  } catch (error) {
+    throw new Error(
+      `Failed to fetch DID document: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}
diff --git a/src/lib/preprocess.tsx b/src/lib/preprocess.tsx
new file mode 100644
index 0000000..8781a7f
--- /dev/null
+++ b/src/lib/preprocess.tsx
@@ -0,0 +1,39 @@
+import React from "preact/compat";
+
+export function preprocessText(text: string): React.ReactNode[] {
+  // URL regex pattern
+  const urlPattern = /(https?:\/\/[^\s]+)/g;
+
+  // Split the text by URLs
+  const parts = text.split(urlPattern);
+
+  // Process each part and create React elements
+  return parts.map((part, index) => {
+    // Check if this part is a URL
+    if (urlPattern.test(part)) {
+      return (
+        <a
+          className="text-blue-700 dark:text-blue-400"
+          key={index}
+          href={part}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {part}
+        </a>
+      );
+    }
+
+    // Handle newlines in text parts
+    if (part) {
+      return part.split("\n").map((line, lineIndex, array) => (
+        <React.Fragment key={`${index}-${lineIndex}`}>
+          {line}
+          {lineIndex < array.length - 1 && <br />}
+        </React.Fragment>
+      ));
+    }
+
+    return null;
+  });
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..67accf2 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,100 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+type TimeUnit =
+  | "year"
+  | "month"
+  | "week"
+  | "day"
+  | "hour"
+  | "minute"
+  | "second";
+
+interface TimeInterval {
+  seconds: number;
+  label: TimeUnit;
+}
+
+interface TimeagoOptions {
+  maxUnit?: TimeUnit;
+  minUnit?: TimeUnit;
+  future?: boolean;
+  useShortLabels?: boolean;
+}
+
+export function timeAgo(
+  date: Date | string | number,
+  options: TimeagoOptions = {},
+): string {
+  const {
+    maxUnit = "year",
+    minUnit = "second",
+    future = true,
+    useShortLabels = false,
+  } = options;
+
+  const currentDate = new Date();
+  const targetDate = new Date(date);
+
+  const seconds = Math.floor(
+    (currentDate.getTime() - targetDate.getTime()) / 1000,
+  );
+  const isFuture = seconds < 0;
+  const absoluteSeconds = Math.abs(seconds);
+
+  const intervals: TimeInterval[] = [
+    { seconds: 31536000, label: "year" },
+    { seconds: 2592000, label: "month" },
+    { seconds: 604800, label: "week" },
+    { seconds: 86400, label: "day" },
+    { seconds: 3600, label: "hour" },
+    { seconds: 60, label: "minute" },
+    { seconds: 1, label: "second" },
+  ];
+
+  // Short labels mapping
+  const shortLabels: Record<TimeUnit, string> = {
+    year: "y",
+    month: "mo",
+    week: "w",
+    day: "d",
+    hour: "h",
+    minute: "m",
+    second: "s",
+  };
+
+  // Handle future dates if not allowed
+  if (isFuture && !future) {
+    return "in the future";
+  }
+
+  // Handle just now
+  if (absoluteSeconds < 30 && minUnit === "second") {
+    return "just now";
+  }
+
+  // Filter intervals based on max and min units
+  const filteredIntervals = intervals.filter((interval) => {
+    const unitIndex = intervals.findIndex((i) => i.label === interval.label);
+    const maxUnitIndex = intervals.findIndex((i) => i.label === maxUnit);
+    const minUnitIndex = intervals.findIndex((i) => i.label === minUnit);
+    return unitIndex >= maxUnitIndex && unitIndex <= minUnitIndex;
+  });
+
+  for (const { seconds: secondsInUnit, label } of filteredIntervals) {
+    const interval = Math.floor(absoluteSeconds / secondsInUnit);
+
+    if (interval >= 1) {
+      const unitLabel = useShortLabels ? shortLabels[label] : label;
+      const plural = interval === 1 ? "" : "s";
+      const timeLabel = `${interval}${useShortLabels ? "" : " "}${unitLabel}${useShortLabels ? "" : plural}`;
+
+      return isFuture ? `in ${timeLabel}` : `${timeLabel} ago`;
+    }
+  }
+
+  return "just now";
 }
diff --git a/src/routes/at:/$handle.index.tsx b/src/routes/at:/$handle.index.tsx
index 075a0fd..af09bc4 100644
--- a/src/routes/at:/$handle.index.tsx
+++ b/src/routes/at:/$handle.index.tsx
@@ -1,14 +1,18 @@
 import ShowError from "@/components/error";
+import { RenderJson } from "@/components/renderJson";
 import RepoIcons from "@/components/repoIcons";
 import { Loader } from "@/components/ui/loader";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import getDidDoc from "@/lib/getDidDoc";
 import { QtClient, useXrpc } from "@/providers/qtprovider";
 import "@atcute/bluesky/lexicons";
 import {
   AppBskyActorGetProfile,
   ComAtprotoRepoDescribeRepo,
 } from "@atcute/client/lexicons";
+import { DidDocument } from "@atcute/client/utils/did";
 import {
+  AuthorizationServerMetadata,
   IdentityMetadata,
   resolveFromIdentity,
 } from "@atcute/oauth-browser-client";
@@ -19,8 +23,12 @@ import { useState, useEffect } from "preact/compat";
 interface RepoData {
   data?: ComAtprotoRepoDescribeRepo.Output;
   blueSkyData?: AppBskyActorGetProfile.Output | null;
-  identity?: IdentityMetadata;
+  identity?: {
+    identity: IdentityMetadata;
+    metadata: AuthorizationServerMetadata;
+  };
   isLoading: boolean;
+  didDoc?: DidDocument;
   error: Error | null;
 }
 
@@ -53,6 +61,7 @@ function useRepoData(handle: string): RepoData {
             params: { repo: id.identity.id },
             signal: abortController.signal,
           });
+        let doc = await getDidDoc(id.identity.id);
         // can we get bsky data?
         if (response.data.collections.includes("app.bsky.actor.profile")) {
           // reuse client dumbass
@@ -67,16 +76,18 @@ function useRepoData(handle: string): RepoData {
           setState({
             blueSkyData: bskyData.data,
             data: response.data,
-            identity: id.identity,
+            identity: id,
             isLoading: false,
+            didDoc: doc,
             error: null,
           });
         } else {
           setState({
             blueSkyData: null,
             data: response.data,
-            identity: id.identity,
+            identity: id,
             isLoading: false,
+            didDoc: doc,
             error: null,
           });
         }
@@ -108,17 +119,18 @@ export const Route = createFileRoute("/at:/$handle/")({
 
 function RouteComponent() {
   const { handle } = Route.useParams();
-  const { blueSkyData, data, identity, isLoading, error } = useRepoData(handle);
+  const { blueSkyData, data, identity, isLoading, error, didDoc } =
+    useRepoData(handle);
   if (error) {
     return <ShowError error={error} />;
   }
 
   if (isLoading && !blueSkyData) {
-    return <Loader className="min-h-screen" />;
+    return <Loader className="max-h-[calc(100vh-5rem)] h-screen" />;
   }
 
   return (
-    <div className="flex flex-row justify-center w-full min-h-screen">
+    <div className="flex flex-row justify-center w-full">
       <div className="max-w-2xl w-screen p-4 md:mt-16 space-y-2">
         {blueSkyData ? (
           blueSkyData?.banner ? (
@@ -132,8 +144,12 @@ function RouteComponent() {
                 className="absolute -bottom-12 md:-bottom-16 w-24 lg:w-32 aspect-square rounded-full border"
               />
             </div>
-          ) : (
+          ) : blueSkyData.avatar ? (
             <img src={blueSkyData?.avatar} className="w-32 h-32 rounded-full" />
+          ) : (
+            <div className="w-32 h-32 bg-neutral-500 rounded-full grid place-items-center">
+              <AtSign className="w-16 h-16" />
+            </div>
           )
         ) : (
           <div className="w-32 h-32 bg-neutral-500 rounded-full grid place-items-center">
@@ -153,7 +169,7 @@ function RouteComponent() {
             <RepoIcons
               collections={data?.collections}
               handle={data?.handle}
-              did={identity?.id}
+              did={identity?.identity.id}
             />
           </div>
         )}
@@ -161,8 +177,9 @@ function RouteComponent() {
         <br />
 
         <div>
-          PDS: {identity?.pds.hostname.includes("bsky.network") && "🍄"}{" "}
-          {identity?.pds.hostname}
+          PDS:{" "}
+          {identity?.identity.pds.hostname.includes("bsky.network") && "🍄"}{" "}
+          {identity?.identity.pds.hostname}
         </div>
 
         <div>
@@ -183,6 +200,10 @@ function RouteComponent() {
             ))}
           </ul>
         </div>
+        <div className="pt-2">
+          <h2 className="text-xl font-bold">DID Document</h2>
+          <RenderJson data={didDoc} did={identity?.identity.id!} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/routes/at:/$handle/$collection.$rkey.lazy.tsx b/src/routes/at:/$handle/$collection.$rkey.lazy.tsx
index 9e5ec7f..5677222 100644
--- a/src/routes/at:/$handle/$collection.$rkey.lazy.tsx
+++ b/src/routes/at:/$handle/$collection.$rkey.lazy.tsx
@@ -114,7 +114,7 @@ function RouteComponent() {
   }
 
   if (isLoading && !data) {
-    return <Loader className="min-h-screen" />;
+    return <Loader className="max-h-[calc(100vh-5rem)] h-screen" />;
   }
 
   if (data === undefined) return <div>No data</div>;
@@ -146,16 +146,62 @@ function RouteComponent() {
         </div>
         {!View && (
           <div className="text-muted-foreground text-xs">
-            if you see this message please bug me to add a custom view for this
-            repo type
+            This View is not yet implemented. If you have a need, state your
+            case{" "}
+            <Link
+              to="/at:/$handle"
+              params={{ handle: "natalie.sh" }}
+              className="text-blue-700 dark:text-blue-400"
+            >
+              @natalie.sh
+            </Link>
           </div>
         )}
+        <div className="text-muted-foreground group">
+          <Link
+            to={`/at:/$handle`}
+            params={{
+              handle: repoInfo?.did || "",
+            }}
+            className="dark:hover:text-blue-400 group-hover:text-blue-500 transition-colors duration-300"
+          >
+            at://{handle}
+          </Link>
+          <Link
+            to={`/at:/$handle/$collection`}
+            params={{
+              handle: repoInfo?.did || "",
+              collection,
+            }}
+            className="dark:hover:text-blue-400 group-hover:text-blue-500 transition-colors duration-300"
+          >
+            /{collection}
+          </Link>
+          /{rkey}
+        </div>
         <div className="border-b" />
         <Tabs defaultValue={View ? "view" : "json"} className="w-full">
           <TabsList>
-            {View && <TabsTrigger value="view">View</TabsTrigger>}
-            <TabsTrigger value="json">JSON</TabsTrigger>
-            <TabsTrigger value="text">JSON (Text)</TabsTrigger>
+            {View && (
+              <TabsTrigger
+                value="view"
+                className="dark:hover:text-gray-300 hover:text-gray-700 transition-colors duration-300"
+              >
+                View
+              </TabsTrigger>
+            )}
+            <TabsTrigger
+              value="json"
+              className="dark:hover:text-gray-300 hover:text-gray-700 transition-colors duration-300"
+            >
+              JSON
+            </TabsTrigger>
+            <TabsTrigger
+              value="text"
+              className="dark:hover:text-gray-300 hover:text-gray-700 transition-colors duration-300"
+            >
+              JSON (Text)
+            </TabsTrigger>
           </TabsList>
           {View && (
             <TabsContent value="view" className="w-full overflow-x-auto">
diff --git a/src/routes/at:/$handle/$collection.index.lazy.tsx b/src/routes/at:/$handle/$collection.index.lazy.tsx
index 4e64fb9..175ad5f 100644
--- a/src/routes/at:/$handle/$collection.index.lazy.tsx
+++ b/src/routes/at:/$handle/$collection.index.lazy.tsx
@@ -116,7 +116,7 @@ function RouteComponent() {
   }
 
   if ((isLoading && !cursor) || !records) {
-    return <Loader className="min-h-screen" />;
+    return <Loader className="max-h-[calc(100vh-5rem)] h-screen" />;
   }
 
   return (
diff --git a/src/routes/counter.lazy.tsx b/src/routes/counter.lazy.tsx
index a8539f5..ed30453 100644
--- a/src/routes/counter.lazy.tsx
+++ b/src/routes/counter.lazy.tsx
@@ -207,7 +207,7 @@ export default function RouteComponent() {
   } = stats;
 
   return (
-    <div className="container mx-auto max-w-screen h-screen">
+    <div className="container mx-auto max-w-screen max-h-[calc(100vh-5rem)] h-screen">
       <ParticlesComponent
         isAnimating={isConfettiActive}
         setIsAnimating={setIsConfettiActive}
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx
index 29762fc..812f912 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -2,6 +2,80 @@ import { SmartSearchBar } from "@/components/smartSearchBar";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 import { createLazyFileRoute, Link } from "@tanstack/react-router";
 import { AtSign, Star } from "lucide-react";
+import { useMemo } from "react";
+
+const examples = [
+  <Link
+    key="danabra"
+    to="/at:/$handle"
+    params={{ handle: "danabra.mov" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://danabra.mov
+    </div>
+  </Link>,
+  <Link
+    key="kot-posts"
+    to="/at:/$handle/$collection"
+    params={{ handle: "kot.pink", collection: "app.bsky.feed.post" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://kot.pink/app.bsky.feed.post
+    </div>
+  </Link>,
+  <Link
+    key="robk"
+    to="/at:/$handle"
+    params={{ handle: "komaniecki.bsky.social" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://komaniecki.bsky.social
+    </div>
+  </Link>,
+  <Link
+    key="why-generator"
+    to="/at:/$handle/$collection"
+    params={{ handle: "why.bsky.team", collection: "app.bsky.feed.generator" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://why.bsky.team/app.bsky.feed.generator
+    </div>
+  </Link>,
+  <Link
+    key="jay"
+    to="/at:/$handle"
+    params={{ handle: "jay.bsky.social" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://jay.bsky.social
+    </div>
+  </Link>,
+  <Link
+    key="nobody-knows"
+    to="/at:/$handle"
+    params={{ handle: "pippy.bsky.social" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://pippy.bsky.social
+    </div>
+  </Link>,
+  <Link
+    key="jay"
+    to="/at:/$handle/$collection"
+    params={{ handle: "ngerakines.me", collection: "blue.badge.collection" }}
+    className="text-blue-500"
+  >
+    <div className="bg-muted text-muted-foreground rounded-full px-3 py-1 hover:bg-muted/80 transition-colors">
+      at://ngerakines.me/blue.badge.collection
+    </div>
+  </Link>,
+];
 
 export const Route = createLazyFileRoute("/")({
   component: Index,
@@ -9,8 +83,13 @@ export const Route = createLazyFileRoute("/")({
 
 export default function Index() {
   useDocumentTitle("atp.tools");
+
+  const randomExamples = useMemo(() => {
+    return [...examples].sort(() => Math.random() - 0.5).slice(0, 2);
+  }, []);
+
   return (
-    <main className="min-h-screen relative max-w-[100vw]">
+    <main className="h-screen relative max-h-[calc(100vh-5rem)]">
       <div className="container mx-auto px-4 py-16">
         <div className="flex flex-col items-center justify-center md:min-h-[80vh]">
           {/* Header section */}
@@ -24,33 +103,12 @@ export default function Index() {
           <div className="w-full max-w-xl mx-auto">
             <SmartSearchBar />
           </div>
-          <div className="flex justify-center items-center gap-x-2 mt-4">
-            <div className="flex flex-row gap-x-1 text-muted-foreground">
-              <Star /> Try:
+          <div className="flex flex-row items-center mt-6 gap-2 justify-center">
+            <div className="flex items-center gap-x-2 text-muted-foreground">
+              <Star className="h-4 w-4" /> Try:{" "}
             </div>
-            <div className="flex flex-col gap-1 md:flex-row">
-              <Link
-                to="/at:/$handle"
-                params={{ handle: "danabra.mov" }}
-                className="text-blue-500"
-              >
-                <div className="bg-muted text-muted-foreground rounded-full px-2">
-                  at://danabra.mov
-                </div>
-              </Link>
-
-              <Link
-                to="/at:/$handle/$collection"
-                params={{
-                  handle: "kot.pink",
-                  collection: "app.bsky.feed.post",
-                }}
-                className="text-blue-500"
-              >
-                <div className="bg-muted text-muted-foreground rounded-full px-2">
-                  at://kot.pink/app.bsky.feed.post
-                </div>
-              </Link>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 text-sm">
+              {randomExamples}
             </div>
           </div>
         </div>
-- 
2.51.2