1- ' use client' ;
1+ " use client" ;
22
3- import Link from ' next/link' ;
3+ import Link from " next/link" ;
44
55export default function HomePage ( ) {
66 const examples = [
77 {
8- path : ' /basic-viewer' ,
9- title : ' Basic Viewer' ,
10- description : ' Simple PDF document loading with basic controls' ,
11- features : [ ' Document loading' , ' Zoom controls' , ' Page navigation' ]
8+ path : " /basic-viewer" ,
9+ title : " Basic Viewer" ,
10+ description : " Simple PDF document loading with basic controls" ,
11+ features : [ " Document loading" , " Zoom controls" , " Page navigation" ] ,
1212 } ,
1313 {
14- path : '/magazine-mode' ,
15- title : 'Magazine Mode' ,
16- description : 'Advanced magazine-style reader with custom features' ,
17- features : [ 'Double-page layout' , 'Custom toolbar' , 'Fullscreen support' , 'iOS optimization' ]
18- }
14+ path : "/magazine-mode" ,
15+ title : "Magazine Mode" ,
16+ description : "Advanced magazine-style reader with custom features" ,
17+ features : [
18+ "Double-page layout" ,
19+ "Custom toolbar" ,
20+ "Fullscreen support" ,
21+ "iOS optimization" ,
22+ ] ,
23+ } ,
1924 ] ;
2025
2126 return (
22- < div style = { { padding : ' 2rem' , maxWidth : ' 1200px' , margin : ' 0 auto' } } >
23- < header style = { { textAlign : ' center' , marginBottom : ' 3rem' } } >
27+ < div style = { { padding : " 2rem" , maxWidth : " 1200px" , margin : " 0 auto" } } >
28+ < header style = { { textAlign : " center" , marginBottom : " 3rem" } } >
2429 < h1 > Nutrient Web SDK - Next.js Examples</ h1 >
25- < p style = { { fontSize : ' 1.1rem' , color : ' #666' } } >
30+ < p style = { { fontSize : " 1.1rem" , color : " #666" } } >
2631 Explore different ways to integrate Nutrient Web SDK with Next.js
2732 </ p >
2833 </ header >
2934
30- < div style = { {
31- display : 'grid' ,
32- gridTemplateColumns : 'repeat(auto-fit, minmax(350px, 1fr))' ,
33- gap : '2rem'
34- } } >
35+ < div
36+ style = { {
37+ display : "grid" ,
38+ gridTemplateColumns : "repeat(auto-fit, minmax(350px, 1fr))" ,
39+ gap : "2rem" ,
40+ } }
41+ >
3542 { examples . map ( ( example ) => (
3643 < div
3744 key = { example . path }
3845 style = { {
39- border : ' 1px solid #ddd' ,
40- borderRadius : ' 8px' ,
41- padding : ' 1.5rem' ,
42- backgroundColor : ' #f9f9f9'
46+ border : " 1px solid #ddd" ,
47+ borderRadius : " 8px" ,
48+ padding : " 1.5rem" ,
49+ backgroundColor : " #f9f9f9" ,
4350 } }
4451 >
45- < h3 style = { { margin : ' 0 0 1rem 0' } } > { example . title } </ h3 >
46- < p style = { { color : ' #666' , marginBottom : ' 1rem' } } >
52+ < h3 style = { { margin : " 0 0 1rem 0" } } > { example . title } </ h3 >
53+ < p style = { { color : " #666" , marginBottom : " 1rem" } } >
4754 { example . description }
4855 </ p >
49-
50- < h4 style = { { fontSize : '0.9rem' , margin : '1rem 0 0.5rem 0' } } > Features:</ h4 >
51- < ul style = { { fontSize : '0.9rem' , color : '#555' } } >
56+
57+ < h4 style = { { fontSize : "0.9rem" , margin : "1rem 0 0.5rem 0" } } >
58+ Features:
59+ </ h4 >
60+ < ul style = { { fontSize : "0.9rem" , color : "#555" } } >
5261 { example . features . map ( ( feature ) => (
5362 < li key = { feature } > { feature } </ li >
5463 ) ) }
5564 </ ul >
56-
65+
5766 < Link
5867 href = { example . path }
5968 style = { {
60- display : ' inline-block' ,
61- marginTop : ' 1rem' ,
62- padding : ' 0.5rem 1rem' ,
63- backgroundColor : ' #4A8FED' ,
64- color : ' white' ,
65- textDecoration : ' none' ,
66- borderRadius : ' 4px' ,
67- fontSize : ' 0.9rem'
69+ display : " inline-block" ,
70+ marginTop : " 1rem" ,
71+ padding : " 0.5rem 1rem" ,
72+ backgroundColor : " #4A8FED" ,
73+ color : " white" ,
74+ textDecoration : " none" ,
75+ borderRadius : " 4px" ,
76+ fontSize : " 0.9rem" ,
6877 } }
6978 >
7079 View Example →
@@ -73,14 +82,18 @@ export default function HomePage() {
7382 ) ) }
7483 </ div >
7584
76- < footer style = { { textAlign : ' center' , marginTop : ' 3rem' , color : ' #666' } } >
85+ < footer style = { { textAlign : " center" , marginTop : " 3rem" , color : " #666" } } >
7786 < p >
78- Learn more: { ' ' }
79- < a href = "https://www.nutrient.io/guides/web/" target = "_blank" rel = "noopener noreferrer" >
87+ Learn more:{ " " }
88+ < a
89+ href = "https://www.nutrient.io/guides/web/"
90+ target = "_blank"
91+ rel = "noopener noreferrer"
92+ >
8093 Nutrient Web SDK Documentation
8194 </ a >
8295 </ p >
8396 </ footer >
8497 </ div >
8598 ) ;
86- }
99+ }
0 commit comments