1
+ "use client"
2
+
1
3
import Link from "next/link"
2
- import { Fragment } from "react"
4
+ import { Fragment , useState } from "react"
3
5
4
6
import { Box , Container , Typography } from "@mui/material"
5
7
8
+ import GetSCRDialog from "@/app/SCR-sSCR/Header/GetSCRDialog"
6
9
import Bridge from "@/assets/svgs/landingpage/bridge.svg"
7
10
import Doc from "@/assets/svgs/landingpage/doc.svg"
8
11
import Ecosystem from "@/assets/svgs/landingpage/ecosystem.svg"
@@ -13,26 +16,27 @@ import { BRIDGE_URL, DOC_URL, ECOSYSTEM_URL, LEVEL_UP_URL, SCROLL_OPEN_URL } fro
13
16
14
17
import PortalCard from "./PortalCard"
15
18
16
- const BUILDER_LIST = [
17
- {
18
- title : "For builders" ,
19
- items : [
20
- { icon : Doc , label : "Developer Docs" , content : "Everything you need to start building" , href : DOC_URL } ,
21
- { icon : Levelup , label : "Level Up" , content : "Learn ZK and test your dev skills" , href : LEVEL_UP_URL } ,
22
- { icon : ScrollOpen , label : "Scroll open" , content : "A six-week builder program with a $100,000 prize pool" , href : SCROLL_OPEN_URL } ,
23
- ] ,
24
- } ,
25
- {
26
- title : "For users" ,
27
- items : [
28
- { icon : Bridge , label : "Bridge" , content : "Deposit your assets to Scroll" , href : BRIDGE_URL } ,
29
- { icon : Ecosystem , label : "Projects" , content : "Explore the dApps on Scroll" , href : ECOSYSTEM_URL } ,
30
- { icon : Sessions , label : "Get SCR" , content : "Vote or propose on Scroll" , href : "/SCR-sSCR" } ,
31
- ] ,
32
- } ,
33
- ]
34
-
35
19
const Portal = ( ) => {
20
+ const [ getSCROpen , setGetSCROpen ] = useState ( false )
21
+ const BUILDER_LIST = [
22
+ {
23
+ title : "For builders" ,
24
+ items : [
25
+ { icon : Doc , label : "Developer Docs" , content : "Everything you need to start building" , href : DOC_URL } ,
26
+ { icon : Levelup , label : "Level Up" , content : "Learn ZK and test your dev skills" , href : LEVEL_UP_URL } ,
27
+ { icon : ScrollOpen , label : "Scroll open" , content : "A six-week builder program with a $100,000 prize pool" , href : SCROLL_OPEN_URL } ,
28
+ ] ,
29
+ } ,
30
+ {
31
+ title : "For users" ,
32
+ items : [
33
+ { icon : Bridge , label : "Bridge" , content : "Deposit your assets to Scroll" , href : BRIDGE_URL } ,
34
+ { icon : Ecosystem , label : "Projects" , content : "Explore the dApps on Scroll" , href : ECOSYSTEM_URL } ,
35
+ { icon : Sessions , label : "Get SCR" , content : "Vote or propose on Scroll" , onClick : ( ) => setGetSCROpen ( true ) } ,
36
+ ] ,
37
+ } ,
38
+ ]
39
+
36
40
return (
37
41
< Box sx = { { backgroundColor : "themeBackground.light" } } >
38
42
< Container sx = { { py : [ "5.6rem" , "10.6rem" ] } } >
@@ -50,17 +54,26 @@ const Portal = () => {
50
54
{ title }
51
55
</ Typography >
52
56
< Box sx = { { display : "grid" , gridTemplateColumns : "repeat(auto-fill, minmax(33rem, 1fr))" , gap : [ "2.4rem" , "2.8rem" ] } } >
53
- { items . map ( ( { icon : Icon , label, content, href } ) => (
54
- < Link href = { href } key = { label } target = { href . startsWith ( "https:" ) ? "_blank" : "" } className = "cursor-pointer" >
55
- < PortalCard label = { label } content = { content } >
56
- < Icon > </ Icon >
57
- </ PortalCard >
58
- </ Link >
59
- ) ) }
57
+ { items . map ( ( { icon : Icon , label, content, href, onClick } ) =>
58
+ onClick ? (
59
+ < Box key = { label } className = "cursor-pointer" onClick = { onClick } >
60
+ < PortalCard label = { label } content = { content } >
61
+ < Icon > </ Icon >
62
+ </ PortalCard >
63
+ </ Box >
64
+ ) : (
65
+ < Link href = { href } key = { label } target = { href . startsWith ( "https:" ) ? "_blank" : "" } className = "cursor-pointer" >
66
+ < PortalCard label = { label } content = { content } >
67
+ < Icon > </ Icon >
68
+ </ PortalCard >
69
+ </ Link >
70
+ ) ,
71
+ ) }
60
72
</ Box >
61
73
</ Fragment >
62
74
) ) }
63
75
< Box > </ Box >
76
+ < GetSCRDialog open = { getSCROpen } onClose = { ( ) => setGetSCROpen ( false ) } />
64
77
</ Container >
65
78
</ Box >
66
79
)
0 commit comments