A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
version bump, fix styling again
+16
-14
+15
-13
lib/renderers/BlueskyProfileRenderer.tsx
+15
-13
lib/renderers/BlueskyProfileRenderer.tsx
···
71
71
{record.description}
72
72
</p>
73
73
)}
74
-
{websiteHref && websiteLabel && (
75
-
<div style={{ marginTop: 12 }}>
76
-
<a
77
-
href={websiteHref}
78
-
target="_blank"
79
-
rel="noopener noreferrer"
80
-
style={{ ...base.link, color: `var(--atproto-color-link)` }}
81
-
>
82
-
{websiteLabel}
83
-
</a>
84
-
</div>
85
-
)}
86
74
<div style={base.bottomRow}>
87
75
<div style={base.bottomLeft}>
88
76
{record.createdAt && (
89
77
<div style={{ ...base.meta, color: `var(--atproto-color-text-secondary)` }}>
90
78
Joined {new Date(record.createdAt).toLocaleDateString()}
91
79
</div>
80
+
)}
81
+
{websiteHref && websiteLabel && (
82
+
<a
83
+
href={websiteHref}
84
+
target="_blank"
85
+
rel="noopener noreferrer"
86
+
style={{ ...base.link, color: `var(--atproto-color-link)` }}
87
+
>
88
+
{websiteLabel}
89
+
</a>
92
90
)}
93
91
<a
94
92
href={profileUrl}
···
109
107
110
108
const base: Record<string, React.CSSProperties> = {
111
109
card: {
110
+
display: "flex",
111
+
flexDirection: "column",
112
+
height: "100%",
112
113
borderRadius: 12,
113
114
padding: 16,
114
115
fontFamily: "system-ui, sans-serif",
···
171
172
display: "flex",
172
173
alignItems: "flex-end",
173
174
justifyContent: "space-between",
174
-
marginTop: 12,
175
+
marginTop: "auto",
176
+
paddingTop: 12,
175
177
},
176
178
bottomLeft: {
177
179
display: "flex",