@haroonwaves/blog-kit-react 1.0.5 → 1.0.6
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.
- package/dist/index.cjs +84 -34
- package/dist/index.js +84 -34
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -50,7 +50,7 @@ function Badge({ children, className }) {
|
|
|
50
50
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
51
51
|
"span",
|
|
52
52
|
{
|
|
53
|
-
className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-500 ${className}`,
|
|
53
|
+
className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 dark:bg-orange-900/30 px-2.5 py-0.5 text-xs font-semibold text-orange-500 dark:text-orange-300 ${className}`,
|
|
54
54
|
children
|
|
55
55
|
}
|
|
56
56
|
);
|
|
@@ -60,19 +60,38 @@ function Badge({ children, className }) {
|
|
|
60
60
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
61
61
|
function BlogRenderer({ content, metadata, className = "", components }) {
|
|
62
62
|
const defaultComponents = {
|
|
63
|
-
h1: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800", ...props }),
|
|
64
|
-
h2: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800", ...props }),
|
|
65
|
-
h3: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
63
|
+
h1: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800 dark:text-gray-100", ...props }),
|
|
64
|
+
h2: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800 dark:text-gray-100", ...props }),
|
|
65
|
+
h3: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
66
|
+
"h3",
|
|
67
|
+
{
|
|
68
|
+
className: "text-2xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100",
|
|
69
|
+
...props
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
h4: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100", ...props }),
|
|
73
|
+
h5: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100", ...props }),
|
|
74
|
+
h6: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
75
|
+
"h6",
|
|
76
|
+
{
|
|
77
|
+
className: "text-base font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100",
|
|
78
|
+
...props
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
p: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-4 leading-7 text-gray-600 dark:text-gray-300", ...props }),
|
|
82
|
+
ul: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "mb-4 ml-6 list-disc text-gray-600 dark:text-gray-300", ...props }),
|
|
83
|
+
ol: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "mb-4 ml-6 list-decimal text-gray-600 dark:text-gray-300", ...props }),
|
|
72
84
|
li: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "mb-2", ...props }),
|
|
73
85
|
code: ({ className: codeClassName, children, ...props }) => {
|
|
74
86
|
const isInline = !codeClassName;
|
|
75
|
-
return isInline ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
87
|
+
return isInline ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
88
|
+
"code",
|
|
89
|
+
{
|
|
90
|
+
className: "px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm text-red-600 dark:text-red-400",
|
|
91
|
+
...props,
|
|
92
|
+
children
|
|
93
|
+
}
|
|
94
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: codeClassName, ...props, children });
|
|
76
95
|
},
|
|
77
96
|
pre: ({ className: preClassName, children, ...props }) => {
|
|
78
97
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
@@ -87,30 +106,54 @@ function BlogRenderer({ content, metadata, className = "", components }) {
|
|
|
87
106
|
blockquote: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
88
107
|
"blockquote",
|
|
89
108
|
{
|
|
90
|
-
className: "border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600",
|
|
109
|
+
className: "border-l-4 border-blue-500 dark:border-blue-400 pl-4 italic my-4 text-gray-600 dark:text-gray-400",
|
|
110
|
+
...props
|
|
111
|
+
}
|
|
112
|
+
),
|
|
113
|
+
a: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
114
|
+
"a",
|
|
115
|
+
{
|
|
116
|
+
className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline",
|
|
91
117
|
...props
|
|
92
118
|
}
|
|
93
119
|
),
|
|
94
|
-
|
|
95
|
-
strong: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold text-gray-800", ...props }),
|
|
120
|
+
strong: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold text-gray-800 dark:text-gray-100", ...props }),
|
|
96
121
|
em: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { className: "italic", ...props }),
|
|
97
|
-
del: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("del", { className: "line-through text-gray-500", ...props }),
|
|
98
|
-
hr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "my-8 border-gray-300", ...props }),
|
|
122
|
+
del: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("del", { className: "line-through text-gray-500 dark:text-gray-400", ...props }),
|
|
123
|
+
hr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: "my-8 border-gray-300 dark:border-gray-700", ...props }),
|
|
99
124
|
br: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("br", { ...props }),
|
|
100
125
|
img: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "max-w-full h-auto rounded-lg my-4", ...props }),
|
|
101
|
-
table: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
102
|
-
|
|
126
|
+
table: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
127
|
+
"table",
|
|
128
|
+
{
|
|
129
|
+
className: "min-w-full border border-gray-300 dark:border-gray-700 rounded",
|
|
130
|
+
...props
|
|
131
|
+
}
|
|
132
|
+
) }),
|
|
133
|
+
thead: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800", ...props }),
|
|
103
134
|
tbody: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { ...props }),
|
|
104
|
-
tr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "border-b border-gray-300", ...props }),
|
|
105
|
-
th: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
106
|
-
|
|
135
|
+
tr: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { className: "border-b border-gray-300 dark:border-gray-700", ...props }),
|
|
136
|
+
th: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
137
|
+
"th",
|
|
138
|
+
{
|
|
139
|
+
className: "px-4 py-2 text-left font-semibold border border-gray-300 dark:border-gray-700 dark:text-gray-100",
|
|
140
|
+
...props
|
|
141
|
+
}
|
|
142
|
+
),
|
|
143
|
+
td: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
144
|
+
"td",
|
|
145
|
+
{
|
|
146
|
+
className: "px-4 py-2 border border-gray-300 dark:border-gray-700 dark:text-gray-300",
|
|
147
|
+
...props
|
|
148
|
+
}
|
|
149
|
+
),
|
|
107
150
|
input: ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { className: "mr-2", type: "checkbox", disabled: true, ...props })
|
|
108
151
|
};
|
|
109
152
|
const mergedComponents = { ...defaultComponents, ...components };
|
|
110
153
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
111
154
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [
|
|
112
155
|
metadata.category && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: metadata.category }),
|
|
113
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
|
|
156
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
|
|
114
157
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: metadata.readingTime }),
|
|
115
158
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2022" }),
|
|
116
159
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
|
|
@@ -120,7 +163,7 @@ function BlogRenderer({ content, metadata, className = "", components }) {
|
|
|
120
163
|
}) })
|
|
121
164
|
] })
|
|
122
165
|
] }),
|
|
123
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `prose prose-slate max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `prose prose-slate dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
124
167
|
import_react_markdown.default,
|
|
125
168
|
{
|
|
126
169
|
remarkPlugins: [import_remark_gfm.default],
|
|
@@ -149,11 +192,11 @@ function BlogCard({
|
|
|
149
192
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
150
193
|
"article",
|
|
151
194
|
{
|
|
152
|
-
className: `rounded-lg border border-gray-200 hover:border-gray-300 p-6 transition-colors ${className}`,
|
|
195
|
+
className: `rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 p-6 transition-colors ${className}`,
|
|
153
196
|
children: [
|
|
154
197
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
155
198
|
showCategory && metadata.category && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { children: metadata.category }),
|
|
156
|
-
(showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
|
|
199
|
+
(showReadingTime || showDate) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
|
|
157
200
|
showReadingTime && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: metadata.readingTime }),
|
|
158
201
|
showReadingTime && showDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u2022" }),
|
|
159
202
|
showDate && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
|
|
@@ -165,12 +208,12 @@ function BlogCard({
|
|
|
165
208
|
] }) }),
|
|
166
209
|
Link(
|
|
167
210
|
href,
|
|
168
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "font-semibold text-xl text-gray-700 mb-2 hover:underline transition-colors", children: metadata.title })
|
|
211
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "font-semibold text-xl text-gray-700 dark:text-gray-100 mb-2 hover:underline transition-colors", children: metadata.title })
|
|
169
212
|
),
|
|
170
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 leading-6 mb-4", children: metadata.description }),
|
|
213
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-300 leading-6 mb-4", children: metadata.description }),
|
|
171
214
|
Link(
|
|
172
215
|
href,
|
|
173
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm", children: "Read more \u2192" })
|
|
216
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm", children: "Read more \u2192" })
|
|
174
217
|
)
|
|
175
218
|
]
|
|
176
219
|
}
|
|
@@ -188,7 +231,7 @@ function BlogList({
|
|
|
188
231
|
cardProps
|
|
189
232
|
}) {
|
|
190
233
|
if (metadata.length === 0) {
|
|
191
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `text-center text-gray-500 py-12 ${className}`, children: emptyMessage });
|
|
234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `text-center text-gray-500 dark:text-gray-400 py-12 ${className}`, children: emptyMessage });
|
|
192
235
|
}
|
|
193
236
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `space-y-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
194
237
|
BlogCard,
|
|
@@ -205,11 +248,18 @@ function BlogList({
|
|
|
205
248
|
// src/components/BlogPlaceholder.tsx
|
|
206
249
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
207
250
|
function BlogPlaceholder({ count = 3, className = "" }) {
|
|
208
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
252
|
+
"div",
|
|
253
|
+
{
|
|
254
|
+
className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse",
|
|
255
|
+
children: [
|
|
256
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
|
|
257
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
|
|
258
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
|
|
259
|
+
]
|
|
260
|
+
},
|
|
261
|
+
i
|
|
262
|
+
)) });
|
|
213
263
|
}
|
|
214
264
|
|
|
215
265
|
// src/hooks/useBlogs.ts
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ function Badge({ children, className }) {
|
|
|
10
10
|
return /* @__PURE__ */ jsx(
|
|
11
11
|
"span",
|
|
12
12
|
{
|
|
13
|
-
className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 px-2.5 py-0.5 text-xs font-semibold text-orange-500 ${className}`,
|
|
13
|
+
className: `inline-flex items-center rounded-full border border-transparent bg-orange-100 dark:bg-orange-900/30 px-2.5 py-0.5 text-xs font-semibold text-orange-500 dark:text-orange-300 ${className}`,
|
|
14
14
|
children
|
|
15
15
|
}
|
|
16
16
|
);
|
|
@@ -20,19 +20,38 @@ function Badge({ children, className }) {
|
|
|
20
20
|
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
21
21
|
function BlogRenderer({ content, metadata, className = "", components }) {
|
|
22
22
|
const defaultComponents = {
|
|
23
|
-
h1: ({ ...props }) => /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800", ...props }),
|
|
24
|
-
h2: ({ ...props }) => /* @__PURE__ */ jsx2("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800", ...props }),
|
|
25
|
-
h3: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
h1: ({ ...props }) => /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-bold mb-4 mt-8 text-gray-800 dark:text-gray-100", ...props }),
|
|
24
|
+
h2: ({ ...props }) => /* @__PURE__ */ jsx2("h2", { className: "text-3xl font-bold mb-3 mt-6 text-gray-800 dark:text-gray-100", ...props }),
|
|
25
|
+
h3: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
26
|
+
"h3",
|
|
27
|
+
{
|
|
28
|
+
className: "text-2xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100",
|
|
29
|
+
...props
|
|
30
|
+
}
|
|
31
|
+
),
|
|
32
|
+
h4: ({ ...props }) => /* @__PURE__ */ jsx2("h4", { className: "text-xl font-semibold mb-2 mt-4 text-gray-800 dark:text-gray-100", ...props }),
|
|
33
|
+
h5: ({ ...props }) => /* @__PURE__ */ jsx2("h5", { className: "text-lg font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100", ...props }),
|
|
34
|
+
h6: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
35
|
+
"h6",
|
|
36
|
+
{
|
|
37
|
+
className: "text-base font-semibold mb-2 mt-3 text-gray-800 dark:text-gray-100",
|
|
38
|
+
...props
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
p: ({ ...props }) => /* @__PURE__ */ jsx2("p", { className: "mb-4 leading-7 text-gray-600 dark:text-gray-300", ...props }),
|
|
42
|
+
ul: ({ ...props }) => /* @__PURE__ */ jsx2("ul", { className: "mb-4 ml-6 list-disc text-gray-600 dark:text-gray-300", ...props }),
|
|
43
|
+
ol: ({ ...props }) => /* @__PURE__ */ jsx2("ol", { className: "mb-4 ml-6 list-decimal text-gray-600 dark:text-gray-300", ...props }),
|
|
32
44
|
li: ({ ...props }) => /* @__PURE__ */ jsx2("li", { className: "mb-2", ...props }),
|
|
33
45
|
code: ({ className: codeClassName, children, ...props }) => {
|
|
34
46
|
const isInline = !codeClassName;
|
|
35
|
-
return isInline ? /* @__PURE__ */ jsx2(
|
|
47
|
+
return isInline ? /* @__PURE__ */ jsx2(
|
|
48
|
+
"code",
|
|
49
|
+
{
|
|
50
|
+
className: "px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm text-red-600 dark:text-red-400",
|
|
51
|
+
...props,
|
|
52
|
+
children
|
|
53
|
+
}
|
|
54
|
+
) : /* @__PURE__ */ jsx2("code", { className: codeClassName, ...props, children });
|
|
36
55
|
},
|
|
37
56
|
pre: ({ className: preClassName, children, ...props }) => {
|
|
38
57
|
return /* @__PURE__ */ jsx2(
|
|
@@ -47,30 +66,54 @@ function BlogRenderer({ content, metadata, className = "", components }) {
|
|
|
47
66
|
blockquote: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
48
67
|
"blockquote",
|
|
49
68
|
{
|
|
50
|
-
className: "border-l-4 border-blue-500 pl-4 italic my-4 text-gray-600",
|
|
69
|
+
className: "border-l-4 border-blue-500 dark:border-blue-400 pl-4 italic my-4 text-gray-600 dark:text-gray-400",
|
|
70
|
+
...props
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
a: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
74
|
+
"a",
|
|
75
|
+
{
|
|
76
|
+
className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline",
|
|
51
77
|
...props
|
|
52
78
|
}
|
|
53
79
|
),
|
|
54
|
-
|
|
55
|
-
strong: ({ ...props }) => /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-gray-800", ...props }),
|
|
80
|
+
strong: ({ ...props }) => /* @__PURE__ */ jsx2("strong", { className: "font-semibold text-gray-800 dark:text-gray-100", ...props }),
|
|
56
81
|
em: ({ ...props }) => /* @__PURE__ */ jsx2("em", { className: "italic", ...props }),
|
|
57
|
-
del: ({ ...props }) => /* @__PURE__ */ jsx2("del", { className: "line-through text-gray-500", ...props }),
|
|
58
|
-
hr: ({ ...props }) => /* @__PURE__ */ jsx2("hr", { className: "my-8 border-gray-300", ...props }),
|
|
82
|
+
del: ({ ...props }) => /* @__PURE__ */ jsx2("del", { className: "line-through text-gray-500 dark:text-gray-400", ...props }),
|
|
83
|
+
hr: ({ ...props }) => /* @__PURE__ */ jsx2("hr", { className: "my-8 border-gray-300 dark:border-gray-700", ...props }),
|
|
59
84
|
br: ({ ...props }) => /* @__PURE__ */ jsx2("br", { ...props }),
|
|
60
85
|
img: ({ ...props }) => /* @__PURE__ */ jsx2("img", { className: "max-w-full h-auto rounded-lg my-4", ...props }),
|
|
61
|
-
table: ({ ...props }) => /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx2(
|
|
62
|
-
|
|
86
|
+
table: ({ ...props }) => /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx2(
|
|
87
|
+
"table",
|
|
88
|
+
{
|
|
89
|
+
className: "min-w-full border border-gray-300 dark:border-gray-700 rounded",
|
|
90
|
+
...props
|
|
91
|
+
}
|
|
92
|
+
) }),
|
|
93
|
+
thead: ({ ...props }) => /* @__PURE__ */ jsx2("thead", { className: "bg-gray-50 dark:bg-gray-800", ...props }),
|
|
63
94
|
tbody: ({ ...props }) => /* @__PURE__ */ jsx2("tbody", { ...props }),
|
|
64
|
-
tr: ({ ...props }) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-gray-300", ...props }),
|
|
65
|
-
th: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
66
|
-
|
|
95
|
+
tr: ({ ...props }) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-gray-300 dark:border-gray-700", ...props }),
|
|
96
|
+
th: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
97
|
+
"th",
|
|
98
|
+
{
|
|
99
|
+
className: "px-4 py-2 text-left font-semibold border border-gray-300 dark:border-gray-700 dark:text-gray-100",
|
|
100
|
+
...props
|
|
101
|
+
}
|
|
102
|
+
),
|
|
103
|
+
td: ({ ...props }) => /* @__PURE__ */ jsx2(
|
|
104
|
+
"td",
|
|
105
|
+
{
|
|
106
|
+
className: "px-4 py-2 border border-gray-300 dark:border-gray-700 dark:text-gray-300",
|
|
107
|
+
...props
|
|
108
|
+
}
|
|
109
|
+
),
|
|
67
110
|
input: ({ ...props }) => /* @__PURE__ */ jsx2("input", { className: "mr-2", type: "checkbox", disabled: true, ...props })
|
|
68
111
|
};
|
|
69
112
|
const mergedComponents = { ...defaultComponents, ...components };
|
|
70
113
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
71
114
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
|
|
72
115
|
metadata.category && /* @__PURE__ */ jsx2(Badge, { children: metadata.category }),
|
|
73
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
|
|
116
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
|
|
74
117
|
/* @__PURE__ */ jsx2("span", { children: metadata.readingTime }),
|
|
75
118
|
/* @__PURE__ */ jsx2("span", { children: "\u2022" }),
|
|
76
119
|
/* @__PURE__ */ jsx2("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
|
|
@@ -80,7 +123,7 @@ function BlogRenderer({ content, metadata, className = "", components }) {
|
|
|
80
123
|
}) })
|
|
81
124
|
] })
|
|
82
125
|
] }),
|
|
83
|
-
/* @__PURE__ */ jsx2("div", { className: `prose prose-slate max-w-none ${className}`, children: /* @__PURE__ */ jsx2(
|
|
126
|
+
/* @__PURE__ */ jsx2("div", { className: `prose prose-slate dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ jsx2(
|
|
84
127
|
ReactMarkdown,
|
|
85
128
|
{
|
|
86
129
|
remarkPlugins: [remarkGfm],
|
|
@@ -109,11 +152,11 @@ function BlogCard({
|
|
|
109
152
|
return /* @__PURE__ */ jsxs2(
|
|
110
153
|
"article",
|
|
111
154
|
{
|
|
112
|
-
className: `rounded-lg border border-gray-200 hover:border-gray-300 p-6 transition-colors ${className}`,
|
|
155
|
+
className: `rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800 p-6 transition-colors ${className}`,
|
|
113
156
|
children: [
|
|
114
157
|
/* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
|
|
115
158
|
showCategory && metadata.category && /* @__PURE__ */ jsx3(Badge, { children: metadata.category }),
|
|
116
|
-
(showReadingTime || showDate) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
|
|
159
|
+
(showReadingTime || showDate) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [
|
|
117
160
|
showReadingTime && /* @__PURE__ */ jsx3("span", { children: metadata.readingTime }),
|
|
118
161
|
showReadingTime && showDate && /* @__PURE__ */ jsx3("span", { children: "\u2022" }),
|
|
119
162
|
showDate && /* @__PURE__ */ jsx3("time", { dateTime: metadata.date, children: new Date(metadata.date).toLocaleDateString("en-US", {
|
|
@@ -125,12 +168,12 @@ function BlogCard({
|
|
|
125
168
|
] }) }),
|
|
126
169
|
Link(
|
|
127
170
|
href,
|
|
128
|
-
/* @__PURE__ */ jsx3("h2", { className: "font-semibold text-xl text-gray-700 mb-2 hover:underline transition-colors", children: metadata.title })
|
|
171
|
+
/* @__PURE__ */ jsx3("h2", { className: "font-semibold text-xl text-gray-700 dark:text-gray-100 mb-2 hover:underline transition-colors", children: metadata.title })
|
|
129
172
|
),
|
|
130
|
-
/* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 leading-6 mb-4", children: metadata.description }),
|
|
173
|
+
/* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-300 leading-6 mb-4", children: metadata.description }),
|
|
131
174
|
Link(
|
|
132
175
|
href,
|
|
133
|
-
/* @__PURE__ */ jsx3("span", { className: "inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm", children: "Read more \u2192" })
|
|
176
|
+
/* @__PURE__ */ jsx3("span", { className: "inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm", children: "Read more \u2192" })
|
|
134
177
|
)
|
|
135
178
|
]
|
|
136
179
|
}
|
|
@@ -148,7 +191,7 @@ function BlogList({
|
|
|
148
191
|
cardProps
|
|
149
192
|
}) {
|
|
150
193
|
if (metadata.length === 0) {
|
|
151
|
-
return /* @__PURE__ */ jsx4("div", { className: `text-center text-gray-500 py-12 ${className}`, children: emptyMessage });
|
|
194
|
+
return /* @__PURE__ */ jsx4("div", { className: `text-center text-gray-500 dark:text-gray-400 py-12 ${className}`, children: emptyMessage });
|
|
152
195
|
}
|
|
153
196
|
return /* @__PURE__ */ jsx4("div", { className: `space-y-6 ${className}`, children: metadata.map((meta) => /* @__PURE__ */ jsx4(
|
|
154
197
|
BlogCard,
|
|
@@ -165,11 +208,18 @@ function BlogList({
|
|
|
165
208
|
// src/components/BlogPlaceholder.tsx
|
|
166
209
|
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
167
210
|
function BlogPlaceholder({ count = 3, className = "" }) {
|
|
168
|
-
return /* @__PURE__ */ jsx5("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs3(
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
211
|
+
return /* @__PURE__ */ jsx5("div", { className: `space-y-6 ${className}`, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs3(
|
|
212
|
+
"div",
|
|
213
|
+
{
|
|
214
|
+
className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse",
|
|
215
|
+
children: [
|
|
216
|
+
/* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-3" }),
|
|
217
|
+
/* @__PURE__ */ jsx5("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded mb-2" }),
|
|
218
|
+
/* @__PURE__ */ jsx5("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
|
|
219
|
+
]
|
|
220
|
+
},
|
|
221
|
+
i
|
|
222
|
+
)) });
|
|
173
223
|
}
|
|
174
224
|
|
|
175
225
|
// src/hooks/useBlogs.ts
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-500:oklch(70.5% .213 47.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.my-4{margin-block:calc(var(--spacing)*4)}.my-8{margin-block:calc(var(--spacing)*8)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-auto{height:auto}.w-3\/4{width:75%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-full{min-width:100%}.animate-pulse{animation:var(--animate-pulse)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-transparent{border-color:#0000}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-12{padding-block:calc(var(--spacing)*12)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-orange-500{color:var(--color-orange-500)}.text-red-600{color:var(--color-red-600)}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:underline:hover{text-decoration-line:underline}}.\[\&\>code\]\:block>code{display:block}.\[\&\>code\]\:p-4>code{padding:calc(var(--spacing)*4)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-600:oklch(57.7% .245 27.325);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-900:oklch(40.8% .123 38.172);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.my-4{margin-block:calc(var(--spacing)*4)}.my-8{margin-block:calc(var(--spacing)*8)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-6{margin-left:calc(var(--spacing)*6)}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-auto{height:auto}.w-3\/4{width:75%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-full{min-width:100%}.animate-pulse{animation:var(--animate-pulse)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-transparent{border-color:#0000}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-12{padding-block:calc(var(--spacing)*12)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-orange-500{color:var(--color-orange-500)}.text-red-600{color:var(--color-red-600)}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:underline:hover{text-decoration-line:underline}}@media (prefers-color-scheme:dark){.dark\:border-blue-400{border-color:var(--color-blue-400)}.dark\:border-gray-700{border-color:var(--color-gray-700)}.dark\:bg-gray-700{background-color:var(--color-gray-700)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-orange-900\/30{background-color:#7e2a0c4d}@supports (color:color-mix(in lab, red, red)){.dark\:bg-orange-900\/30{background-color:color-mix(in oklab,var(--color-orange-900)30%,transparent)}}.dark\:text-blue-400{color:var(--color-blue-400)}.dark\:text-gray-100{color:var(--color-gray-100)}.dark\:text-gray-300{color:var(--color-gray-300)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-orange-300{color:var(--color-orange-300)}.dark\:text-red-400{color:var(--color-red-400)}@media (hover:hover){.dark\:hover\:border-gray-600:hover{border-color:var(--color-gray-600)}.dark\:hover\:text-blue-300:hover{color:var(--color-blue-300)}}}.\[\&\>code\]\:block>code{display:block}.\[\&\>code\]\:p-4>code{padding:calc(var(--spacing)*4)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}
|