Skip to content

Commit 05f67b4

Browse files
pbteja1998pbteja1998
committed
Update ui of members page
1 parent 347667a commit 05f67b4

File tree

4 files changed

+164
-172
lines changed

4 files changed

+164
-172
lines changed

‎src/components/members/Member.tsx

Lines changed: 156 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Avatar, Button } from '@/ui'
1+
import { Button } from '@/ui'
22
import { User } from 'src/pages/members'
33
import {
44
IconBrandCodepen,
@@ -21,6 +21,7 @@ export default function Member({ user }: { user: User }) {
2121
const router = useRouter()
2222
const socials = user.socials
2323
const account = user.account
24+
const bioExists = Boolean(account.bio)
2425
const [isHoveringFollowButton, setIsHoveringFollowButton] = useState(false)
2526
const {
2627
shouldShowFollowButton,
@@ -41,169 +42,168 @@ export default function Member({ user }: { user: User }) {
4142
setIsFollowing(!isFollowing)
4243
toggleFollow()
4344
}
44-
45+
console.log({ user })
4546
return (
46-
<li className="col-span-1 flex flex-col text-center bg-white rounded-lg shadow divide-y divide-gray-200">
47-
<div className="flex-1 flex flex-col p-8">
48-
<Avatar src={user.image} className="w-32 h-32 mx-auto" />
49-
<h3 className="mt-6 text-gray-900 text-sm font-medium">
50-
{user.account?.firstName}
51-
</h3>
52-
<dl className="mt-1 flex-grow flex flex-col justify-between">
53-
<dt className="sr-only">Bio</dt>
54-
<dd className="text-gray-500 text-sm">{account?.bio}</dd>
55-
<dt className="sr-only">Role</dt>
56-
<dt className="sr-only">Social Media</dt>
57-
{socials && (
58-
<dd className="mt-4">
59-
<ul className="flex space-x-5 justify-center items-center">
60-
{socials.github && (
61-
<li>
62-
<A
63-
href={`https://github.com/${socials.github}`}
64-
className="text-gray-400 hover:text-gray-500"
65-
>
66-
<span className="sr-only">GitHub</span>
67-
<IconBrandGithub className="w-5 h-5" />
68-
</A>
69-
</li>
70-
)}
71-
{socials.facebook && (
72-
<li>
73-
<A
74-
href={`https://facebook.com/${socials.facebook}`}
75-
className="text-gray-400 hover:text-gray-500"
76-
>
77-
<span className="sr-only">Facebook</span>
78-
<IconBrandFacebook className="w-5 h-5" />
79-
</A>
80-
</li>
81-
)}
82-
{socials.twitter && (
83-
<li>
84-
<A
85-
href={`https://twitter.com/${socials.twitter}`}
86-
className="text-gray-400 hover:text-gray-500"
87-
>
88-
<span className="sr-only">Twitter</span>
89-
<IconBrandTwitter className="w-5 h-5" />
90-
</A>
91-
</li>
92-
)}
93-
{socials.linkedin && (
94-
<li>
95-
<A
96-
href={`https://linkedin.com/in/${socials.linkedin}`}
97-
className="text-gray-400 hover:text-gray-500"
98-
>
99-
<span className="sr-only">LinkedIn</span>
100-
<IconBrandLinkedin className="w-5 h-5" />
101-
</A>
102-
</li>
103-
)}
104-
{socials.codepen && (
105-
<li>
106-
<A
107-
href={`https://codepen.io/${socials.codepen}`}
108-
className="text-gray-400 hover:text-gray-500"
109-
>
110-
<span className="sr-only">CodePen</span>
111-
<IconBrandCodepen className="w-5 h-5" />
112-
</A>
113-
</li>
114-
)}
115-
{socials.blog && (
116-
<li>
117-
<A
118-
href={socials.blog}
119-
className="text-gray-400 hover:text-gray-500"
120-
>
121-
<span className="sr-only">Blog</span>
122-
<IconExternalLink className="w-5 h-5" />
123-
</A>
124-
</li>
125-
)}
126-
</ul>
47+
<li>
48+
<div className="flex items-center space-x-4 lg:space-x-6">
49+
<A href={`/${user.username}`}>
50+
<div className="w-16 h-16 lg:w-20 lg:h-20 rounded-full overflow-hidden">
51+
<img
52+
className="w-full h-full inline-block text-white focus:ring object-cover"
53+
src={user.image}
54+
alt={user.name}
55+
tabIndex={0}
56+
/>
57+
</div>
58+
</A>
59+
<div className="font-medium text-base leading-6 space-y-1 text-black">
60+
<A href={`/${user.username}`}>
61+
<h3>{`${account.firstName} ${account.lastName ?? ''}`}</h3>
62+
</A>
63+
<dl className="mt-1 flex-grow flex flex-col justify-between">
64+
<dt className="sr-only">Bio</dt>
65+
<dd className="text-gray-500 text-xs">
66+
{bioExists ? account.bio : 'Coderplex User'}
12767
</dd>
128-
)}
129-
{shouldShowFollowButton && (
130-
<>
131-
<dt className="sr-only">Follow</dt>
132-
{!isLoading && (
133-
<dd className="mt-4">
134-
{isFollowing ? (
135-
<>
136-
<Button
137-
onClick={() => toggle()}
138-
variant="solid"
139-
variantColor={
140-
isHoveringFollowButton ? 'danger' : 'brand'
141-
}
142-
onMouseEnter={() => setIsHoveringFollowButton(true)}
143-
onMouseLeave={() => setIsHoveringFollowButton(false)}
68+
<dt className="sr-only">Role</dt>
69+
<dt className="sr-only">Social Media</dt>
70+
{socials && (
71+
<dd className="mt-2">
72+
<ul className="flex space-x-1 justify-start items-center">
73+
{socials.github && (
74+
<li>
75+
<A
76+
href={`https://github.com/${socials.github}`}
77+
className="text-gray-400 hover:text-gray-500"
78+
>
79+
<span className="sr-only">GitHub</span>
80+
<IconBrandGithub className="w-5 h-5" />
81+
</A>
82+
</li>
83+
)}
84+
{socials.facebook && (
85+
<li>
86+
<A
87+
href={`https://facebook.com/${socials.facebook}`}
88+
className="text-gray-400 hover:text-gray-500"
14489
>
145-
{isHoveringFollowButton ? 'Unfollow' : 'Following'}
146-
</Button>
147-
</>
148-
) : (
149-
<>
150-
<Button
151-
onClick={() => {
152-
if (!session) {
153-
setIsModalOpen(true)
154-
return
155-
}
156-
toggle()
157-
}}
158-
leadingIcon={IconPlus}
90+
<span className="sr-only">Facebook</span>
91+
<IconBrandFacebook className="w-5 h-5" />
92+
</A>
93+
</li>
94+
)}
95+
{socials.twitter && (
96+
<li>
97+
<A
98+
href={`https://twitter.com/${socials.twitter}`}
99+
className="text-gray-400 hover:text-gray-500"
100+
>
101+
<span className="sr-only">Twitter</span>
102+
<IconBrandTwitter className="w-5 h-5" />
103+
</A>
104+
</li>
105+
)}
106+
{socials.linkedin && (
107+
<li>
108+
<A
109+
href={`https://linkedin.com/in/${socials.linkedin}`}
110+
className="text-gray-400 hover:text-gray-500"
111+
>
112+
<span className="sr-only">LinkedIn</span>
113+
<IconBrandLinkedin className="w-5 h-5" />
114+
</A>
115+
</li>
116+
)}
117+
{socials.codepen && (
118+
<li>
119+
<A
120+
href={`https://codepen.io/${socials.codepen}`}
121+
className="text-gray-400 hover:text-gray-500"
159122
>
160-
Follow
161-
</Button>
162-
{!session && (
163-
<FollowModal
164-
user={user}
165-
isOpen={isModalOpen}
166-
setIsOpen={setIsModalOpen}
167-
/>
168-
)}
169-
</>
123+
<span className="sr-only">CodePen</span>
124+
<IconBrandCodepen className="w-5 h-5" />
125+
</A>
126+
</li>
170127
)}
171-
</dd>
172-
)}
173-
</>
174-
)}
175-
{!shouldShowFollowButton && (
176-
<>
177-
<dt className="sr-only">Edit Profile</dt>
178-
<dd className="mt-3">
179-
<Button
180-
onClick={() => router.push('/profile/settings')}
181-
leadingIcon={IconEdit}
182-
>
183-
Edit Profile
184-
</Button>
128+
{socials.blog && (
129+
<li>
130+
<A
131+
href={socials.blog}
132+
className="text-gray-400 hover:text-gray-500"
133+
>
134+
<span className="sr-only">Blog</span>
135+
<IconExternalLink className="w-5 h-5" />
136+
</A>
137+
</li>
138+
)}
139+
</ul>
185140
</dd>
186-
</>
187-
)}
188-
</dl>
189-
</div>
190-
191-
<div>
192-
<div className="-mt-px flex divide-x divide-gray-200">
193-
<div className="w-0 flex-1 flex">
194-
<A
195-
href={`/${user.username}`}
196-
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
197-
>
198-
<IconExternalLink
199-
className="w-5 h-5text-gray-400"
200-
aria-hidden={true}
201-
/>
202-
<span className="ml-3">Visit</span>
203-
</A>
204-
</div>
141+
)}
142+
</dl>
205143
</div>
206144
</div>
145+
<div className="ml-20 lg:ml-26">
146+
{shouldShowFollowButton && (
147+
<>
148+
<dt className="sr-only">Follow</dt>
149+
{!isLoading && (
150+
<dd className="mt-4">
151+
{isFollowing ? (
152+
<>
153+
<Button
154+
size="xs"
155+
onClick={() => toggle()}
156+
variant="solid"
157+
variantColor={isHoveringFollowButton ? 'danger' : 'brand'}
158+
onMouseEnter={() => setIsHoveringFollowButton(true)}
159+
onMouseLeave={() => setIsHoveringFollowButton(false)}
160+
>
161+
{isHoveringFollowButton ? 'Unfollow' : 'Following'}
162+
</Button>
163+
</>
164+
) : (
165+
<>
166+
<Button
167+
size="xs"
168+
onClick={() => {
169+
if (!session) {
170+
setIsModalOpen(true)
171+
return
172+
}
173+
toggle()
174+
}}
175+
leadingIcon={IconPlus}
176+
>
177+
Follow
178+
</Button>
179+
{!session && (
180+
<FollowModal
181+
user={user}
182+
isOpen={isModalOpen}
183+
setIsOpen={setIsModalOpen}
184+
/>
185+
)}
186+
</>
187+
)}
188+
</dd>
189+
)}
190+
</>
191+
)}
192+
{!shouldShowFollowButton && (
193+
<>
194+
<dt className="sr-only">Edit Profile</dt>
195+
<dd className="mt-3">
196+
<Button
197+
size="xs"
198+
onClick={() => router.push('/profile/settings')}
199+
leadingIcon={IconEdit}
200+
>
201+
Edit Profile
202+
</Button>
203+
</dd>
204+
</>
205+
)}
206+
</div>
207207
</li>
208208
)
209209
}

‎src/components/members/Members.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import Member from './Member'
33

44
export default function Members({ users }: { users: User[] }) {
55
return (
6-
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
7-
{users.map((user) => (
8-
<Member key={user.id} user={user} />
9-
))}
10-
</ul>
6+
<div className="mx-auto max-w-7xl">
7+
<ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
8+
{users.map((user) => (
9+
<Member user={user} key={user.id} />
10+
))}
11+
</ul>
12+
</div>
1113
)
1214
}

‎src/pages/members.tsx

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
import { Members } from '@/components'
22
import { PaddedLayout } from 'src/layouts'
3-
import { InferGetServerSidePropsType } from 'next'
4-
5-
import faunadb from 'faunadb'
63
import { useQuery } from 'react-query'
7-
const q = faunadb.query
8-
const isProduction = process.env.NODE_ENV === 'production'
9-
const client = new faunadb.Client({
10-
secret: process.env.FAUNADB_SECRET ?? 'secret',
11-
scheme: isProduction ? 'https' : 'http',
12-
domain: isProduction ? 'db.fauna.com' : 'localhost',
13-
...(isProduction ? {} : { port: 8443 }),
14-
})
154

165
export default function MembersPage() {
176
const { isLoading, isError, data } = useQuery('/api/fauna/members', () =>

‎tailwind.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
extend: {
1818
spacing: {
1919
13: '3.25rem',
20+
26: '6.5rem',
2021
100: '25rem',
2122
},
2223
colors: {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy