-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtimeline.templ
124 lines (118 loc) · 3.61 KB
/
timeline.templ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
package components
import (
"github.com/Piszmog/pathwise/types"
"github.com/Piszmog/pathwise/utils"
)
templ Timeline(entries []types.JobApplicationTimelineEntry, oob string) {
<div id="timeline" class="flow-root" hx-swap-oob={ oob }>
@timelineList(entries)
</div>
}
templ timelineList(entries []types.JobApplicationTimelineEntry) {
<ul id="timeline-list" role="list" class="-mb-8">
for i, entry := range entries {
@TimelineEntry(entry, i == len(entries)-1)
}
</ul>
}
templ TimelineEntry(entry types.JobApplicationTimelineEntry, isLast bool) {
switch v := entry.(type) {
case types.JobApplicationStatusHistory:
@timelineEntryStatus(v, isLast)
case types.JobApplicationNote:
@timelineEntryNote(v, isLast)
}
}
templ timelineEntryStatus(entry types.JobApplicationStatusHistory, isLast bool) {
<li id={ utils.TimelineStatusRowID(entry.ID) } class="relative pb-8">
if !isLast {
<span class="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
}
<div class="relative flex items-start space-x-3">
<div>
<div class="relative px-1">
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-8 ring-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-tag"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="8.5" cy="8.5" r="1" fill="currentColor"></circle>
<path
d="M4 7v3.859c0 .537 .213 1.052 .593 1.432l8.116 8.116a2.025 2.025 0 0 0 2.864 0l4.834 -4.834a2.025 2.025 0 0 0 0 -2.864l-8.117 -8.116a2.025 2.025 0 0 0 -1.431 -.593h-3.859a3 3 0 0 0 -3 3z"
></path>
</svg>
</div>
</div>
</div>
<div class="min-w-0 flex-1 py-0">
<div class="text-sm leading-8 text-gray-500">
<span class="mr-0.5">Status Change </span>
<span class="mr-0.5 inline-flex">
@statusBadge(entry.Status)
</span>
<span class="whitespace-nowrap">{ entry.CreatedAt.Format("Mon Jan 2 2006") }</span>
</div>
</div>
</div>
</li>
}
templ timelineEntryNote(entry types.JobApplicationNote, isLast bool) {
<li id={ utils.TimelineNoteRowID(entry.ID) } class="relative pb-8">
if !isLast {
<span class="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
}
<div class="relative flex items-start space-x-3">
<div>
<div class="relative px-1">
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ring-8 ring-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-message"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 9h8"></path>
<path d="M8 13h6"></path>
<path
d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"
></path>
</svg>
</div>
</div>
</div>
<div class="min-w-0 flex-1">
<div>
<p class="mt-0.5 text-sm text-gray-500">
Note added
<span class="whitespace-nowrap">{ entry.CreatedAt.Format("Mon Jan 2 2006") }</span>
</p>
</div>
<div class="mt-2 text-sm text-gray-700">
<p>
{ entry.Note }
</p>
</div>
</div>
</div>
</li>
}