Fix UI placeholders

calummoore · Mar 11, 2023 · cb68369 · cb68369
1 parent f3c11ee
commit cb68369
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
     "framer-motion": "^6.2.9",
+    "nanoid": "^4.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^3.0.0",

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -3,8 +3,17 @@ import { Heading, Container, Text, Stack, Button, Input, InputGroup, InputLeftAd
 
 export function Home() {
   const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const [publicKey, setPublicKey] = useState<string | null>(null)
+  const [nftId, setNftId] = useState('')
 
-  const usernames = []
+  const nfts: any = []
+
+  const signIn = async () => {
+
+  }
+
+  const createNFT = async () => {
+  }
 
   return (
     <Container p={10}>
@@ -16,28 +25,28 @@ export function Home() {
         <Stack>
           {isLoggedIn ? (
             <Stack >
-              < Heading as='h2' fontSize='2xl'>Usernames</Heading>
-              {usernames.length > 0 ? (
-                <Stack maxW='30em'>
-                  <HStack border='1px solid' borderColor='gray.100' borderRadius='md' p={4}>
-                    <Avatar size='sm' name='Dan Abrahmov' src='https://bit.ly/dan-abramov' />
-                    <Heading fontSize='lg'>@user1</Heading>
-                  </HStack>
-                </Stack>
-              ) : (
-                null
-              )}
+              < Heading as='h2' fontSize='2xl'>NFTS</Heading>
+              {nfts?.map(() => {
+                return (
+                  <Stack maxW='30em'>
+                    <HStack border='1px solid' borderColor='gray.100' borderRadius='md' p={4}>
+                      <Avatar size='sm' name='Dan Abrahmov' src='https://bit.ly/dan-abramov' />
+                      <Heading fontSize='lg'>@id</Heading>
+                    </HStack>
+                  </Stack>
+                )
+              })}
               <Stack>
-                <Heading as='h2' fontSize='md'>Create Username</Heading>
+                <Heading as='h2' fontSize='md'>Mint NFT</Heading>
                 <InputGroup>
                   <InputLeftAddon children='@' />
-                  <Input />
+                  <Input onChange={(e) => setNftId(e.target.value)} />
                 </InputGroup>
-                <Button>Create</Button>
+                <Button onClick={createNFT}>Create</Button>
               </Stack>
             </Stack>
           ) : (
-            <Button>Login with Wallet</Button>
+            <Button onClick={signIn}>Login with Wallet</Button>
           )}
         </Stack>
         {isLoggedIn && (
@@ -49,4 +58,4 @@ export function Home() {
       </Stack >
     </Container>
   )
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -7655,6 +7655,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.1.tgz#398d7ccfdbf9faf2231b2ca7e8fff5dbca6a509b"
+  integrity sha512-udKGtCCUafD3nQtJg9wBhRP3KMbPglUsgV5JVsXhvyBs/oefqb4sqMEhKBBgqZncYowu58p1prsZQBYvAj/Gww==
+
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"