x-post-card 0.1.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.
- package/README.md +125 -0
- package/dist/index.cjs +463 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +105 -0
- package/dist/index.d.ts +105 -0
- package/dist/index.js +456 -0
- package/dist/index.js.map +1 -0
- package/package.json +58 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
/** Author information for a post */
|
|
4
|
+
interface Author {
|
|
5
|
+
name: string;
|
|
6
|
+
handle: string;
|
|
7
|
+
avatar: string;
|
|
8
|
+
verified: boolean;
|
|
9
|
+
}
|
|
10
|
+
/** Content of a post */
|
|
11
|
+
interface Content {
|
|
12
|
+
text: string;
|
|
13
|
+
images: string[];
|
|
14
|
+
}
|
|
15
|
+
/** Complete post data structure */
|
|
16
|
+
interface PostData {
|
|
17
|
+
author: Author;
|
|
18
|
+
content: Content;
|
|
19
|
+
timestamp: string;
|
|
20
|
+
}
|
|
21
|
+
/** Available color themes */
|
|
22
|
+
type Theme = 'light' | 'dim' | 'dark';
|
|
23
|
+
/** Shadow intensity levels */
|
|
24
|
+
type ShadowIntensity = 'flat' | 'raised' | 'floating' | 'elevated';
|
|
25
|
+
/** Theme style definitions */
|
|
26
|
+
interface ThemeStyles {
|
|
27
|
+
bg: string;
|
|
28
|
+
textPrimary: string;
|
|
29
|
+
textSecondary: string;
|
|
30
|
+
border: string;
|
|
31
|
+
accent: string;
|
|
32
|
+
imageInnerStroke: string;
|
|
33
|
+
shadowShallow: string;
|
|
34
|
+
shadowMedium: string;
|
|
35
|
+
shadowDeep: string;
|
|
36
|
+
}
|
|
37
|
+
/** Props for the XCard component */
|
|
38
|
+
interface XCardProps {
|
|
39
|
+
/** The X post URL to display (required) */
|
|
40
|
+
url: string;
|
|
41
|
+
/** Color theme (default: 'light') */
|
|
42
|
+
theme?: Theme;
|
|
43
|
+
/** Shadow intensity (default: 'floating') */
|
|
44
|
+
shadow?: ShadowIntensity;
|
|
45
|
+
/** Card width in pixels (default: 450, range: 350-700) */
|
|
46
|
+
width?: number;
|
|
47
|
+
/** Border radius in pixels (default: 20, range: 0-24) */
|
|
48
|
+
radius?: number;
|
|
49
|
+
/** API endpoint override (defaults to hosted API) */
|
|
50
|
+
apiUrl?: string;
|
|
51
|
+
/** Custom className for the wrapper */
|
|
52
|
+
className?: string;
|
|
53
|
+
/** Loading placeholder */
|
|
54
|
+
fallback?: React.ReactNode;
|
|
55
|
+
/** Error callback */
|
|
56
|
+
onError?: (error: Error) => void;
|
|
57
|
+
/** Load callback with post data */
|
|
58
|
+
onLoad?: (post: PostData) => void;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* XCard - Embed beautifully styled X (Twitter) post cards in your React app.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```tsx
|
|
66
|
+
* import { XCard } from 'x-post-card'
|
|
67
|
+
*
|
|
68
|
+
* function MyComponent() {
|
|
69
|
+
* return (
|
|
70
|
+
* <XCard
|
|
71
|
+
* url="https://x.com/elonmusk/status/123456789"
|
|
72
|
+
* theme="dark"
|
|
73
|
+
* shadow="floating"
|
|
74
|
+
* width={450}
|
|
75
|
+
* radius={20}
|
|
76
|
+
* />
|
|
77
|
+
* )
|
|
78
|
+
* }
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
declare function XCard({ url, theme, shadow, width, radius, apiUrl, className, fallback, onError, onLoad, }: XCardProps): react_jsx_runtime.JSX.Element | null;
|
|
82
|
+
|
|
83
|
+
interface PostCardProps {
|
|
84
|
+
post: PostData;
|
|
85
|
+
theme: ThemeStyles;
|
|
86
|
+
shadow: ShadowIntensity;
|
|
87
|
+
width: number;
|
|
88
|
+
radius: number;
|
|
89
|
+
}
|
|
90
|
+
/** Default loading skeleton */
|
|
91
|
+
declare function PostCardSkeleton({ width, radius }: {
|
|
92
|
+
width: number;
|
|
93
|
+
radius: number;
|
|
94
|
+
}): react_jsx_runtime.JSX.Element;
|
|
95
|
+
/** The styled post card component */
|
|
96
|
+
declare function PostCard({ post, theme, shadow, width, radius }: PostCardProps): react_jsx_runtime.JSX.Element;
|
|
97
|
+
|
|
98
|
+
/** Theme color configurations */
|
|
99
|
+
declare const themeConfig: Record<Theme, ThemeStyles>;
|
|
100
|
+
/** Get theme styles for a given theme */
|
|
101
|
+
declare function getThemeStyles(theme: Theme): ThemeStyles;
|
|
102
|
+
/** Get the appropriate shadow value for an intensity level */
|
|
103
|
+
declare function getShadowForIntensity(theme: ThemeStyles, intensity: ShadowIntensity): string;
|
|
104
|
+
|
|
105
|
+
export { type Author, type Content, PostCard, PostCardSkeleton, type PostData, type ShadowIntensity, type Theme, type ThemeStyles, XCard, type XCardProps, getShadowForIntensity, getThemeStyles, themeConfig };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
/** Author information for a post */
|
|
4
|
+
interface Author {
|
|
5
|
+
name: string;
|
|
6
|
+
handle: string;
|
|
7
|
+
avatar: string;
|
|
8
|
+
verified: boolean;
|
|
9
|
+
}
|
|
10
|
+
/** Content of a post */
|
|
11
|
+
interface Content {
|
|
12
|
+
text: string;
|
|
13
|
+
images: string[];
|
|
14
|
+
}
|
|
15
|
+
/** Complete post data structure */
|
|
16
|
+
interface PostData {
|
|
17
|
+
author: Author;
|
|
18
|
+
content: Content;
|
|
19
|
+
timestamp: string;
|
|
20
|
+
}
|
|
21
|
+
/** Available color themes */
|
|
22
|
+
type Theme = 'light' | 'dim' | 'dark';
|
|
23
|
+
/** Shadow intensity levels */
|
|
24
|
+
type ShadowIntensity = 'flat' | 'raised' | 'floating' | 'elevated';
|
|
25
|
+
/** Theme style definitions */
|
|
26
|
+
interface ThemeStyles {
|
|
27
|
+
bg: string;
|
|
28
|
+
textPrimary: string;
|
|
29
|
+
textSecondary: string;
|
|
30
|
+
border: string;
|
|
31
|
+
accent: string;
|
|
32
|
+
imageInnerStroke: string;
|
|
33
|
+
shadowShallow: string;
|
|
34
|
+
shadowMedium: string;
|
|
35
|
+
shadowDeep: string;
|
|
36
|
+
}
|
|
37
|
+
/** Props for the XCard component */
|
|
38
|
+
interface XCardProps {
|
|
39
|
+
/** The X post URL to display (required) */
|
|
40
|
+
url: string;
|
|
41
|
+
/** Color theme (default: 'light') */
|
|
42
|
+
theme?: Theme;
|
|
43
|
+
/** Shadow intensity (default: 'floating') */
|
|
44
|
+
shadow?: ShadowIntensity;
|
|
45
|
+
/** Card width in pixels (default: 450, range: 350-700) */
|
|
46
|
+
width?: number;
|
|
47
|
+
/** Border radius in pixels (default: 20, range: 0-24) */
|
|
48
|
+
radius?: number;
|
|
49
|
+
/** API endpoint override (defaults to hosted API) */
|
|
50
|
+
apiUrl?: string;
|
|
51
|
+
/** Custom className for the wrapper */
|
|
52
|
+
className?: string;
|
|
53
|
+
/** Loading placeholder */
|
|
54
|
+
fallback?: React.ReactNode;
|
|
55
|
+
/** Error callback */
|
|
56
|
+
onError?: (error: Error) => void;
|
|
57
|
+
/** Load callback with post data */
|
|
58
|
+
onLoad?: (post: PostData) => void;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* XCard - Embed beautifully styled X (Twitter) post cards in your React app.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* ```tsx
|
|
66
|
+
* import { XCard } from 'x-post-card'
|
|
67
|
+
*
|
|
68
|
+
* function MyComponent() {
|
|
69
|
+
* return (
|
|
70
|
+
* <XCard
|
|
71
|
+
* url="https://x.com/elonmusk/status/123456789"
|
|
72
|
+
* theme="dark"
|
|
73
|
+
* shadow="floating"
|
|
74
|
+
* width={450}
|
|
75
|
+
* radius={20}
|
|
76
|
+
* />
|
|
77
|
+
* )
|
|
78
|
+
* }
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
declare function XCard({ url, theme, shadow, width, radius, apiUrl, className, fallback, onError, onLoad, }: XCardProps): react_jsx_runtime.JSX.Element | null;
|
|
82
|
+
|
|
83
|
+
interface PostCardProps {
|
|
84
|
+
post: PostData;
|
|
85
|
+
theme: ThemeStyles;
|
|
86
|
+
shadow: ShadowIntensity;
|
|
87
|
+
width: number;
|
|
88
|
+
radius: number;
|
|
89
|
+
}
|
|
90
|
+
/** Default loading skeleton */
|
|
91
|
+
declare function PostCardSkeleton({ width, radius }: {
|
|
92
|
+
width: number;
|
|
93
|
+
radius: number;
|
|
94
|
+
}): react_jsx_runtime.JSX.Element;
|
|
95
|
+
/** The styled post card component */
|
|
96
|
+
declare function PostCard({ post, theme, shadow, width, radius }: PostCardProps): react_jsx_runtime.JSX.Element;
|
|
97
|
+
|
|
98
|
+
/** Theme color configurations */
|
|
99
|
+
declare const themeConfig: Record<Theme, ThemeStyles>;
|
|
100
|
+
/** Get theme styles for a given theme */
|
|
101
|
+
declare function getThemeStyles(theme: Theme): ThemeStyles;
|
|
102
|
+
/** Get the appropriate shadow value for an intensity level */
|
|
103
|
+
declare function getShadowForIntensity(theme: ThemeStyles, intensity: ShadowIntensity): string;
|
|
104
|
+
|
|
105
|
+
export { type Author, type Content, PostCard, PostCardSkeleton, type PostData, type ShadowIntensity, type Theme, type ThemeStyles, XCard, type XCardProps, getShadowForIntensity, getThemeStyles, themeConfig };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,456 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
// src/XCard.tsx
|
|
5
|
+
|
|
6
|
+
// src/themes.ts
|
|
7
|
+
var themeConfig = {
|
|
8
|
+
light: {
|
|
9
|
+
bg: "#FFFFFF",
|
|
10
|
+
textPrimary: "#000000",
|
|
11
|
+
textSecondary: "#666666",
|
|
12
|
+
border: "#E6E6E6",
|
|
13
|
+
accent: "#1D9BF0",
|
|
14
|
+
imageInnerStroke: "rgba(0, 0, 0, 0.08)",
|
|
15
|
+
shadowShallow: "0 1px 3px rgba(0, 0, 0, 0.06)",
|
|
16
|
+
shadowMedium: "0 2px 8px rgba(0, 0, 0, 0.08)",
|
|
17
|
+
shadowDeep: "0 4px 16px rgba(0, 0, 0, 0.12)"
|
|
18
|
+
},
|
|
19
|
+
dim: {
|
|
20
|
+
bg: "#15202B",
|
|
21
|
+
textPrimary: "#F2F2F2",
|
|
22
|
+
textSecondary: "#8899A6",
|
|
23
|
+
border: "#38444D",
|
|
24
|
+
accent: "#1D9BF0",
|
|
25
|
+
imageInnerStroke: "rgba(255, 255, 255, 0.08)",
|
|
26
|
+
shadowShallow: "0 1px 3px rgba(0, 0, 0, 0.2)",
|
|
27
|
+
shadowMedium: "0 2px 8px rgba(0, 0, 0, 0.25)",
|
|
28
|
+
shadowDeep: "0 4px 16px rgba(0, 0, 0, 0.3)"
|
|
29
|
+
},
|
|
30
|
+
dark: {
|
|
31
|
+
bg: "#000000",
|
|
32
|
+
textPrimary: "#FFFFFF",
|
|
33
|
+
textSecondary: "#71767B",
|
|
34
|
+
border: "#2F3336",
|
|
35
|
+
accent: "#1D9BF0",
|
|
36
|
+
imageInnerStroke: "rgba(255, 255, 255, 0.08)",
|
|
37
|
+
shadowShallow: "0 1px 3px rgba(0, 0, 0, 0.3)",
|
|
38
|
+
shadowMedium: "0 2px 8px rgba(0, 0, 0, 0.35)",
|
|
39
|
+
shadowDeep: "0 4px 16px rgba(0, 0, 0, 0.4)"
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
function getThemeStyles(theme) {
|
|
43
|
+
return themeConfig[theme];
|
|
44
|
+
}
|
|
45
|
+
function getShadowForIntensity(theme, intensity) {
|
|
46
|
+
switch (intensity) {
|
|
47
|
+
case "flat":
|
|
48
|
+
return "none";
|
|
49
|
+
case "raised":
|
|
50
|
+
return theme.shadowShallow;
|
|
51
|
+
case "floating":
|
|
52
|
+
return theme.shadowMedium;
|
|
53
|
+
case "elevated":
|
|
54
|
+
return theme.shadowDeep;
|
|
55
|
+
default:
|
|
56
|
+
return theme.shadowMedium;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function VerifiedBadge({ color }) {
|
|
60
|
+
return /* @__PURE__ */ jsx(
|
|
61
|
+
"svg",
|
|
62
|
+
{
|
|
63
|
+
width: 16,
|
|
64
|
+
height: 16,
|
|
65
|
+
viewBox: "0 0 24 24",
|
|
66
|
+
fill: color,
|
|
67
|
+
"aria-hidden": "true",
|
|
68
|
+
style: { flexShrink: 0 },
|
|
69
|
+
children: /* @__PURE__ */ jsx("path", { d: "M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z" })
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
function PostCardSkeleton({ width, radius }) {
|
|
74
|
+
return /* @__PURE__ */ jsxs(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
style: {
|
|
78
|
+
width,
|
|
79
|
+
padding: 24,
|
|
80
|
+
borderRadius: radius,
|
|
81
|
+
backgroundColor: "#f3f4f6",
|
|
82
|
+
animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
|
|
83
|
+
},
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }, children: [
|
|
86
|
+
/* @__PURE__ */ jsx(
|
|
87
|
+
"div",
|
|
88
|
+
{
|
|
89
|
+
style: {
|
|
90
|
+
width: 48,
|
|
91
|
+
height: 48,
|
|
92
|
+
borderRadius: "50%",
|
|
93
|
+
backgroundColor: "#e5e7eb"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
98
|
+
/* @__PURE__ */ jsx(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
style: {
|
|
102
|
+
width: "60%",
|
|
103
|
+
height: 16,
|
|
104
|
+
borderRadius: 4,
|
|
105
|
+
backgroundColor: "#e5e7eb",
|
|
106
|
+
marginBottom: 8
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
),
|
|
110
|
+
/* @__PURE__ */ jsx(
|
|
111
|
+
"div",
|
|
112
|
+
{
|
|
113
|
+
style: {
|
|
114
|
+
width: "40%",
|
|
115
|
+
height: 14,
|
|
116
|
+
borderRadius: 4,
|
|
117
|
+
backgroundColor: "#e5e7eb"
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
] })
|
|
122
|
+
] }),
|
|
123
|
+
/* @__PURE__ */ jsx(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
style: {
|
|
127
|
+
width: "100%",
|
|
128
|
+
height: 60,
|
|
129
|
+
borderRadius: 4,
|
|
130
|
+
backgroundColor: "#e5e7eb"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
function PostCard({ post, theme, shadow, width, radius }) {
|
|
139
|
+
const hasImages = post.content.images.length > 0;
|
|
140
|
+
const CARD_PADDING = 24;
|
|
141
|
+
const nestedRadius = hasImages ? Math.max(0, radius - CARD_PADDING) : 16;
|
|
142
|
+
const boxShadow = getShadowForIntensity(theme, shadow);
|
|
143
|
+
return /* @__PURE__ */ jsxs(
|
|
144
|
+
"div",
|
|
145
|
+
{
|
|
146
|
+
style: {
|
|
147
|
+
width,
|
|
148
|
+
padding: CARD_PADDING,
|
|
149
|
+
backgroundColor: theme.bg,
|
|
150
|
+
borderWidth: 1,
|
|
151
|
+
borderStyle: "solid",
|
|
152
|
+
borderColor: theme.border,
|
|
153
|
+
borderRadius: radius,
|
|
154
|
+
boxShadow,
|
|
155
|
+
boxSizing: "border-box",
|
|
156
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
|
|
157
|
+
},
|
|
158
|
+
children: [
|
|
159
|
+
/* @__PURE__ */ jsxs(
|
|
160
|
+
"div",
|
|
161
|
+
{
|
|
162
|
+
style: {
|
|
163
|
+
display: "flex",
|
|
164
|
+
alignItems: "center",
|
|
165
|
+
gap: 12,
|
|
166
|
+
marginBottom: 16
|
|
167
|
+
},
|
|
168
|
+
children: [
|
|
169
|
+
/* @__PURE__ */ jsxs(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
style: {
|
|
173
|
+
position: "relative",
|
|
174
|
+
width: 48,
|
|
175
|
+
height: 48,
|
|
176
|
+
borderRadius: "50%",
|
|
177
|
+
overflow: "hidden",
|
|
178
|
+
flexShrink: 0
|
|
179
|
+
},
|
|
180
|
+
children: [
|
|
181
|
+
post.author.avatar ? /* @__PURE__ */ jsx(
|
|
182
|
+
"img",
|
|
183
|
+
{
|
|
184
|
+
src: post.author.avatar,
|
|
185
|
+
alt: post.author.name,
|
|
186
|
+
style: {
|
|
187
|
+
width: "100%",
|
|
188
|
+
height: "100%",
|
|
189
|
+
objectFit: "cover"
|
|
190
|
+
},
|
|
191
|
+
crossOrigin: "anonymous",
|
|
192
|
+
referrerPolicy: "no-referrer"
|
|
193
|
+
}
|
|
194
|
+
) : /* @__PURE__ */ jsx(
|
|
195
|
+
"div",
|
|
196
|
+
{
|
|
197
|
+
style: {
|
|
198
|
+
width: "100%",
|
|
199
|
+
height: "100%",
|
|
200
|
+
display: "flex",
|
|
201
|
+
alignItems: "center",
|
|
202
|
+
justifyContent: "center",
|
|
203
|
+
backgroundColor: theme.border,
|
|
204
|
+
color: theme.textSecondary,
|
|
205
|
+
fontSize: 20,
|
|
206
|
+
fontWeight: 700
|
|
207
|
+
},
|
|
208
|
+
children: post.author.name.charAt(0)
|
|
209
|
+
}
|
|
210
|
+
),
|
|
211
|
+
/* @__PURE__ */ jsx(
|
|
212
|
+
"div",
|
|
213
|
+
{
|
|
214
|
+
style: {
|
|
215
|
+
position: "absolute",
|
|
216
|
+
inset: 0,
|
|
217
|
+
borderRadius: "50%",
|
|
218
|
+
boxShadow: `inset 0 0 0 1px ${theme.imageInnerStroke}`,
|
|
219
|
+
pointerEvents: "none"
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
)
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
),
|
|
226
|
+
/* @__PURE__ */ jsxs(
|
|
227
|
+
"div",
|
|
228
|
+
{
|
|
229
|
+
style: {
|
|
230
|
+
flex: 1,
|
|
231
|
+
minWidth: 0,
|
|
232
|
+
display: "flex",
|
|
233
|
+
flexDirection: "column",
|
|
234
|
+
justifyContent: "center",
|
|
235
|
+
gap: 2
|
|
236
|
+
},
|
|
237
|
+
children: [
|
|
238
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
|
|
239
|
+
/* @__PURE__ */ jsx(
|
|
240
|
+
"span",
|
|
241
|
+
{
|
|
242
|
+
style: {
|
|
243
|
+
fontWeight: 700,
|
|
244
|
+
fontSize: 16,
|
|
245
|
+
color: theme.textPrimary,
|
|
246
|
+
overflow: "hidden",
|
|
247
|
+
textOverflow: "ellipsis",
|
|
248
|
+
whiteSpace: "nowrap"
|
|
249
|
+
},
|
|
250
|
+
children: post.author.name
|
|
251
|
+
}
|
|
252
|
+
),
|
|
253
|
+
post.author.verified && /* @__PURE__ */ jsx(VerifiedBadge, { color: theme.accent })
|
|
254
|
+
] }),
|
|
255
|
+
/* @__PURE__ */ jsx(
|
|
256
|
+
"span",
|
|
257
|
+
{
|
|
258
|
+
style: {
|
|
259
|
+
fontSize: 14,
|
|
260
|
+
color: theme.textSecondary
|
|
261
|
+
},
|
|
262
|
+
children: post.author.handle
|
|
263
|
+
}
|
|
264
|
+
)
|
|
265
|
+
]
|
|
266
|
+
}
|
|
267
|
+
)
|
|
268
|
+
]
|
|
269
|
+
}
|
|
270
|
+
),
|
|
271
|
+
/* @__PURE__ */ jsx("div", { style: { marginBottom: hasImages ? 16 : 0 }, children: /* @__PURE__ */ jsx(
|
|
272
|
+
"p",
|
|
273
|
+
{
|
|
274
|
+
style: {
|
|
275
|
+
margin: 0,
|
|
276
|
+
fontSize: 16,
|
|
277
|
+
lineHeight: 1.5,
|
|
278
|
+
color: theme.textPrimary,
|
|
279
|
+
whiteSpace: "pre-wrap",
|
|
280
|
+
wordBreak: "break-word"
|
|
281
|
+
},
|
|
282
|
+
children: post.content.text
|
|
283
|
+
}
|
|
284
|
+
) }),
|
|
285
|
+
hasImages && /* @__PURE__ */ jsx("div", { style: { marginLeft: -24, marginRight: -24, paddingLeft: 24, paddingRight: 24 }, children: /* @__PURE__ */ jsx(
|
|
286
|
+
"div",
|
|
287
|
+
{
|
|
288
|
+
style: {
|
|
289
|
+
display: "grid",
|
|
290
|
+
gap: 8,
|
|
291
|
+
gridTemplateColumns: post.content.images.length === 1 ? "1fr" : "1fr 1fr"
|
|
292
|
+
},
|
|
293
|
+
children: post.content.images.map((image, index) => {
|
|
294
|
+
const count = post.content.images.length;
|
|
295
|
+
const isThirdImage = count === 3 && index === 2;
|
|
296
|
+
return /* @__PURE__ */ jsxs(
|
|
297
|
+
"div",
|
|
298
|
+
{
|
|
299
|
+
style: {
|
|
300
|
+
position: "relative",
|
|
301
|
+
width: "100%",
|
|
302
|
+
overflow: "hidden",
|
|
303
|
+
borderRadius: nestedRadius,
|
|
304
|
+
aspectRatio: count === 1 ? "16/9" : isThirdImage ? "16/9" : "1",
|
|
305
|
+
gridColumn: isThirdImage ? "span 2" : void 0
|
|
306
|
+
},
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ jsx(
|
|
309
|
+
"img",
|
|
310
|
+
{
|
|
311
|
+
src: image,
|
|
312
|
+
alt: `Post image ${index + 1}`,
|
|
313
|
+
style: {
|
|
314
|
+
position: "absolute",
|
|
315
|
+
inset: 0,
|
|
316
|
+
width: "100%",
|
|
317
|
+
height: "100%",
|
|
318
|
+
objectFit: "cover",
|
|
319
|
+
objectPosition: "center"
|
|
320
|
+
},
|
|
321
|
+
crossOrigin: "anonymous",
|
|
322
|
+
referrerPolicy: "no-referrer"
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
/* @__PURE__ */ jsx(
|
|
326
|
+
"div",
|
|
327
|
+
{
|
|
328
|
+
style: {
|
|
329
|
+
position: "absolute",
|
|
330
|
+
inset: 0,
|
|
331
|
+
borderRadius: nestedRadius,
|
|
332
|
+
boxShadow: `inset 0 0 0 1px ${theme.imageInnerStroke}`,
|
|
333
|
+
pointerEvents: "none"
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
)
|
|
337
|
+
]
|
|
338
|
+
},
|
|
339
|
+
index
|
|
340
|
+
);
|
|
341
|
+
})
|
|
342
|
+
}
|
|
343
|
+
) })
|
|
344
|
+
]
|
|
345
|
+
}
|
|
346
|
+
);
|
|
347
|
+
}
|
|
348
|
+
var DEFAULT_API_URL = "https://x-post-card.vercel.app/api/scrape-post";
|
|
349
|
+
function clamp(value, min, max) {
|
|
350
|
+
return Math.min(max, Math.max(min, value));
|
|
351
|
+
}
|
|
352
|
+
function ErrorDisplay({
|
|
353
|
+
error,
|
|
354
|
+
width,
|
|
355
|
+
radius
|
|
356
|
+
}) {
|
|
357
|
+
return /* @__PURE__ */ jsxs(
|
|
358
|
+
"div",
|
|
359
|
+
{
|
|
360
|
+
style: {
|
|
361
|
+
width,
|
|
362
|
+
padding: 24,
|
|
363
|
+
borderRadius: radius,
|
|
364
|
+
backgroundColor: "#fef2f2",
|
|
365
|
+
border: "1px solid #fecaca",
|
|
366
|
+
color: "#dc2626",
|
|
367
|
+
fontSize: 14,
|
|
368
|
+
textAlign: "center",
|
|
369
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
|
|
370
|
+
},
|
|
371
|
+
children: [
|
|
372
|
+
/* @__PURE__ */ jsx("p", { style: { margin: 0, fontWeight: 500 }, children: "Failed to load post" }),
|
|
373
|
+
/* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", opacity: 0.8, fontSize: 13 }, children: error.message })
|
|
374
|
+
]
|
|
375
|
+
}
|
|
376
|
+
);
|
|
377
|
+
}
|
|
378
|
+
function XCard({
|
|
379
|
+
url,
|
|
380
|
+
theme = "light",
|
|
381
|
+
shadow = "floating",
|
|
382
|
+
width = 450,
|
|
383
|
+
radius = 20,
|
|
384
|
+
apiUrl = DEFAULT_API_URL,
|
|
385
|
+
className,
|
|
386
|
+
fallback,
|
|
387
|
+
onError,
|
|
388
|
+
onLoad
|
|
389
|
+
}) {
|
|
390
|
+
const [post, setPost] = useState(null);
|
|
391
|
+
const [error, setError] = useState(null);
|
|
392
|
+
const [loading, setLoading] = useState(true);
|
|
393
|
+
const clampedWidth = clamp(width, 350, 700);
|
|
394
|
+
const clampedRadius = clamp(radius, 0, 24);
|
|
395
|
+
const themeStyles = getThemeStyles(theme);
|
|
396
|
+
useEffect(() => {
|
|
397
|
+
let cancelled = false;
|
|
398
|
+
async function fetchPost() {
|
|
399
|
+
setLoading(true);
|
|
400
|
+
setError(null);
|
|
401
|
+
try {
|
|
402
|
+
const response = await fetch(apiUrl, {
|
|
403
|
+
method: "POST",
|
|
404
|
+
headers: {
|
|
405
|
+
"Content-Type": "application/json"
|
|
406
|
+
},
|
|
407
|
+
body: JSON.stringify({ url })
|
|
408
|
+
});
|
|
409
|
+
if (!response.ok) {
|
|
410
|
+
const errorData = await response.json().catch(() => ({}));
|
|
411
|
+
throw new Error(errorData.error || `Failed to fetch post (${response.status})`);
|
|
412
|
+
}
|
|
413
|
+
const data = await response.json();
|
|
414
|
+
if (cancelled) return;
|
|
415
|
+
setPost(data);
|
|
416
|
+
onLoad?.(data);
|
|
417
|
+
} catch (err) {
|
|
418
|
+
if (cancelled) return;
|
|
419
|
+
const error2 = err instanceof Error ? err : new Error("Unknown error occurred");
|
|
420
|
+
setError(error2);
|
|
421
|
+
onError?.(error2);
|
|
422
|
+
} finally {
|
|
423
|
+
if (!cancelled) {
|
|
424
|
+
setLoading(false);
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
fetchPost();
|
|
429
|
+
return () => {
|
|
430
|
+
cancelled = true;
|
|
431
|
+
};
|
|
432
|
+
}, [url, apiUrl, onError, onLoad]);
|
|
433
|
+
if (loading) {
|
|
434
|
+
return /* @__PURE__ */ jsx("div", { className, children: fallback || /* @__PURE__ */ jsx(PostCardSkeleton, { width: clampedWidth, radius: clampedRadius }) });
|
|
435
|
+
}
|
|
436
|
+
if (error) {
|
|
437
|
+
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ErrorDisplay, { error, width: clampedWidth, radius: clampedRadius }) });
|
|
438
|
+
}
|
|
439
|
+
if (post) {
|
|
440
|
+
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
|
|
441
|
+
PostCard,
|
|
442
|
+
{
|
|
443
|
+
post,
|
|
444
|
+
theme: themeStyles,
|
|
445
|
+
shadow,
|
|
446
|
+
width: clampedWidth,
|
|
447
|
+
radius: clampedRadius
|
|
448
|
+
}
|
|
449
|
+
) });
|
|
450
|
+
}
|
|
451
|
+
return null;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
export { PostCard, PostCardSkeleton, XCard, getShadowForIntensity, getThemeStyles, themeConfig };
|
|
455
|
+
//# sourceMappingURL=index.js.map
|
|
456
|
+
//# sourceMappingURL=index.js.map
|