Skip to content

Commit

Permalink
update assets, implement new designs
Browse files Browse the repository at this point in the history
  • Loading branch information
encryptedDegen committed May 16, 2024
1 parent 0f70a3f commit 088430e
Show file tree
Hide file tree
Showing 11 changed files with 202 additions and 92 deletions.
2 changes: 1 addition & 1 deletion biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"useSelfClosingElements": "off",
"noUnusedTemplateLiteral": "off"
},
"a11y": { "noSvgWithoutTitle": "off" },
"a11y": { "noSvgWithoutTitle": "off", "useKeyWithClickEvents": "off" },
"nursery": { "noUnusedImports": "off" },
"suspicious": { "noExplicitAny": "off" },
"correctness": { "noUndeclaredVariables": "off" }
Expand Down
Binary file modified bun.lockb
Binary file not shown.
17 changes: 17 additions & 0 deletions public/art/noise.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions public/art/waves-background.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/common/follow-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/favicon.ico
Binary file not shown.
Binary file modified public/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 15 additions & 17 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Box, Flex, Text, Tabs, Avatar, Separator, Card, Link, Container } from '@radix-ui/themes'

Expand All @@ -11,6 +12,7 @@ import { fetchEfpUserFollowers, fetchEfpUserFollowing } from '#/fetchers.ts'
const WALLET_ADDRESS = '0xeb6b293E9bB1d71240953c8306aD2c8aC523516a'

export default function App() {
const [activeTab, setActiveTab] = useState<'Followers' | 'Following'>('Followers')
const { data: ensData, error: ensError, status: ensStatus } = useEnsProfile(WALLET_ADDRESS)

const {
Expand Down Expand Up @@ -58,13 +60,9 @@ export default function App() {
})

return (
<Flex pb='5'>
<Flex mx='auto' width='100%' px='4' justify='center' className='font-serif'>
<Header />
<Container
pt='2'
mx='auto'
className='w-full sm:max-w-md font-serif sm:bg-zinc-50 rounded-xl sm:shadow-xl'
>
<div className='w-full mx-auto mt-24 sm:max-w-md font-serif glass-card rounded-xl border-2 border-[#ff9c90]'>
<Flex direction='column' gap='3'>
<Box pt='5'>
<Avatar
Expand Down Expand Up @@ -92,7 +90,7 @@ export default function App() {
<p className='mx-auto text-center pl-3 sm:pl-0 font-bold text-xl'>
{followersAddresses.length}
</p>
<Text size='2' align='center'>
<Text size='2' weight='bold' align='center'>
Followers
</Text>
</Flex>
Expand All @@ -101,7 +99,7 @@ export default function App() {
<p className='mx-auto text-center pl-3 sm:pl-0 font-bold text-xl'>
{followingAddresses.length}
</p>
<Text size='2' align='center'>
<Text size='2' weight='bold' align='center'>
Following
</Text>
</Flex>
Expand All @@ -110,22 +108,22 @@ export default function App() {
<Box grow='1'>
<Tabs.Root defaultValue='followers' className='px-3'>
<Tabs.List size='1' className='mx-auto justify-center shadow-none gap-x-28'>
<Tabs.Trigger
value='followers'
className='before:bg-transparent data-[state=active]:bg-zinc-300 hover:bg-zinc-300 hover:rounded-full rounded-full p-1.5 data-[state=active]:font-extrabold'
<div
onClick={() => setActiveTab('Followers')}
className={`before:bg-transparent p-3 cursor-pointer flex items-center ${activeTab === 'Followers' ? 'bg-white/80' : 'transparent hover:bg-white/50'} hover:rounded-full transition-colors rounded-full data-[state=active]:font-extrabold`}
>
<Text size='3' weight='bold'>
Followers
</Text>
</Tabs.Trigger>
<Tabs.Trigger
value='following'
className='before:bg-transparent data-[state=active]:bg-zinc-300 hover:bg-zinc-300 hover:rounded-full rounded-full p-1.5 data-[state=active]:font-extrabold'
</div>
<div
onClick={() => setActiveTab('Following')}
className={`before:bg-transparent p-3 cursor-pointer flex items-center ${activeTab === 'Following' ? 'bg-white/80' : 'transparent hover:bg-white/50'} hover:rounded-full transition-colors rounded-full data-[state=active]:font-extrabold`}
>
<Text size='3' weight='bold'>
Following
</Text>
</Tabs.Trigger>
</div>
</Tabs.List>
<Box py='5' px='5' mx='auto' height='auto'>
<Tabs.Content value='followers' className='h-auto'>
Expand Down Expand Up @@ -170,7 +168,7 @@ export default function App() {
</Tabs.Root>
</Box>
</Flex>
</Container>
</div>
</Flex>
)
}
Loading

0 comments on commit 088430e

Please sign in to comment.