Thanks to visit codestin.com
Credit goes to github.com

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)