import { Anchor, Box, Heading, Spinner, Text, TextInput } from 'grommet' import type { GetServerSideProps } from 'next' import Head from 'next/head' import Image, { type StaticImageData } from 'next/image' import { useRouter } from 'next/router' import { useState } from 'react' import type { FormEvent } from 'react' import backgroundImage from '../images/home-background.jpg' import linkIcon from '../images/icons/home-link.svg' import metaverseIcon from '../images/icons/home-metaverse.svg' import profileIcon from '../images/icons/home-profile.svg' import verifyIcon from '../images/icons/home-verify.svg' import searchIcon from '../images/icons/search.svg' import footerDiscordIcon from '../images/icons/social-discord.svg' import footerGithubIcon from '../images/icons/social-github.svg' import footerTwitterIcon from '../images/icons/social-twitter.svg' import Navbar from '../components/Navbar' import OpenGraphMeta from '../components/OpenGraphMeta' import { withMediaQuery } from '../components/media-query/with-media-query' import { colors } from '../theme' const ResponsiveHeading = withMediaQuery(Heading) const ResponsiveText = withMediaQuery(Text) const ResponsiveTextInput = withMediaQuery(TextInput) const ResponsiveBox = withMediaQuery(Box) export const getServerSideProps: GetServerSideProps = async (ctx) => { const { getRequestState } = await import('../server') return { props: { state: await getRequestState(ctx) } } } export default function Home() { const router = useRouter() const [loading, setLoading] = useState(false) const [focus, setFocus] = useState(false) const [value, setValue] = useState('') function onSubmit(e: FormEvent) { e.preventDefault() setLoading(true) void router.push(`/${value}`) } const inputIcon = loading ? ( ) : ( ) return ( Self.ID A profile 100% owned by you Be your self
setValue(event.target.value)} onBlur={() => setFocus(false)} onFocus={() => setFocus(true)} placeholder="Search by DID or blockchain address" style={{ borderWidth: 0, borderRadius: 30, padding: 18, paddingLeft: 60, boxShadow: `0 2px 20px ${focus ? colors.brand : 'rgba(0,0,0,0.5)'}`, width: '100%', }} value={value} />
profile Create a public profile link Link crypto wallets from many chains verify Verify your social accounts metaverse Use it across the Web3 metaverse GitHub Discord Twitter {/* */} Powered by{' '} ,{' '} , and the{' '} ) }