@@ -13,12 +13,14 @@ import {
13
13
WithTooltip ,
14
14
cn ,
15
15
} from "@rivet-gg/components" ;
16
- import { Icon , faExternalLinkAlt , faSparkle } from "@rivet-gg/icons" ;
16
+ import { Icon , faSparkle } from "@rivet-gg/icons" ;
17
17
import { useSuspenseQuery } from "@tanstack/react-query" ;
18
18
import { useLocalStorage } from "usehooks-ts" ;
19
19
import { NavItem } from "./nav-item" ;
20
20
21
- interface ChangelogEntryProps extends ChangelogItem { }
21
+ interface ChangelogEntryProps extends ChangelogItem {
22
+ isNew ?: boolean ;
23
+ }
22
24
23
25
export function ChangelogEntry ( {
24
26
published,
@@ -27,6 +29,7 @@ export function ChangelogEntry({
27
29
description,
28
30
slug,
29
31
authors,
32
+ isNew,
30
33
} : ChangelogEntryProps ) {
31
34
return (
32
35
< div className = "py-2" >
@@ -35,14 +38,25 @@ export function ChangelogEntry({
35
38
< div className = "bg-white text-background size-8 rounded-full flex items-center justify-center" >
36
39
< Icon icon = { faSparkle } className = "m-0" />
37
40
</ div >
38
- < h4 className = "font-bold text-lg" > New Update</ h4 >
41
+ < h4 className = "font-bold text-lg text-foreground" >
42
+ { isNew ? (
43
+ < span > New Update</ span >
44
+ ) : (
45
+ < span > Latest Update</ span >
46
+ ) }
47
+ </ h4 >
39
48
</ div >
40
49
< Badge variant = "outline" >
41
50
{ new Date ( published ) . toLocaleDateString ( ) }
42
51
</ Badge >
43
52
</ div >
44
53
45
- < div >
54
+ < a
55
+ href = { `https://rivet.gg/changelog/${ slug } ` }
56
+ target = "_blank"
57
+ rel = "noreferrer"
58
+ className = "block"
59
+ >
46
60
< Picture className = "rounded-md border my-4 h-[200px] w-full block overflow-hidden" >
47
61
< PictureFallback >
48
62
< Skeleton className = "size-full" />
@@ -57,41 +71,36 @@ export function ChangelogEntry({
57
71
< p className = "font-semibold text-sm" > { title } </ p >
58
72
59
73
< p className = "text-xs mt-1 text-muted-foreground" >
60
- { description }
74
+ { description } { " " }
75
+ < span className = "text-right text-xs inline gap-1.5 text-foreground items-center" >
76
+ Read more...
77
+ </ span >
78
+ </ p >
79
+ </ a >
80
+ < div className = "flex items-end justify-end mt-2" >
81
+ < div className = "flex gap-2 items-center" >
61
82
< a
62
- className = "text-right text-xs flex gap-1.5 text-foreground items-center"
63
- href = { `https://rivet.gg/changelog/${ slug } ` }
64
- target = "_blank"
65
- rel = "noreferrer"
83
+ className = "flex gap-1.5 items-center flex-row-reverse text-right"
84
+ href = { authors [ 0 ] . socials . twitter }
66
85
>
67
- Read more < Icon icon = { faExternalLinkAlt } />
86
+ < Avatar className = "size-8" >
87
+ < AvatarFallback >
88
+ { authors [ 0 ] . name [ 0 ] }
89
+ </ AvatarFallback >
90
+ < AvatarImage
91
+ src = { `https://rivet.gg/${ authors [ 0 ] . avatar . url } ` }
92
+ alt = { authors [ 0 ] . name }
93
+ />
94
+ </ Avatar >
95
+ < div className = "ml-2" >
96
+ < p className = "font-semibold text-sm" >
97
+ { authors [ 0 ] . name }
98
+ </ p >
99
+ < p className = "text-xs text-muted-foreground" >
100
+ { authors [ 0 ] . role }
101
+ </ p >
102
+ </ div >
68
103
</ a >
69
- </ p >
70
- < div className = "flex items-end justify-end mt-2" >
71
- < div className = "flex gap-2 items-center" >
72
- < a
73
- className = "flex gap-1.5 items-center flex-row-reverse text-right"
74
- href = { authors [ 0 ] . url }
75
- >
76
- < Avatar className = "size-8" >
77
- < AvatarFallback >
78
- { authors [ 0 ] . name [ 0 ] }
79
- </ AvatarFallback >
80
- < AvatarImage
81
- src = { `https://rivet.gg/${ authors [ 0 ] . avatar . url } ` }
82
- alt = { authors [ 0 ] . name }
83
- />
84
- </ Avatar >
85
- < div className = "ml-2" >
86
- < p className = "font-semibold text-sm" >
87
- { authors [ 0 ] . name }
88
- </ p >
89
- < p className = "text-xs text-muted-foreground" >
90
- { authors [ 0 ] . role }
91
- </ p >
92
- </ div >
93
- </ a >
94
- </ div >
95
104
</ div >
96
105
</ div >
97
106
</ div >
@@ -134,10 +143,6 @@ export function Changelog({ className }: ChangelogProps) {
134
143
</ NavItem >
135
144
) ;
136
145
137
- if ( data . length === 0 ) {
138
- return trigger ;
139
- }
140
-
141
146
return (
142
147
< WithTooltip
143
148
delayDuration = { 0 }
@@ -147,7 +152,7 @@ export function Changelog({ className }: ChangelogProps) {
147
152
}
148
153
} }
149
154
trigger = { trigger }
150
- content = { < ChangelogEntry { ...data [ 0 ] } /> }
155
+ content = { < ChangelogEntry { ...data [ 0 ] } isNew = { hasNewChangelog } /> }
151
156
/>
152
157
) ;
153
158
}
0 commit comments