From 6822a2748cf046fe343772f061ef97bf514a3518 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sun, 12 Apr 2026 21:56:22 -0400
Subject: [PATCH] some stuff to unify darft and published post paddings, also
 new filler content in the previews

---
 .../[publication]/[rkey]/PostContent.tsx      |   8 +-
 .../[rkey]/PostHeader/PostHeader.tsx          |   4 +-
 .../dashboard/PublishedPostsLists.tsx         |   4 +-
 .../theme-settings/PostPreview.tsx            |  50 +--
 .../theme-settings/PubPreview.tsx             |  12 +-
 .../theme-settings/ThemeSettingsContent.tsx   |  12 +-
 .../theme-settings/postPreviewFakeBlocks.ts   | 353 ++++++++++++++++++
 components/Pages/PublicationMetadata.tsx      |   2 +-
 components/ThemeManager/PubThemeSetter.tsx    |  82 ----
 9 files changed, 381 insertions(+), 146 deletions(-)
 create mode 100644 app/lish/[did]/[publication]/theme-settings/postPreviewFakeBlocks.ts

diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 47318580..e008a3ae 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -65,7 +65,7 @@ export function PostContent({
   return (
     <div
       //The postContent class is important for QuoteHandler
-      className={`postContent flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4 ${className}`}
+      className={`postContent flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-0 ${className}`}
     >
       {blocks.map((b, index) => {
         return (
@@ -158,10 +158,12 @@ export let Block = ({
   )
     alignment = "text-center justify-center";
 
+  let isHeading = PubLeafletBlocksHeader.isMain(b.block);
+
   let className = `
     postBlockWrapper
     min-h-7
-    mt-1 mb-2
+    ${isFirst ? "mt-0" : "mt-1"} ${isLast ? "mb-3 sm:mb-4" : isHeading ? "mb-0!" : "mb-2"}
     ${isList && "isListItem mb-0! "}
     ${alignment}
     `;
@@ -388,7 +390,7 @@ export let Block = ({
       return (
         // all this margin stuff is a highly unfortunate hack so that the border-l on blockquote is the height of just the text rather than the height of the block, which includes padding.
         <blockquote
-          className={`blockquote py-0! mb-2! ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2! pt-3!" : "mt-1!"}`}
+          className={`blockquote py-0! mb-2! ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-3! pt-3!" : "mt-1!"}`}
           {...blockProps}
         >
           <TextBlock
diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
index 8b057e2b..054b09bf 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
@@ -124,9 +124,9 @@ export const PostHeaderLayout = (props: {
         {props.pubLink}
       </div>
       {props.postTitle && (
-        <h2 className="postTitle text-xl leading-tight pt-0.5 font-bold outline-hidden bg-transparent">
+        <h1 className="postTitle text-2xl leading-tight pt-0.5 font-bold outline-hidden bg-transparent">
           {props.postTitle}
-        </h2>
+        </h1>
       )}
       {props.postDescription ? (
         <div className="postDescription italic text-secondary outline-hidden bg-transparent pt-1">
diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
index 47b18411..1d726519 100644
--- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
@@ -87,7 +87,9 @@ function PublishedPostItem(props: {
           <div className="flex justify-between gap-2">
             <a className="hover:no-underline!" target="_blank" href={docUrl}>
               <h3 className="text-primary grow leading-snug">
-                {doc.record.title}
+                {doc.record.title === "" || doc.record.title === undefined
+                  ? "Untitled"
+                  : doc.record.title}
               </h3>
             </a>
             <div className="flex justify-start align-top flex-row gap-1">
diff --git a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
index 60d12d1e..e880d6f1 100644
--- a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
@@ -15,61 +15,15 @@ import {
   usePublicationData,
   useNormalizedPublicationRecord,
 } from "../dashboard/PublicationSWRProvider";
+import { fakeBlocks, fakePage } from "./postPreviewFakeBlocks";
 
 const FAKE_DID = "did:plc:fake-preview-user";
 const FAKE_DOC_URI =
   "at://did:plc:fake-preview-user/site.standard.document/preview";
 
-const fakeBlocks: PubLeafletPagesLinearDocument.Block[] = [
-  {
-    $type: "pub.leaflet.pages.linearDocument#block",
-    block: {
-      $type: "pub.leaflet.blocks.header",
-      level: 2,
-      plaintext: "A Heading",
-    },
-  },
-  {
-    $type: "pub.leaflet.pages.linearDocument#block",
-    block: {
-      $type: "pub.leaflet.blocks.text",
-      plaintext:
-        "This is a preview of what your posts will look like with the current theme settings. You can adjust colors, fonts, and layout options to match your style.",
-    },
-  },
-  {
-    $type: "pub.leaflet.pages.linearDocument#block",
-    block: {
-      $type: "pub.leaflet.blocks.text",
-      plaintext:
-        "Try changing the heading font, body font, accent color, and background to see how they affect the look and feel of your publication.",
-    },
-  },
-  {
-    $type: "pub.leaflet.pages.linearDocument#block",
-    block: {
-      $type: "pub.leaflet.blocks.horizontalRule",
-    },
-  },
-  {
-    $type: "pub.leaflet.pages.linearDocument#block",
-    block: {
-      $type: "pub.leaflet.blocks.text",
-      plaintext:
-        "Your readers will see posts rendered just like this. Make sure you're happy with the typography and spacing before publishing!",
-    },
-  },
-];
-
-const fakePage: PubLeafletPagesLinearDocument.Main = {
-  $type: "pub.leaflet.pages.linearDocument",
-  id: "preview-page",
-  blocks: fakeBlocks,
-};
-
 const fakeNormalizedDocument = {
   $type: "site.standard.document" as const,
-  title: "Preview Post Title",
+  title: "Building your Dream Theme!",
   description: "A short description of this preview post.",
   publishedAt: new Date().toISOString(),
   site: "at://did:plc:fake-preview-user/site.standard.publication/preview",
diff --git a/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx
index 5876f9f2..27887ef4 100644
--- a/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/PubPreview.tsx
@@ -52,9 +52,9 @@ export function PubPreview(props: {
     ? undefined
     : [
         {
-          title: "Hello!",
+          title: "Your Personal Antheme",
           description:
-            "So excited to have you! This is how your posts will appear in your publication",
+            "Welcome to the Publication Theme Setter. This is how posts will appear in your publication",
           date: (
             <LocalizedDate
               dateString={today.toISOString()}
@@ -63,9 +63,9 @@ export function PubPreview(props: {
           ),
         },
         {
-          title: "Welcome to your Leaflet Publication",
+          title: "The Theme of the Crop",
           description:
-            "Leaflet is an open platform for writing and reading long form posts. Everything you write here, and everyone that follows you is data that belongs to YOU.",
+            "This is the place to make your publication look and feel like home. It looks great!",
           date: (
             <LocalizedDate
               dateString={yesterday.toISOString()}
@@ -74,9 +74,9 @@ export function PubPreview(props: {
           ),
         },
         {
-          title: "I can't wait to see what you do here :)",
+          title: "Reams and Reams of Colorful Themes!",
           description:
-            "There's so much cool stuff happening here, including this publication!",
+            "So happy to have you. There's so much cool stuff happening here, including this publication :)",
           date: (
             <LocalizedDate
               dateString={dayBefore.toISOString()}
diff --git a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
index 95dfd237..51a284a7 100644
--- a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
@@ -69,7 +69,7 @@ export function ThemeSettingsContent() {
           {/* Theme Setter Panel */}
           <div
             ref={toolbarRef}
-            className=" bg-accent-1 items-center -mb-2 pb-[10px] pt-2 "
+            className="themeSetterControls bg-accent-1 items-center -mb-2 pb-[10px] pt-2 "
           >
             <div className=" sm:w-[var(--page-width-units)] mx-auto flex justify-between items-center px-3 sm:px-4 ">
               <BackToPubButton
@@ -99,13 +99,19 @@ export function ThemeSettingsContent() {
 
           {/* Full-page Preview */}
           <PublicationBackgroundProvider
-            className="rounded-t-lg"
+            className="rounded-t-lg grow! min-h-0 overflow-y-auto"
             theme={record?.theme}
             pub_creator={publication?.identity_did || ""}
             localBgImage={pubBGImage}
             localBgImageRepeat={leafletBGRepeat}
           >
-            <div className="mx-auto h-full w-fit pointer-events-none">
+            <div
+              className="mx-auto h-full w-fit"
+              onClickCapture={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
               {previewMode === "pub" ? (
                 <PubPreview
                   showPageBackground={showPageBackground}
diff --git a/app/lish/[did]/[publication]/theme-settings/postPreviewFakeBlocks.ts b/app/lish/[did]/[publication]/theme-settings/postPreviewFakeBlocks.ts
new file mode 100644
index 00000000..77353f38
--- /dev/null
+++ b/app/lish/[did]/[publication]/theme-settings/postPreviewFakeBlocks.ts
@@ -0,0 +1,353 @@
+import type { PubLeafletPagesLinearDocument } from "lexicons/api";
+
+export const fakeBlocks: PubLeafletPagesLinearDocument.Block[] = [
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "Welcome to Leaflet, intrepid writer!",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "This is a place to write, blog, journal, and above all, express oneself. As such we take theming very seriously. Read on to discover how to make your wildest themes come true!",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: 'And now, for a horizontal rule (also known as a "divider")!',
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.horizontalRule",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 2,
+      plaintext: "TLDR",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "We have some great presets available! Go ahead and apply one of those, and mess with the accent color to make it yours. Just keep in mind",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.unorderedList",
+      children: [
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext: "Go for a nice bright accent ",
+          },
+        },
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext:
+              "Make sure the text on accent is still legible. White or black if you're not sure!",
+          },
+        },
+      ],
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.horizontalRule",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 2,
+      plaintext: "Your Text",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 3,
+      plaintext: "Text",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "This is your default text color. ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "We also mix it with your background color to make lighter text or border colors!",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "No need to think too hard, black or white is good! Just make sure it shows up strong against your background color. ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 3,
+      plaintext: "Accent Colors ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      facets: [
+        {
+          index: {
+            byteEnd: 32,
+            byteStart: 20,
+          },
+          features: [
+            {
+              uri: "https://leaflet.pub/about",
+              $type: "pub.leaflet.richtext.facet#link",
+            },
+          ],
+        },
+      ],
+      plaintext:
+        "We use this in your inline links, and in certain block types like...",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      url: "https://www.leaflet.pub/about",
+      text: "Buttons!",
+      $type: "pub.leaflet.blocks.button",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "Pick something... ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.unorderedList",
+      children: [
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext: "nice and bright",
+          },
+        },
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext:
+              "with legible text on accent (white usually works, but sometimes black shows up better) ",
+          },
+        },
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext: "that shows off your personality!",
+          },
+        },
+      ],
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.horizontalRule",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 2,
+      plaintext: "Your Background",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 3,
+      plaintext: "Background",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "This is your background color. It can also be an image!",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "If you decide to go for a solid background color...",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.unorderedList",
+      children: [
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext: "pick one that isn't too vibrant",
+          },
+        },
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext: "go either dark or light, not in the middle",
+          },
+        },
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext:
+              "try a very dark or very light version of your accent color",
+          },
+        },
+      ],
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "If you go for an image, it's easy to overwhelm a reader with too much, so pick one that's... ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.unorderedList",
+      children: [
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext:
+              'not distracting. ie, not colorful or busy. You want something that could be described as "kinda boring". It\'ll still give a lot of personality once you apply it!',
+          },
+        },
+        {
+          $type: "pub.leaflet.blocks.unorderedList#listItem",
+          content: {
+            $type: "pub.leaflet.blocks.text",
+            plaintext: "Gradients are a classy classic",
+          },
+        },
+      ],
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 3,
+      plaintext: "Page or Container",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "You can choose to have a page background or not. ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "Page background puts a box around your writing. It's especially useful if you have a background image making your text harder to read. It's also another place to inject a color to give your writing some zuzsh.",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "No page background looks clean and minimal. It's sup to you!",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.horizontalRule",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.header",
+      level: 2,
+      plaintext: "Stuck?",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext:
+        "If you're really stuck, try one of our preset themes! Change just the accent color to give it a more personal flair. ",
+    },
+  },
+  {
+    $type: "pub.leaflet.pages.linearDocument#block",
+    block: {
+      $type: "pub.leaflet.blocks.text",
+      plaintext: "Good luck!",
+    },
+  },
+];
+
+export const fakePage: PubLeafletPagesLinearDocument.Main = {
+  $type: "pub.leaflet.pages.linearDocument",
+  id: "preview-page",
+  blocks: fakeBlocks,
+};
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
index 27d2e4cc..cedd38a4 100644
--- a/components/Pages/PublicationMetadata.tsx
+++ b/components/Pages/PublicationMetadata.tsx
@@ -81,7 +81,7 @@ export const PublicationMetadata = (props: { noInteractions?: boolean }) => {
       }
       postTitle={
         <TextField
-          className="leading-tight pt-0.5 text-xl font-bold outline-hidden bg-transparent"
+          className="leading-tight pt-0.5 text-2xl font-bold outline-hidden bg-transparent"
           value={title}
           onChange={async (newTitle) => {
             await rep?.mutate.updatePublicationDraft({
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index 53e8153a..c4fd66ac 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -337,85 +337,3 @@ export const PubThemeSetter = (props: {
     </CardBorderHiddenContext.Provider>
   );
 };
-
-const SamplePub = (props: {
-  pubBGImage: string | null;
-  pubBGRepeat: number | null;
-  showPageBackground: boolean;
-}) => {
-  let { data } = usePublicationData();
-  let { publication } = data || {};
-  let record = useNormalizedPublicationRecord();
-
-  return (
-    <div
-      style={{
-        backgroundImage: props.pubBGImage
-          ? `url(${props.pubBGImage})`
-          : undefined,
-        backgroundRepeat: props.pubBGRepeat ? "repeat" : "no-repeat",
-        backgroundPosition: "center",
-        backgroundSize: !props.pubBGRepeat
-          ? "cover"
-          : `calc(${props.pubBGRepeat}px / 2 )`,
-      }}
-      className={`bg-bg-leaflet p-3 pb-0 flex flex-col gap-3 rounded-t-md  border border-border border-b-0 h-[148px] overflow-hidden `}
-    >
-      <div
-        className="pubWrapper sampleContent rounded-t-md border-border pb-4 px-[10px] flex flex-col gap-[14px] w-[250px] mx-auto"
-        style={{
-          background: props.showPageBackground
-            ? "rgba(var(--bg-page), var(--bg-page-alpha))"
-            : undefined,
-        }}
-      >
-        <div className="flex flex-col justify-center text-center pt-2">
-          {record?.icon && publication?.uri && (
-            <div
-              style={{
-                backgroundRepeat: "no-repeat",
-                backgroundPosition: "center",
-                backgroundSize: "cover",
-                backgroundImage: `url(/api/atproto_images?did=${new AtUri(publication.uri).host}&cid=${(record.icon?.ref as unknown as { $link: string })["$link"]})`,
-              }}
-              className="w-4 h-4 rounded-full place-self-center"
-            />
-          )}
-
-          <div
-            className="text-[11px] font-bold pt-[5px] text-accent-contrast"
-            style={{
-              fontFamily:
-                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
-            }}
-          >
-            {record?.name}
-          </div>
-          <div className="text-[7px] font-normal text-tertiary">
-            {record?.description}
-          </div>
-          <div className=" flex gap-1 items-center mt-[6px] bg-accent-1 text-accent-2 py-px px-[4px] text-[7px] w-fit font-bold rounded-[2px] mx-auto">
-            <div className="h-[7px] w-[7px] rounded-full bg-accent-2" />
-            Subscribe with Bluesky
-          </div>
-        </div>
-
-        <div className="flex flex-col text-[8px]  rounded-md ">
-          <div
-            className="font-bold"
-            style={{
-              fontFamily:
-                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
-            }}
-          >
-            A Sample Post
-          </div>
-          <div className="text-secondary italic text-[6px]">
-            This is a sample description about the sample post
-          </div>
-          <div className="text-tertiary  text-[5px] pt-[2px]">Jan 1, 20XX </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-- 
2.51.2