grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
update timeline styles
+38
-35
+38
-35
main.tsx
+38
-35
main.tsx
···
1070
1070
heading={
1071
1071
<h1 class="font-['Jersey_20'] text-4xl text-zinc-900 dark:text-white">
1072
1072
grain
1073
-
<sub class="bottom-[0.75rem] text-[1rem]">beta</sub>
1073
+
<sub class="bottom-[0.75rem] text-[1rem] text-sky-500">
1074
+
beta
1075
+
</sub>
1074
1076
</h1>
1075
1077
}
1076
1078
profile={profile}
···
1153
1155
function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
1154
1156
return (
1155
1157
<li class="space-y-2">
1156
-
<div class="bg-zinc-100 dark:bg-zinc-900 w-fit p-2">
1157
-
<a
1158
-
href={profileLink(item.actor.handle)}
1159
-
class="font-semibold hover:underline"
1160
-
>
1161
-
@{item.actor.handle}
1162
-
</a>{" "}
1163
-
{item.itemType === "favorite" ? "favorited" : "created"}{" "}
1164
-
<a
1165
-
href={galleryLink(
1166
-
item.gallery.creator.handle,
1167
-
new AtUri(item.gallery.uri).rkey,
1168
-
)}
1169
-
class="font-semibold hover:underline"
1170
-
>
1171
-
{(item.gallery.record as Gallery).title}
1172
-
</a>
1173
-
<span class="ml-1">
1174
-
{formatDistanceStrict(item.createdAt, new Date(), {
1175
-
addSuffix: true,
1176
-
})}
1177
-
</span>
1178
-
</div>
1179
-
<a
1180
-
href={galleryLink(
1181
-
item.gallery.creator.handle,
1182
-
new AtUri(item.gallery.uri).rkey,
1183
-
)}
1184
-
class="w-fit flex"
1185
-
>
1158
+
<div class="w-fit flex flex-col bg-zinc-100 dark:bg-zinc-900 p-2 gap-2">
1186
1159
{item.gallery.items?.filter(isPhotoView).length
1187
1160
? (
1188
-
<div class="flex w-full max-w-md mx-auto aspect-[3/2] overflow-hidden gap-2">
1161
+
<a
1162
+
href={galleryLink(
1163
+
item.gallery.creator.handle,
1164
+
new AtUri(item.gallery.uri).rkey,
1165
+
)}
1166
+
class="flex w-full max-w-md mx-auto aspect-[3/2] overflow-hidden gap-2"
1167
+
>
1189
1168
<div class="w-2/3 h-full">
1190
1169
<img
1191
1170
src={item.gallery.items?.filter(isPhotoView)[0].thumb}
···
1223
1202
)}
1224
1203
</div>
1225
1204
</div>
1226
-
</div>
1205
+
</a>
1227
1206
)
1228
1207
: null}
1229
-
</a>
1208
+
<p>
1209
+
<a
1210
+
href={profileLink(item.actor.handle)}
1211
+
class="font-semibold hover:underline"
1212
+
>
1213
+
@{item.actor.handle}
1214
+
</a>{" "}
1215
+
{item.itemType === "favorite" ? "favorited" : "created"}{" "}
1216
+
<a
1217
+
href={galleryLink(
1218
+
item.gallery.creator.handle,
1219
+
new AtUri(item.gallery.uri).rkey,
1220
+
)}
1221
+
class="font-semibold hover:underline"
1222
+
>
1223
+
{(item.gallery.record as Gallery).title}
1224
+
</a>
1225
+
<span class="ml-1">
1226
+
{formatDistanceStrict(item.createdAt, new Date(), {
1227
+
addSuffix: true,
1228
+
})}
1229
+
</span>
1230
+
</p>
1231
+
</div>
1230
1232
</li>
1231
1233
);
1232
1234
}
···
1391
1393
{gallery.items?.length
1392
1394
? (
1393
1395
<img
1394
-
src={gallery.items?.filter(isPhotoView)?.[0]?.thumb}
1396
+
src={gallery.items?.filter(isPhotoView)?.[0]
1397
+
?.fullsize}
1395
1398
alt={gallery.items?.filter(isPhotoView)?.[0]?.alt}
1396
1399
class="w-full h-full object-cover"
1397
1400
/>