@stackshift-ui/blog 6.0.15 → 7.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +15 -15
  2. package/src/blog.test.tsx +2 -2
  3. package/src/blog_a.tsx +35 -22
  4. package/src/blog_b.tsx +52 -42
  5. package/src/blog_c.tsx +29 -17
  6. package/src/blog_d.tsx +16 -19
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/blog",
3
3
  "description": "",
4
- "version": "6.0.15",
4
+ "version": "7.0.0-beta.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -35,22 +35,22 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "classnames": "^2.5.1",
38
- "@stackshift-ui/button": "6.0.11",
39
- "@stackshift-ui/container": "6.0.11",
40
- "@stackshift-ui/flex": "6.0.11",
41
- "@stackshift-ui/card": "6.0.11",
42
- "@stackshift-ui/heading": "6.0.11",
43
- "@stackshift-ui/link": "6.0.11",
44
- "@stackshift-ui/image": "6.0.11",
45
- "@stackshift-ui/input": "6.0.12",
46
- "@stackshift-ui/section": "6.0.11",
47
- "@stackshift-ui/system": "6.0.11",
48
- "@stackshift-ui/badge": "6.0.11",
49
- "@stackshift-ui/text": "6.0.11",
50
- "@stackshift-ui/scripts": "6.0.10"
38
+ "@stackshift-ui/button": "6.1.0-beta.0",
39
+ "@stackshift-ui/container": "7.0.0-beta.0",
40
+ "@stackshift-ui/flex": "7.0.0-beta.0",
41
+ "@stackshift-ui/heading": "7.0.0-beta.0",
42
+ "@stackshift-ui/image": "6.1.0-beta.0",
43
+ "@stackshift-ui/badge": "7.0.0-beta.0",
44
+ "@stackshift-ui/card": "7.0.0-beta.0",
45
+ "@stackshift-ui/input": "7.0.0-beta.0",
46
+ "@stackshift-ui/link": "6.0.12-beta.0",
47
+ "@stackshift-ui/scripts": "6.1.0-beta.0",
48
+ "@stackshift-ui/section": "7.0.0-beta.0",
49
+ "@stackshift-ui/system": "6.1.0-beta.0",
50
+ "@stackshift-ui/text": "7.0.0-beta.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "@stackshift-ui/system": ">=6.0.11",
53
+ "@stackshift-ui/system": ">=6.1.0-beta.0",
54
54
  "@types/react": "16.8 - 19",
55
55
  "next": "10 - 14",
56
56
  "react": "16.8 - 19",
package/src/blog.test.tsx CHANGED
@@ -7,7 +7,7 @@ describe.concurrent("blog", () => {
7
7
 
8
8
  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
9
9
  const clx = "my-class";
10
- render(<Blog />);
11
- expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
10
+ render(<Blog data-testid="blog" />);
11
+ expect(screen.getByTestId("blog").classList).toContain(clx);
12
12
  });
13
13
  });
package/src/blog_a.tsx CHANGED
@@ -8,6 +8,9 @@ import { Section } from "@stackshift-ui/section";
8
8
  import { Text } from "@stackshift-ui/text";
9
9
  import { format } from "date-fns";
10
10
 
11
+ import { Badge } from "@stackshift-ui/badge";
12
+ import { Card, CardContent, CardTitle } from "@stackshift-ui/card";
13
+ import { buildSanityLink } from "@stackshift-ui/system";
11
14
  import { BlogProps } from ".";
12
15
  import { BlogPost, Category, LabeledRoute } from "./types";
13
16
 
@@ -69,7 +72,7 @@ function BlogPosts({ posts }: { posts?: BlogPost[] }) {
69
72
 
70
73
  function BlogItem({ post, key }: { post?: BlogPost; key: number }) {
71
74
  return (
72
- <div className="relative w-full h-64 rounded">
75
+ <Card className="relative w-full h-64 rounded">
73
76
  {post?.mainImage ? (
74
77
  <Image
75
78
  className="relative object-cover w-full h-full overflow-hidden rounded-md"
@@ -78,18 +81,16 @@ function BlogItem({ post, key }: { post?: BlogPost; key: number }) {
78
81
  sizes="(min-width: 1540px) 740px, (min-width: 1280px) 612px, (min-width: 1040px) 484px, (min-width: 780px) 736px, (min-width: 680px) 608px, calc(94.44vw - 15px)"
79
82
  />
80
83
  ) : null}
84
+
81
85
  <div className="absolute inset-0 bg-gray-900 rounded-md opacity-75" />
82
- <div className="absolute inset-0 flex flex-col items-start p-6">
86
+
87
+ <CardContent className="absolute inset-0 flex flex-col items-start p-6">
83
88
  {post?.categories ? (
84
- <div className="absolute flex left-5 top-5">
89
+ <Flex gap={2} className="absolute left-5 top-5">
85
90
  {post?.categories?.map((category: Category, index: number) => (
86
- <span
87
- className="px-3 py-1 mb-auto mr-3 text-sm font-bold uppercase bg-white rounded-full text-primary"
88
- key={index}>
89
- {category?.title}
90
- </span>
91
+ <Badge key={index}>{category?.title}</Badge>
91
92
  ))}
92
- </div>
93
+ </Flex>
93
94
  ) : null}
94
95
 
95
96
  <Flex align="center" className="mt-auto">
@@ -99,8 +100,8 @@ function BlogItem({ post, key }: { post?: BlogPost; key: number }) {
99
100
 
100
101
  {post?.authors && (
101
102
  <>
102
- <span className="mx-2 w-1 h-1 bg-gray-500 rounded-full"></span>
103
- <div className="flex mt-auto text-sm text-gray-500">
103
+ <span className="mx-2 w-1 h-1 bg-gray-500 rounded-full" />
104
+ <Flex className="mt-auto text-sm text-gray-500">
104
105
  {post?.authors?.map((author, index, { length }) => (
105
106
  <>
106
107
  <Text className="italic" fontSize="sm">
@@ -109,30 +110,42 @@ function BlogItem({ post, key }: { post?: BlogPost; key: number }) {
109
110
  {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
110
111
  </>
111
112
  ))}
112
- </div>
113
+ </Flex>
113
114
  </>
114
115
  )}
115
116
  </Flex>
116
117
 
117
118
  {post?.title ? (
118
- <Link
119
- className="text-lg font-bold text-white transform hover:scale-110 hover:text-secondary motion-reduce:transform-none"
120
- href={`/${post?.link}`}>
121
- {post?.title?.length > 40 ? post?.title.substring(0, 40) + "..." : post?.title}
122
- </Link>
119
+ <CardTitle className="text-lg font-bold text-white transform hover:scale-110 hover:text-secondary motion-reduce:transform-none">
120
+ <Link href={`/${post?.link}`}>
121
+ {post?.title?.length > 40 ? post?.title.substring(0, 40) + "..." : post?.title}
122
+ </Link>
123
+ </CardTitle>
123
124
  ) : null}
124
- </div>
125
- </div>
125
+ </CardContent>
126
+ </Card>
126
127
  );
127
128
  }
128
129
 
129
130
  function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
130
131
  if (!primaryButton?.label) return null;
131
132
 
133
+ const link = buildSanityLink({
134
+ type: primaryButton?.type ?? "",
135
+ internalLink: primaryButton?.internalLink ?? "",
136
+ externalLink: primaryButton?.externalLink ?? "",
137
+ });
138
+
132
139
  return (
133
- <div className="mt-10 text-center">
134
- <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
135
- {primaryButton?.label}
140
+ <div className="text-center mt-10">
141
+ <Button aria-label={primaryButton?.label} asChild>
142
+ <Link
143
+ href={link.href}
144
+ target={link.target}
145
+ rel={link.rel}
146
+ aria-label={primaryButton?.label}>
147
+ {primaryButton?.label}
148
+ </Link>
136
149
  </Button>
137
150
  </div>
138
151
  );
package/src/blog_b.tsx CHANGED
@@ -1,10 +1,12 @@
1
1
  import { Button } from "@stackshift-ui/button";
2
+ import { Card, CardContent } from "@stackshift-ui/card";
2
3
  import { Container } from "@stackshift-ui/container";
3
4
  import { Flex } from "@stackshift-ui/flex";
4
5
  import { Heading } from "@stackshift-ui/heading";
5
6
  import { Image } from "@stackshift-ui/image";
6
7
  import { Link } from "@stackshift-ui/link";
7
8
  import { Section } from "@stackshift-ui/section";
9
+ import { buildSanityLink } from "@stackshift-ui/system";
8
10
  import { Text } from "@stackshift-ui/text";
9
11
  import { format } from "date-fns";
10
12
  import { BlogProps } from ".";
@@ -70,12 +72,12 @@ function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: num
70
72
  const breakpoints = useMediaQuery("1024");
71
73
 
72
74
  return (
73
- <div className="overflow-hidden rounded-md shadow">
75
+ <Card className="overflow-hidden rounded-md shadow">
74
76
  {post?.mainImage ? (
75
77
  <ImageContainer post={post} size={size} breakpoints={breakpoints} key={key} />
76
78
  ) : null}
77
- <div className="p-6 bg-white flex flex-col justify-between" style={{ height: "295px" }}>
78
- <div>
79
+ <Flex direction="col" className="bg-white justify-between" style={{ height: "295px" }}>
80
+ <CardContent className="p-4">
79
81
  <Flex align="center">
80
82
  {post?.publishedAt ? (
81
83
  <Text muted className="text-sm">
@@ -84,8 +86,8 @@ function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: num
84
86
  ) : null}
85
87
  {post?.authors && (
86
88
  <>
87
- <span className="mx-2 w-1 h-1 bg-gray-500 rounded-full"></span>
88
- <div className="flex mt-auto text-sm text-gray-500">
89
+ <span className="mx-2 w-1 h-1 bg-gray-500 rounded-full" />
90
+ <Flex className="mt-auto text-sm text-gray-500">
89
91
  {post?.authors?.map((author, index, { length }) => (
90
92
  <>
91
93
  <Text className="italic" fontSize="sm">
@@ -94,32 +96,32 @@ function BlogItem({ post, size, key }: { post: BlogPost; size?: string; key: num
94
96
  {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
95
97
  </>
96
98
  ))}
97
- </div>
99
+ </Flex>
98
100
  </>
99
101
  )}
100
102
  </Flex>
101
103
 
102
104
  {post?.title ? (
103
- <Heading type="h4" className="my-2">
104
- {post.title.length > 25 ? `${post.title.substring(0, 25)}...` : post.title}
105
+ <Heading type="h4" className="my-2 line-clamp-3 !text-2xl">
106
+ {post.title}
105
107
  </Heading>
106
108
  ) : null}
107
109
  {post?.excerpt ? (
108
- <Text muted className="mb-6 text-justify">
109
- {post.excerpt.length > 41 ? `${post.excerpt.substring(0, 41)}...` : post.excerpt}
110
+ <Text muted className="mb-2 text-justify line-clamp-3">
111
+ {post.excerpt}
110
112
  </Text>
111
113
  ) : null}
112
- </div>
114
+ </CardContent>
113
115
  {post?.link ? (
114
116
  <Link
115
117
  aria-label="View Blog Post"
116
- className="font-bold text-primary hover:text-secondary"
118
+ className="font-bold text-primary hover:text-secondary px-4 pb-4"
117
119
  href={`/${post?.link}`}>
118
120
  View Blog Post
119
121
  </Link>
120
122
  ) : null}
121
- </div>
122
- </div>
123
+ </Flex>
124
+ </Card>
123
125
  );
124
126
  }
125
127
 
@@ -134,42 +136,50 @@ function ImageContainer({
134
136
  breakpoints: boolean;
135
137
  key: number;
136
138
  }) {
137
- return (
138
- <>
139
- {breakpoints ? (
140
- <Image
141
- className="object-cover w-full overflow-hidden"
142
- src={`${post.mainImage}`}
143
- sizes="100vw"
144
- style={{ width: "100%", height: "auto", objectFit: "cover" }}
145
- width={271}
146
- height={248}
147
- alt={post?.mainImage ?? `blog-variantB-image-${key}`}
148
- />
149
- ) : (
150
- <div className={`${size === "lg" ? "h-[44.5rem]" : "h-[12.5rem]"}`}>
151
- <Image
152
- className="object-cover w-full overflow-hidden rounded-t-md"
153
- src={`${post.mainImage}`}
154
- sizes="100vw"
155
- style={{ width: "100%", height: "100%", objectFit: "cover" }}
156
- width={271}
157
- height={248}
158
- alt={`blog-variantB-image-${post.title}`}
159
- />
160
- </div>
161
- )}
162
- </>
139
+ return breakpoints ? (
140
+ <Image
141
+ className="object-cover w-full overflow-hidden"
142
+ src={`${post.mainImage}`}
143
+ sizes="100vw"
144
+ style={{ width: "100%", height: "auto", objectFit: "cover" }}
145
+ width={271}
146
+ height={248}
147
+ alt={post?.mainImage ?? `blog-variantB-image-${key}`}
148
+ />
149
+ ) : (
150
+ <div className={`${size === "lg" ? "h-[44.5rem]" : "h-[12.5rem]"}`}>
151
+ <Image
152
+ className="object-cover w-full overflow-hidden rounded-t-md"
153
+ src={`${post.mainImage}`}
154
+ sizes="100vw"
155
+ style={{ width: "100%", height: "100%", objectFit: "cover" }}
156
+ width={271}
157
+ height={248}
158
+ alt={`blog-variantB-image-${post.title}`}
159
+ />
160
+ </div>
163
161
  );
164
162
  }
165
163
 
166
164
  function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
167
165
  if (!primaryButton?.label) return null;
168
166
 
167
+ const link = buildSanityLink({
168
+ type: primaryButton?.type ?? "",
169
+ internalLink: primaryButton?.internalLink ?? "",
170
+ externalLink: primaryButton?.externalLink ?? "",
171
+ });
172
+
169
173
  return (
170
174
  <div className="text-center">
171
- <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
172
- {primaryButton?.label}
175
+ <Button aria-label={primaryButton?.label} asChild>
176
+ <Link
177
+ href={link.href}
178
+ target={link.target}
179
+ rel={link.rel}
180
+ aria-label={primaryButton?.label}>
181
+ {primaryButton?.label}
182
+ </Link>
173
183
  </Button>
174
184
  </div>
175
185
  );
package/src/blog_c.tsx CHANGED
@@ -1,14 +1,15 @@
1
1
  import { Badge } from "@stackshift-ui/badge";
2
2
  import { Button } from "@stackshift-ui/button";
3
+ import { Card, CardContent } from "@stackshift-ui/card";
3
4
  import { Container } from "@stackshift-ui/container";
4
5
  import { Flex } from "@stackshift-ui/flex";
5
6
  import { Heading } from "@stackshift-ui/heading";
6
7
  import { Image } from "@stackshift-ui/image";
7
8
  import { Link } from "@stackshift-ui/link";
8
9
  import { Section } from "@stackshift-ui/section";
10
+ import { buildSanityLink } from "@stackshift-ui/system";
9
11
  import { Text } from "@stackshift-ui/text";
10
12
  import { format } from "date-fns";
11
- import React from "react";
12
13
  import { BlogProps } from ".";
13
14
  import { useMediaQuery } from "./hooks/useMediaQuery";
14
15
  import { BlogPost, LabeledRoute } from "./types";
@@ -64,7 +65,8 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
64
65
  const maxExcerptLength = breakpoints ? 70 : 200;
65
66
 
66
67
  return (
67
- <Flex wrap className={`bg-white overflow-hidden rounded-lg shadow w-full ${className}`}>
68
+ <Card
69
+ className={`flex flex-wrap bg-white overflow-hidden rounded-lg shadow w-full ${className}`}>
68
70
  {post?.mainImage && (
69
71
  <Image
70
72
  className="object-cover w-full h-auto rounded-l lg:w-1/2"
@@ -75,8 +77,8 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
75
77
  alt={post?.alt ?? `blog-variantC-image-${key}`}
76
78
  />
77
79
  )}
78
- <div className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
79
- <div className="flex flex-col sm:flex-row sm:items-center gap-3">
80
+ <CardContent className="w-full px-6 py-6 rounded-r lg:w-1/2 lg:pt-10">
81
+ <Flex className="flex-col sm:flex-row sm:items-center gap-3">
80
82
  {post?.categories &&
81
83
  post?.categories?.map((category, index) => (
82
84
  <Badge className="bg-secondary rounded-global w-fit" key={index}>
@@ -88,7 +90,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
88
90
  {format(new Date(post?.publishedAt), " dd MMM, yyyy")}
89
91
  </Text>
90
92
  )}
91
- </div>
93
+ </Flex>
92
94
 
93
95
  {post?.title && (
94
96
  <Heading className="my-4 text-xl lg:text-3xl">
@@ -96,7 +98,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
96
98
  </Heading>
97
99
  )}
98
100
  {post?.authors && (
99
- <div className="flex mb-10 flex-wrap">
101
+ <Flex wrap className="mb-10">
100
102
  <span className="italic text-primary">By&nbsp;</span>
101
103
  {post?.authors?.map((author, index, { length }) => (
102
104
  <>
@@ -104,7 +106,7 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
104
106
  {index + 1 !== length ? <span>&nbsp;,&nbsp;</span> : null}
105
107
  </>
106
108
  ))}
107
- </div>
109
+ </Flex>
108
110
  )}
109
111
  {post?.excerpt && (
110
112
  <Text muted className="mb-6 leading-loose lg:text-justify">
@@ -116,27 +118,37 @@ function BlogItem({ post, className, key }: { key: number; post: BlogPost; class
116
118
  {post?.link && (
117
119
  <Link
118
120
  aria-label="View Blog Post"
119
- className="font-bold text-primary hover:text-primary-foreground"
121
+ className="font-bold text-primary hover:text-secondary"
120
122
  href={`/${post?.link}`}>
121
123
  View Blog Post
122
124
  </Link>
123
125
  )}
124
- </div>
125
- </Flex>
126
+ </CardContent>
127
+ </Card>
126
128
  );
127
129
  }
128
130
 
129
131
  function PrimaryButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
130
132
  if (!primaryButton?.label) return null;
131
133
 
134
+ const link = buildSanityLink({
135
+ type: primaryButton?.type ?? "",
136
+ internalLink: primaryButton?.internalLink ?? "",
137
+ externalLink: primaryButton?.externalLink ?? "",
138
+ });
139
+
132
140
  return (
133
- <Button
134
- as="link"
135
- link={primaryButton}
136
- ariaLabel={primaryButton?.label}
137
- className="inline-flex flex-wrap text-center bg-primary text-sm sm:text-base px-6 py-3 rounded-global">
138
- {primaryButton?.label}
139
- </Button>
141
+ <div className="text-center">
142
+ <Button aria-label={primaryButton?.label} asChild>
143
+ <Link
144
+ href={link.href}
145
+ target={link.target}
146
+ rel={link.rel}
147
+ aria-label={primaryButton?.label}>
148
+ {primaryButton?.label}
149
+ </Link>
150
+ </Button>
151
+ </div>
140
152
  );
141
153
  }
142
154
 
package/src/blog_d.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Button } from "@stackshift-ui/button";
2
- import { Card } from "@stackshift-ui/card";
2
+ import { Card, CardContent } from "@stackshift-ui/card";
3
3
  import { Container } from "@stackshift-ui/container";
4
4
  import { Flex } from "@stackshift-ui/flex";
5
5
  import { Heading } from "@stackshift-ui/heading";
@@ -114,7 +114,7 @@ export default function Blog_D({ subtitle, title, posts }: BlogProps) {
114
114
  }
115
115
 
116
116
  function NoPostsMessage({ message = "No post available." }) {
117
- return <div className="w-full px-3 lg:w-3/4 font-medium text-lg">{message}</div>;
117
+ return <Text className="w-full px-3 lg:w-3/4 font-medium text-lg">{message}</Text>;
118
118
  }
119
119
 
120
120
  function SubtitleAndTitleText({ subtitle, title }: { subtitle?: string; title?: string }) {
@@ -145,10 +145,9 @@ function SearchInput({
145
145
  onChange={handleSearchChange}
146
146
  />
147
147
  <Button
148
- as="button"
149
148
  variant="unstyled"
150
- ariaLabel="Search button"
151
- className="absolute right-0 top-0 h-full px-3 bg-white border-r rounded-global text-primary flex items-center">
149
+ aria-label="Search button"
150
+ className="absolute right-0 top-0 h-full px-3 border-r rounded-global text-primary flex items-center">
152
151
  <svg
153
152
  className="w-6 h-6"
154
153
  fill="none"
@@ -177,7 +176,7 @@ function CategoryTab({
177
176
  setActiveTab: (category: string) => void;
178
177
  }) {
179
178
  return (
180
- <Card className="w-full px-3 mb-8 bg-white lg:mb-0 lg:w-1/4" borderRadius="md">
179
+ <Card className="w-full p-3 mb-8 bg-white lg:mb-0 lg:w-1/4 rounded-md">
181
180
  {categories && (
182
181
  <React.Fragment>
183
182
  <Heading
@@ -220,9 +219,8 @@ function CategoryItem({
220
219
  return (
221
220
  <li key={key}>
222
221
  <Button
223
- as="button"
224
222
  variant="unstyled"
225
- ariaLabel="Show all blog posts"
223
+ aria-label="Show all blog posts"
226
224
  className={`mb-4 block ${
227
225
  !category ? "hidden" : "block"
228
226
  } px-3 py-2 hover:bg-secondary-foreground focus:outline-none w-full text-left rounded ${
@@ -263,10 +261,10 @@ function PostItem({ post }: { post?: BlogPost }) {
263
261
  if (!post) return null;
264
262
 
265
263
  return (
266
- <Flex wrap className="mb-8 lg:mb-6 bg-white shadow rounded-lg">
264
+ <Card className="flex flex-wrap mb-8 lg:mb-6 bg-white shadow rounded-lg">
267
265
  <div className="w-full h-full mb-4 lg:mb-0 lg:w-1/4">
268
266
  <Image
269
- className="object-cover w-full h-full overflow-hidden rounded"
267
+ className="object-cover w-full h-full overflow-hidden rounded-l"
270
268
  src={`${post?.mainImage}`}
271
269
  sizes="100vw"
272
270
  width={188}
@@ -274,13 +272,13 @@ function PostItem({ post }: { post?: BlogPost }) {
274
272
  alt={post?.alt ?? `blog-variantD-image-${post?.title}`}
275
273
  />
276
274
  </div>
277
- <div className="w-full px-3 py-2 lg:w-3/4">
275
+ <CardContent className="w-full px-3 py-2 lg:w-3/4">
278
276
  {post?.title && (
279
277
  <Link
280
278
  aria-label={post?.title}
281
- className="mb-1 text-2xl font-bold hover:text-secondary font-heading"
279
+ className="mb-1 text-2xl font-bold hover:text-secondary font-heading line-clamp-3 sm:line-clamp-1"
282
280
  href={`/${post?.link ?? "page-not-added"}`}>
283
- {post?.title.length > 25 ? post?.title?.substring(0, 25) + "..." : post?.title}
281
+ {post?.title}
284
282
  </Link>
285
283
  )}
286
284
  <Flex wrap align="center" gap={1} className="mb-2 text-sm">
@@ -300,12 +298,12 @@ function PostItem({ post }: { post?: BlogPost }) {
300
298
  ) : null}
301
299
  </Flex>
302
300
  {post?.excerpt ? (
303
- <Text muted>
304
- {post?.excerpt.length > 60 ? post?.excerpt.substring(0, 60) + "..." : post?.excerpt}
301
+ <Text muted className="line-clamp-6 sm:line-clamp-3">
302
+ {post?.excerpt}
305
303
  </Text>
306
304
  ) : null}
307
- </div>
308
- </Flex>
305
+ </CardContent>
306
+ </Card>
309
307
  );
310
308
  }
311
309
 
@@ -330,8 +328,7 @@ function Pagination({ blogsPerPage, totalBlogs, paginate, currentPage }: Paginat
330
328
  {pageNumber.map(number => (
331
329
  <Button
332
330
  variant="unstyled"
333
- as="button"
334
- ariaLabel={`Page ${number}`}
331
+ aria-label={`Page ${number}`}
335
332
  key={number}
336
333
  className={`${
337
334
  currentPage === number