WIP PWA for Grain
feat: add grain-gallery-card organism
+95
+95
src/components/organisms/grain-gallery-card.js
+95
src/components/organisms/grain-gallery-card.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import '../molecules/grain-author-chip.js';
3
+
import './grain-image-carousel.js';
4
+
import './grain-engagement-bar.js';
5
+
6
+
export class GrainGalleryCard extends LitElement {
7
+
static properties = {
8
+
gallery: { type: Object }
9
+
};
10
+
11
+
static styles = css`
12
+
:host {
13
+
display: block;
14
+
background: var(--color-bg-primary);
15
+
border-bottom: 1px solid var(--color-border);
16
+
}
17
+
.header {
18
+
padding: var(--space-sm) var(--space-md);
19
+
}
20
+
.content {
21
+
padding: var(--space-sm) var(--space-md) var(--space-md);
22
+
}
23
+
.title {
24
+
font-size: var(--font-size-sm);
25
+
font-weight: var(--font-weight-semibold);
26
+
color: var(--color-text-primary);
27
+
margin-bottom: var(--space-xs);
28
+
}
29
+
.description {
30
+
font-size: var(--font-size-sm);
31
+
color: var(--color-text-secondary);
32
+
display: -webkit-box;
33
+
-webkit-line-clamp: 2;
34
+
-webkit-box-orient: vertical;
35
+
overflow: hidden;
36
+
}
37
+
.timestamp {
38
+
font-size: var(--font-size-xs);
39
+
color: var(--color-text-secondary);
40
+
margin-top: var(--space-sm);
41
+
text-transform: uppercase;
42
+
}
43
+
`;
44
+
45
+
#formatDate(iso) {
46
+
const date = new Date(iso);
47
+
const now = new Date();
48
+
const diffMs = now - date;
49
+
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
50
+
51
+
if (diffDays === 0) return 'Today';
52
+
if (diffDays === 1) return 'Yesterday';
53
+
if (diffDays < 7) return `${diffDays} days ago`;
54
+
55
+
return date.toLocaleDateString('en-US', {
56
+
month: 'short',
57
+
day: 'numeric'
58
+
});
59
+
}
60
+
61
+
render() {
62
+
if (!this.gallery) return null;
63
+
64
+
const { gallery } = this;
65
+
66
+
return html`
67
+
<header class="header">
68
+
<grain-author-chip
69
+
avatarUrl=${gallery.avatarUrl || ''}
70
+
handle=${gallery.handle}
71
+
displayName=${gallery.displayName || ''}
72
+
></grain-author-chip>
73
+
</header>
74
+
75
+
<grain-image-carousel
76
+
.photos=${gallery.photos || []}
77
+
></grain-image-carousel>
78
+
79
+
<grain-engagement-bar
80
+
favoriteCount=${gallery.favoriteCount || 0}
81
+
commentCount=${gallery.commentCount || 0}
82
+
></grain-engagement-bar>
83
+
84
+
<div class="content">
85
+
<p class="title">${gallery.title}</p>
86
+
${gallery.description ? html`
87
+
<p class="description">${gallery.description}</p>
88
+
` : ''}
89
+
<time class="timestamp">${this.#formatDate(gallery.createdAt)}</time>
90
+
</div>
91
+
`;
92
+
}
93
+
}
94
+
95
+
customElements.define('grain-gallery-card', GrainGalleryCard);