import * as React from 'react' ; import { observer } from 'mobx-react-lite' ; import { Container , Input } from './style' ; import { SearchBar , SearchIcon , } from './style' ; import { BookMarkArea , BookMarkButtonBox1 , BookMarkButton1 , TextLabel1 } from './style' ; import { BrowserSession } from '~/browserui/models/browser-session' ; import { Form } from '../SearchBar/style' ; var bookmarksData = [ { "id" : 1 , "name" : "57Smiles" , "identifier" : "CD" , color : "red" , textColor : "white" , "url" : "ipfs://57smiles.zil" } , { "id" : 2 , "name" : "Etherscan" , "identifier" : "ES" , color : "lightblue" , "url" : "https://etherscan.io/" } , { "id" : 3 , "name" : "Coinbase" , "identifier" : "CB" , color : "gold" , "url" : "https://www.coinbase.com/" } , { "id" : 4 , "name" : "Mai Coin" , "identifier" : "MC" , color : "grey" , textColor : "white" , "url" : "https://www.maicoin.com/" } , { "id" : 5 , "name" : "Blockchain" , "identifier" : "BC" , color : "green" , textColor : "white" , "url" : "https://www.blockchain.com/" } , { "id" : 6 , "name" : "Stocktwits - BTC" , "identifier" : "ST" , color : "forestgreen" , textColor : "white" , "url" : "https://stocktwits.com/symbol/BTC.X" } , { "id" : 7 , "name" : "GitHub" , "identifier" : "GH" , color : "blue" , textColor : "white" , "url" : "http://www.github.com" } , { "id" : 8 , "name" : "Unstoppable Domains" , "identifier" : "US" , color : "orange" , "url" : "https://unstoppabledomains.com/" } ] ; let currentSession = null ; const handleUrlSubmit = ( event ) => { event . preventDefault ( ) ; var url = currentSession . selectedTab . emptyTabUrlValue ; currentSession . selectedTab . setUrl ( url ) ; } ; const handleBookMarkButton1Click = ( bookmarkData ) => { if ( bookmarkData . url ) { currentSession . selectedTab . setUrl ( bookmarkData . url ) ; } } ; const handleUrlBarChange = ( event ) => { if ( currentSession . selectedTab ) { currentSession . selectedTab . emptyTabUrlValue = event . target . value ; } } ; var BookMarkButtons = ( ) => { var bookmarks = bookmarksData . map ( item => ( < BookMarkButtonBox1 key = { item . id } onClick = { ( event ) => { handleBookMarkButton1Click ( item ) ; } } > < BookMarkButton1 color = { item . color } textColor = { item . textColor } > { item . identifier } < /BookMarkButton1> < TextLabel1 > { item . name } < /TextLabel1> < /BookMarkButtonBox1>)); return bookmarks ; } ; export const EmptyTab = observer ( ( { visible , browserSession } ) => { currentSession = browserSession ; var pageStyle = { display : visible ? "block" : "none" , boxSizing : 'border-box' , height : '100%' } ; return ( < div style = { pageStyle } > < Container > < Form onSubmit = { handleUrlSubmit } > < SearchBar > < Input type = "text" placeholder = "Search or type in URL" value = { browserSession . selectedTab . emptyTabUrlValue } onChange = { handleUrlBarChange } / > < SearchIcon /> < /SearchBar> < /Form> < BookMarkArea onClick = { handleBookMarkButton1Click } > { BookMarkButtons ( ) } < /BookMarkArea> < /Container> < /div>); } ) ;