Skip to content
This repository was archived by the owner on Nov 20, 2025. It is now read-only.

Commit 681d9b5

Browse files
officialrajdeepsinghofficialrajdeepsingh
committed
rewrite UI
1 parent 6a9040c commit 681d9b5

File tree

1 file changed

+48
-64
lines changed
  • packages/section-blog-theme/components/Layouts

1 file changed

+48
-64
lines changed

‎packages/section-blog-theme/components/Layouts/Read.tsx‎

Lines changed: 48 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { slugify } from "@/utility/slugify";
1212
import { TypeSectionBlogTheme } from "@/src/types";
1313
import type { ReactNode } from "react";
1414
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
15+
import { Card, CardContent, CardFooter } from "../ui/card";
1516

1617
export function Read({
1718
pageOpts,
@@ -46,30 +47,24 @@ export function Read({
4647
let getTagURL = Next_URL(getSite) + "tags/" + getTag;
4748

4849
let getRwebURL = domain + "/" + pageOpts.route.replace("/", "");
49-
5050
return (
5151
<>
52+
5253
<Seo pageOpts={pageOpts} themeConfig={themeConfig} />
5354

54-
<div className=" px-5 sm:px-0 prose dark:prose-p:text-white prose-img:mx-auto prose-pre:bg-primary-foreground prose-slate sm:prose-sm md:prose-base lg:prose-lg xl:prose-xl 2xl:prose-1xl dark:prose-invert mx-auto">
55-
<h1 className="text-black dark:text-white antialiased my-3 text-3xl font-bold tracking-wide sm:text-4xl md:text-5xl">
56-
{" "}
57-
{frontMatter.title}{" "}
58-
</h1>
59-
60-
<p className="text-black dark:text-white mt-1 mb-2 text-lg leading-8 ">
61-
{" "}
62-
{frontMatter.description}{" "}
63-
</p>
64-
65-
<div className="mt-2.5 mb-1.5 flex flex-row items-center justify-between text-sm">
66-
<div className="flex flex-row flex-wrap sm:flex-nowrap gap-3 sm:gap-0 items-center print:block">
67-
{frontMatter?.author?.image ? (
68-
<Avatar className="mr-2 items-center justify-center">
69-
<AvatarImage
70-
className="h-12 w-12"
71-
src={frontMatter?.author?.image}
72-
/>
55+
<Card className="nx-mt-12 nx-border-none nx-shadow-none nx-format nx-format-section sm:nx-format-sm md:nx-format-base lg:nx-format-lg xl:nx-format-xl 2xl:nx-format-xl mx-auto">
56+
57+
<CardContent className="nx-px-5 !nx-pb-0 sm:nx-px-0">
58+
<h1 className="nx-antialiased !nx-mb-3 nx-text-3xl nx-font-bold nx-tracking-wide sm:nx-text-4xl md:nx-text-5xl">{frontMatter.title}</h1>
59+
<p className="!nx-my-2 nx-text-lg nx-leading-8">{frontMatter.description}</p>
60+
</CardContent>
61+
62+
<CardFooter className="nx-px-5 sm:nx-px-0 nx-flex nx-flex-row nx-items-center nx-justify-between nx-text-sm">
63+
64+
<div className="nx-flex nx-flex-row nx-flex-wrap sm:nx-flex-nowrap nx-gap-3 sm:nx-gap-0 nx-items-center print:nx-block">
65+
{
66+
frontMatter?.author?.image ? (<Avatar className="nx-mr-2 nx-items-center nx-justify-center">
67+
<AvatarImage className="nx-h-12 nx-w-12" src={frontMatter?.author?.image} />
7368
<AvatarFallback>
7469
{" "}
7570
{typeof frontMatter.author === "string"
@@ -79,57 +74,43 @@ export function Read({
7974
: ""}{" "}
8075
</AvatarFallback>
8176
</Avatar>
82-
) : (
83-
""
84-
)}
77+
) : ("")
78+
}
8579
<span>
8680
{" "}
8781
By{" "}
88-
{typeof frontMatter.author === "string" ? (
89-
<Link
90-
href={Next_URL(getSite)}
91-
rel="author"
92-
className="text-sm font-bold mr-2"
93-
>
94-
{frontMatter?.author}
95-
</Link>
96-
) : typeof frontMatter.author === "object" ? (
97-
<Link
98-
href={getAuthorURL}
99-
target="_blank"
100-
rel="author"
101-
className="text-sm font-bold mr-2"
102-
>
103-
{frontMatter?.author.name}
104-
</Link>
105-
) : (
106-
""
107-
)}
82+
{
83+
typeof frontMatter.author === "string" ? (
84+
<Link href={Next_URL(getSite)} rel="author" className="nx-text-sm nx-font-bold nx-transition nx-ease-in-out nx-mr-2 nx-underline hover:nx-text-secondary-foreground/80">
85+
{frontMatter?.author}
86+
</Link>
87+
) : typeof frontMatter.author === "object" ? (
88+
<Link href={getAuthorURL} target="_blank" rel="author" className="nx-text-sm nx-font-bold nx-transition nx-ease-in-out nx-mr-2 nx-underline hover:nx-text-secondary-foreground/80">
89+
{frontMatter?.author.name}
90+
</Link>
91+
) : ("")
92+
}
10893
</span>
109-
•{" "}
110-
<time className="mx-2" dateTime={getDate} title={getDate}>
94+
•
95+
<time className="nx-mx-2" dateTime={getDate} title={getDate}>
11196
{getDate}
112-
</time>{" "}
97+
</time>
11398
•{" "}
114-
<Link
115-
href={getTagURL}
116-
className="mr-2 text-sm font-bold capitalize ml-2"
117-
>
99+
<Link href={getTagURL} className="nx-mr-2 nx-text-sm nx-font-bold nx-transition nx-ease-in-out nx-capitalize nx-ml-2 nx-underline hover:nx-text-secondary-foreground/80">
118100
{" "}
119101
{getTag}{" "}
120102
</Link>{" "}
121103
•{" "}
122-
{readingTime !== undefined ? (
123-
<span className="text-sm font-bold capitalize ml-2">
124-
{" "}
125-
{readingTime.text}{" "}
126-
</span>
127-
) : (
128-
""
129-
)}
104+
{
105+
readingTime !== undefined ? (
106+
<span className="nx-text-sm nx-capitalize nx-ml-2">
107+
{readingTime.text}{" "}
108+
</span>
109+
) : ("")
110+
}
130111
</div>
131112

132-
<div className="hidden sm:flex flex-row items-center print:block">
113+
<div className="nx-hidden sm:nx-flex nx-flex-row nx-items-center print:nx-block">
133114
<RWebShare
134115
data={{
135116
text: frontMatter.description,
@@ -139,7 +120,7 @@ export function Read({
139120
onClick={() => console.log("shared successfully!")}
140121
>
141122
<Button aria-label="Share a Post" variant="ghost" size="icon">
142-
<Share2Icon className="h-4 w-4" />
123+
<Share2Icon className="nx-h-4 nx-w-4" />
143124
</Button>
144125
</RWebShare>
145126

@@ -149,13 +130,16 @@ export function Read({
149130
variant="ghost"
150131
size="icon"
151132
>
152-
<PrinterIcon className="h-4 w-4" />
133+
<PrinterIcon className="nx-h-4 nx-w-4" />
153134
</Button>
154135
</div>
155-
</div>
156-
</div>
136+
137+
</CardFooter>
138+
139+
</Card>
157140

158141
<Article>{children}</Article>
142+
159143
</>
160144
);
161-
}
145+
}

0 commit comments

Comments
 (0)