From 359831bc818538ad650a988c39ae81dfe13e9a58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B6khan=20Bulut?= Date: Wed, 8 Jan 2025 07:15:57 +0300 Subject: [PATCH] feat(profile/socials): update styles (#158) * style(profile/verified-badge): update styles * feat(profile/socials): update styles --- .../[slug]/components/sections/Social.jsx | 92 ++++------ .../[slug]/edit/components/Socials.jsx | 162 ++++++++---------- .../[slug]/edit/components/VerifiedBadge.jsx | 2 +- client/lib/utils/profiles/colors.js | 16 ++ client/lib/utils/profiles/getIcon.js | 32 ++++ .../profile-social-icons/black_github.svg | 1 - .../profile-social-icons/black_tiktok.svg | 1 - .../public/profile-social-icons/black_x.svg | 10 -- .../public/profile-social-icons/facebook.svg | 1 - .../public/profile-social-icons/instagram.svg | 1 - client/public/profile-social-icons/steam.svg | 1 - .../public/profile-social-icons/telegram.svg | 31 ---- client/public/profile-social-icons/twitch.svg | 1 - .../public/profile-social-icons/twitter.svg | 6 - .../profile-social-icons/white_github.svg | 1 - .../profile-social-icons/white_tiktok.svg | 1 - .../public/profile-social-icons/white_x.svg | 10 -- .../public/profile-social-icons/youtube.svg | 1 - 18 files changed, 153 insertions(+), 217 deletions(-) create mode 100644 client/lib/utils/profiles/colors.js create mode 100644 client/lib/utils/profiles/getIcon.js delete mode 100644 client/public/profile-social-icons/black_github.svg delete mode 100644 client/public/profile-social-icons/black_tiktok.svg delete mode 100644 client/public/profile-social-icons/black_x.svg delete mode 100644 client/public/profile-social-icons/facebook.svg delete mode 100644 client/public/profile-social-icons/instagram.svg delete mode 100644 client/public/profile-social-icons/steam.svg delete mode 100644 client/public/profile-social-icons/telegram.svg delete mode 100644 client/public/profile-social-icons/twitch.svg delete mode 100644 client/public/profile-social-icons/twitter.svg delete mode 100644 client/public/profile-social-icons/white_github.svg delete mode 100644 client/public/profile-social-icons/white_tiktok.svg delete mode 100644 client/public/profile-social-icons/white_x.svg delete mode 100644 client/public/profile-social-icons/youtube.svg diff --git a/client/app/(profiles)/profile/[slug]/components/sections/Social.jsx b/client/app/(profiles)/profile/[slug]/components/sections/Social.jsx index b7dd4508..0dc9c472 100644 --- a/client/app/(profiles)/profile/[slug]/components/sections/Social.jsx +++ b/client/app/(profiles)/profile/[slug]/components/sections/Social.jsx @@ -1,33 +1,14 @@ 'use client'; -import useThemeStore from '@/stores/theme'; -import Image from 'next/image'; -import { IoEarth } from 'react-icons/io5'; import { MdArrowOutward } from 'react-icons/md'; import { motion } from 'framer-motion'; -import getIconPath from '@/lib/utils/profiles/getIconPath'; import getDisplayableURL from '@/lib/utils/profiles/getDisplayableURL'; import { t } from '@/stores/language'; import MotionLink from '@/app/components/Motion/Link'; +import getIcon from '@/lib/utils/profiles/getIcon'; +import colors from '@/lib/utils/profiles/colors'; export default function Social({ data }) { - const colors = { - instagram: '225 48 108', - x: '0 0 0', - twitter: '29 161 242', - tiktok: '255 0 80', - facebook: '66 103 178', - steam: '0 0 0', - github: '110 84 148', - twitch: '145 70 255', - youtube: '255 0 0', - telegram: '36 161 222', - custom: '150 150 150', - unknown: '0 0 0' - }; - - const theme = useThemeStore(state => state.theme); - return (
)} - {data.map((social, index) => ( - -
- {social.type === 'custom' ? ( - <> - + {data.map((social, index) => { + const SocialIcon = getIcon(social.type); - - {getDisplayableURL(social.link)} - - - ) : ( - <> - {`${social.type} + return ( + +
+ - - {social.handle} - - - )} -
+ + {social.type === 'custom' ? getDisplayableURL(social.link) : social.handle} + +
- - - ))} + + + ); + })}
); diff --git a/client/app/(profiles)/profile/[slug]/edit/components/Socials.jsx b/client/app/(profiles)/profile/[slug]/edit/components/Socials.jsx index c496938c..4432397e 100644 --- a/client/app/(profiles)/profile/[slug]/edit/components/Socials.jsx +++ b/client/app/(profiles)/profile/[slug]/edit/components/Socials.jsx @@ -1,13 +1,8 @@ 'use client'; -import { IoEarth } from 'react-icons/io5'; -import { FaQuestion } from 'react-icons/fa6'; -import { nanoid } from 'nanoid'; -import Image from 'next/image'; import Link from 'next/link'; import { MdArrowOutward } from 'react-icons/md'; import { useState, useEffect } from 'react'; -import useThemeStore from '@/stores/theme'; import addSocial from '@/lib/request/profiles/addSocial'; import deleteSocial from '@/lib/request/profiles/deleteSocial'; import { toast } from 'sonner'; @@ -15,28 +10,15 @@ import { FiX } from 'react-icons/fi'; import cn from '@/lib/cn'; import config from '@/config'; import getDisplayableURL from '@/lib/utils/profiles/getDisplayableURL'; -import getIconPath from '@/lib/utils/profiles/getIconPath'; import revalidateProfile from '@/lib/revalidate/profile'; import { t } from '@/stores/language'; +import colors from '@/lib/utils/profiles/colors'; +import getIcon from '@/lib/utils/profiles/getIcon'; +import { TbLoader } from 'react-icons/tb'; export default function Socials({ profile }) { const [socials, setSocials] = useState(profile.socials); - const colors = { - instagram: '225 48 108', - x: '0 0 0', - twitter: '29 161 242', - tiktok: '255 0 80', - facebook: '66 103 178', - steam: '0 0 0', - github: '110 84 148', - twitch: '145 70 255', - youtube: '255 0 0', - telegram: '36 161 222', - custom: '150 150 150', - unknown: '0 0 0' - }; - const typeRegexps = { instagram: /(?:http(?:s)?:\/\/)?(?:www\.)?instagram\.com\/([\w](?!.*?\.{2})[\w.]{1,28}[\w])/, x: /(?:http(?:s)?:\/\/)?(?:www\.)?x\.com\/([a-zA-Z0-9_]+)/, @@ -51,8 +33,6 @@ export default function Socials({ profile }) { custom: /\b(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?\b/ }; - const theme = useThemeStore(state => state.theme); - const [currentlyAddingNewSocial, setCurrentlyAddingNewSocial] = useState(false); const [newSocialType, setNewSocialType] = useState('unknown'); const [newSocialValue, setNewSocialValue] = useState(''); @@ -130,8 +110,11 @@ export default function Socials({ profile }) { } } + const [deletingSocialId, setDeletingSocialId] = useState(null); + function deleteSelectedSocial(id) { setLoading(true); + setDeletingSocialId(id); toast.promise(deleteSocial(profile.slug, id), { @@ -141,6 +124,7 @@ export default function Socials({ profile }) { setNewSocialType('unknown'); setNewSocialValue(''); setLoading(false); + setDeletingSocialId(null); setSocials(newSocials); revalidateProfile(profile.slug); @@ -148,6 +132,7 @@ export default function Socials({ profile }) { }, error: message => { setLoading(false); + setDeletingSocialId(null); return message; } @@ -166,78 +151,73 @@ export default function Socials({ profile }) {

- {socials.map(social => ( -
-
- {social.type === 'custom' ? ( - <> - - - {getDisplayableURL(social.link)} - - - ) : ( - <> - {`${social.type} - - - {social.handle} - - - )} + {socials.map(social => { + const SocialIcon = getIcon(social.type); + + return ( +
+
+ + + + {social.type === 'custom' ? getDisplayableURL(social.link) : social.handle} + +
+ +
+ + + + + +
- -
- - - - - -
-
- ))} + ); + })}
- {newSocialType === 'unknown' ? ( - - ) : newSocialType === 'custom' ? ( - - ) : ( - {`${newSocialType} - )} + {(() => { + const Icon = getIcon(newSocialType); + + return ( + + ); + })()}
@@ -260,7 +240,7 @@ export default function Socials({ profile }) { )} > -
@@ -278,7 +258,7 @@ export default function Socials({ profile }) { {socials.length < config.profilesMaxSocialsLength && (