1
- import React , { useState , useEffect } from ' react' ;
1
+ import React , { useState , useEffect } from " react" ;
2
2
import { getPagesUnderRoute } from "nextra/context" ;
3
- import ExtendedButton from ' /components/ExtendedButton/ExtendedButton'
3
+ import ExtendedButton from " /components/ExtendedButton/ExtendedButton" ;
4
4
import Link from "next/link" ;
5
5
6
6
const renderMedia = ( page ) => {
7
7
if ( page . frontMatter ?. thumbnail ) {
8
- return < img src = { page . frontMatter . thumbnail }
9
- alt = "Thumbnail"
10
- style = { { maxWidth : '560px' , width :"100%" , borderRadius : "16px" , marginBottom : "16px" } }
11
- className = "max-w-full h-auto" /> ;
8
+ return (
9
+ < img
10
+ src = { page . frontMatter . thumbnail }
11
+ alt = "Thumbnail"
12
+ style = { {
13
+ maxWidth : "560px" ,
14
+ width : "100%" ,
15
+ borderRadius : "16px" ,
16
+ marginBottom : "16px" ,
17
+ } }
18
+ className = "max-w-full h-auto"
19
+ />
20
+ ) ;
12
21
} else if ( page . frontMatter ?. video ) {
13
22
const videoURL = page . frontMatter . video ;
14
23
let embedURL ;
15
24
16
25
if ( videoURL . includes ( "youtube.com" ) || videoURL . includes ( "youtu.be" ) ) {
17
- const videoId = videoURL . split ( 'v=' ) [ 1 ] ? videoURL . split ( 'v=' ) [ 1 ] . split ( '&' ) [ 0 ] : videoURL . split ( '/' ) . pop ( ) ;
26
+ const videoId = videoURL . split ( "v=" ) [ 1 ]
27
+ ? videoURL . split ( "v=" ) [ 1 ] . split ( "&" ) [ 0 ]
28
+ : videoURL . split ( "/" ) . pop ( ) ;
18
29
embedURL = `https://www.youtube.com/embed/${ videoId } ` ;
19
30
} else if ( videoURL . includes ( "loom.com" ) ) {
20
- const videoId = videoURL . split ( '/' ) . pop ( ) ;
31
+ const videoId = videoURL . split ( "/" ) . pop ( ) ;
21
32
embedURL = `https://www.loom.com/embed/${ videoId } ?hideEmbedTopBar=true` ;
22
33
}
23
34
24
35
return (
25
36
< iframe
26
37
src = { embedURL }
27
- style = { { maxWidth :"560px" , width :"100%" , aspectRatio : 16 / 9 , height :"auto" , borderRadius : "16px" , marginBottom : "16px" } }
38
+ style = { {
39
+ maxWidth : "560px" ,
40
+ width : "100%" ,
41
+ aspectRatio : 16 / 9 ,
42
+ height : "auto" ,
43
+ borderRadius : "16px" ,
44
+ marginBottom : "16px" ,
45
+ } }
28
46
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
29
47
allowFullScreen
30
48
title = "Video"
@@ -43,67 +61,60 @@ export default function ChangelogIndex({ more = "Read more" }) {
43
61
// Load initial or additional pages
44
62
useEffect ( ( ) => {
45
63
const morePages = allPages . slice ( pageIndex , pageIndex + itemsPerPage ) ;
46
- setDisplayedPages ( prev => [ ...prev , ...morePages ] ) ;
64
+ setDisplayedPages ( ( prev ) => [ ...prev , ...morePages ] ) ;
47
65
} , [ pageIndex ] ) ;
48
-
66
+
49
67
const loadMore = ( ) => {
50
- setPageIndex ( prev => prev + itemsPerPage ) ;
68
+ setPageIndex ( ( prev ) => prev + itemsPerPage ) ;
51
69
} ;
52
70
53
71
return (
54
- < div style = { { display : 'block' , maxWidth : '560px' , width :'100%' , marginLeft : 'auto' , marginRight : 'auto' , alignItems : 'center' } } >
72
+ < div
73
+ style = { {
74
+ display : "block" ,
75
+ maxWidth : "560px" ,
76
+ width : "100%" ,
77
+ marginLeft : "auto" ,
78
+ marginRight : "auto" ,
79
+ alignItems : "center" ,
80
+ } }
81
+ className = "changelogIndexContainer"
82
+ >
55
83
{ displayedPages . map ( ( page ) => (
56
- < div key = { page . route } className = "mb-10 " >
84
+ < div key = { page . route } className = "changelogIndexItem " >
57
85
< h3 >
58
86
< Link
59
87
href = { page . route }
60
88
style = { { color : "inherit" , textDecoration : "none" } }
61
- className = "block font-semibold mt-8 text-2xl "
89
+ className = "changelogItemTitle block "
62
90
>
63
91
{ page . meta ?. title || page . frontMatter ?. title || page . name }
64
92
</ Link >
65
93
</ h3 >
66
94
{ page . frontMatter ?. date ? (
67
- < p className = "opacity-50 text-sm mt-1 mb-2 leading-7" >
68
- { page . frontMatter . date }
69
- </ p >
95
+ < p className = "changelogDate" > { page . frontMatter . date } </ p >
70
96
) : null }
71
-
97
+
72
98
{ renderMedia ( page ) }
73
99
74
100
< p className = "opacity-80 mt-6 leading-7" >
75
- { page . frontMatter ?. description } { " " }
76
- < span className = "inline-block" >
77
- < Link
78
- href = { page . route }
79
- className = "text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
80
- >
81
- { more + " →" }
82
- </ Link >
83
- </ span >
84
- </ p >
101
+ { page . frontMatter ?. description } { " " }
102
+ < span className = "inline-block" >
103
+ < Link href = { page . route } className = "changelogReadMoreLink" >
104
+ { more + " →" }
105
+ </ Link >
106
+ </ span >
107
+ </ p >
108
+ < div className = "changelogDivider nx-mt-16" > </ div >
85
109
</ div >
86
110
) ) }
87
- { pageIndex + itemsPerPage < allPages . length && (
88
- < button onClick = { loadMore } className = "text-white
89
-
90
- // Background
91
- bg-gradient-to-b from-purple50 to-purple100 hover:from-purple50 hover:to-purple100 active:from-purple50 active:to-purple140
92
-
93
- // Shadow
94
- shadow-sm hover:shadow-md
95
-
96
- // Shadow
97
- rounded-full hover:rounded-lg
98
-
99
- // Font
100
- font-medium text-md
101
-
102
- // Padding
103
- px-7 py-2.5" >
104
- Load More
105
- </ button >
106
- ) }
107
- </ div >
111
+ { pageIndex + itemsPerPage < allPages . length && (
112
+ < div class = "changelogLoadMoreButtonContainer" >
113
+ < button onClick = { loadMore } className = "changelogLoadMoreButton" >
114
+ Load More
115
+ </ button >
116
+ </ div >
117
+ ) }
118
+ </ div >
108
119
) ;
109
120
}
0 commit comments