ahmed/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

Sort socials

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2024-10-06 18:54:26 -04:00
parent fb542bb5b5
commit 49c943c9f3
3 changed files with 104 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/Social/SocialLinks/SocialLinks.tsx
View File

@ -1,26 +1,24 @@
import { FindSocials } from 'types/graphql'
import { baseUrls, getLogoComponent } from 'src/lib/handle'
import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
const SocialLinks = ({ socials }: FindSocials) => {
return (
<div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
{[...socials]
.sort((a, b) => (a.type > b.type ? 1 : -1))
.map((social, i) => (
<div key={i} className="tooltip" data-tip={social.name}>
<a
className="btn btn-square"
href={`${baseUrls[social.type]}${social.username}`}
target="_blank"
rel="noreferrer"
>
{getLogoComponent(social.type)}
</a>
</div>
))}
</div>
)
}
const SocialLinks = ({ socials }: FindSocials) => (
<div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
{[...socials]
.sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))
.map((social, i) => (
<div key={i} className="tooltip" data-tip={social.name}>
<a
className="btn btn-square"
href={`${baseUrls[social.type]}${social.username}`}
target="_blank"
rel="noreferrer"
>
{getLogoComponent(social.type)}
</a>
</div>
))}
</div>
)
export default SocialLinks

120
web/src/components/Social/Socials/Socials.tsx
View File

@ -13,7 +13,7 @@ import { toast } from '@redwoodjs/web/toast'
import { QUERY } from 'src/components/Social/SocialsCell'
import { truncate } from 'src/lib/formatters'
import { getLogoComponent } from 'src/lib/handle'
import { getLogoComponent, sortOrder } from 'src/lib/handle'
const DELETE_SOCIAL_MUTATION: TypedDocumentNode<
DeleteSocialMutation,
@ -58,66 +58,70 @@ const SocialsList = ({ socials }: FindSocials) => {
</tr>
</thead>
<tbody>
{socials.map((social) => {
const actionButtons = (
<>
<Link
to={routes.social({ id: social.id })}
title={'Show social ' + social.id + ' detail'}
className="btn btn-xs uppercase"
>
Show
</Link>
<Link
to={routes.editSocial({ id: social.id })}
title={'Edit social ' + social.id}
className="btn btn-primary btn-xs uppercase"
>
Edit
</Link>
<button
type="button"
title={'Delete social ' + social.id}
className="btn btn-error btn-xs uppercase"
onClick={() => onDeleteClick(social.name, social.id)}
>
Delete
</button>
</>
{[...socials]
.sort(
(a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type)
)
.map((social) => {
const actionButtons = (
<>
<Link
to={routes.social({ id: social.id })}
title={'Show social ' + social.id + ' detail'}
className="btn btn-xs uppercase"
>
Show
</Link>
<Link
to={routes.editSocial({ id: social.id })}
title={'Edit social ' + social.id}
className="btn btn-primary btn-xs uppercase"
>
Edit
</Link>
<button
type="button"
title={'Delete social ' + social.id}
className="btn btn-error btn-xs uppercase"
onClick={() => onDeleteClick(social.name, social.id)}
>
Delete
</button>
</>
)
return (
<tr key={social.id}>
<th>{getLogoComponent(social.type)}</th>
<td>{truncate(social.name)}</td>
<td>{truncate(social.username)}</td>
<td>
<nav className="hidden justify-end space-x-2 sm:flex">
{actionButtons}
</nav>
<div className="dropdown dropdown-end flex justify-end sm:hidden">
<div
tabIndex={0}
role="button"
className="btn btn-square btn-ghost btn-sm lg:hidden"
>
<Icon
path={mdiDotsVertical}
className="text-base-content-100 size-6"
/>
return (
<tr key={social.id}>
<th>{getLogoComponent(social.type)}</th>
<td>{truncate(social.name)}</td>
<td>{truncate(social.username)}</td>
<td>
<nav className="hidden justify-end space-x-2 sm:flex">
{actionButtons}
</nav>
<div className="dropdown dropdown-end flex justify-end sm:hidden">
<div
tabIndex={0}
role="button"
className="btn btn-square btn-ghost btn-sm lg:hidden"
>
<Icon
path={mdiDotsVertical}
className="text-base-content-100 size-6"
/>
</div>
<div
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="menu dropdown-content z-10 -mt-1 mr-10 inline rounded-box bg-base-100 shadow-xl"
>
<nav className="w-46 space-x-2">{actionButtons}</nav>
</div>
</div>
<div
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
className="menu dropdown-content z-10 -mt-1 mr-10 inline rounded-box bg-base-100 shadow-xl"
>
<nav className="w-46 space-x-2">{actionButtons}</nav>
</div>
</div>
</td>
</tr>
)
})}
</td>
</tr>
)
})}
</tbody>
</table>
</div>

24
web/src/lib/handle.tsx
View File

@ -20,7 +20,7 @@ import {
} from '@icons-pack/react-simple-icons'
import { mdiEmail, mdiLink, mdiPhone } from '@mdi/js'
import Icon from '@mdi/react'
import type { Handle } from 'types/graphql'
import type { Handle, Social } from 'types/graphql'
export const baseUrls: Record<Handle, string> = {
x: 'https://x.com/',
@ -76,4 +76,26 @@ const logoComponents: Record<Handle, ReactElement> = {
custom: <Icon path={mdiLink} className="size-7" />,
}
export const sortOrder: Social['type'][] = [
'phone',
'email',
'custom',
'linkedin',
'leetcode',
'github',
'gitea',
'forgejo',
'gitlab',
'bitbucket',
'youtube',
'x',
'instagram',
'tiktok',
'facebook',
'threads',
'twitch',
'discord',
'steam',
]
export const getLogoComponent = (type: Handle) => logoComponents[type]