Merge pull request #21 from zolplay-cn/dev

Twitter branding update

app/Sidebar.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from '@zolplay/react'
 import { clsxm } from '@zolplay/utils'
 import { LocaleSelector } from '~/app/LocaleSelector'
 import { ThemeSelector } from '~/app/ThemeSelector'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
 import { Logo, LogoHelmet } from '~/components/Logo'
 import { Clock } from '~/components/ui/Clock'
 import { motion } from 'framer-motion'
@@ -34,19 +35,7 @@ const social = [
   {
     name: 'Twitter',
     url: 'https://twitter.com/zolplay',
-    icon: (props: any) => (
-      <svg
-        viewBox="0 0 37 34"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        {...props}
-      >
-        <path
-          d="M0.45849 33.5746L13.8922 18.88L0 0.425781H11.4393L20.1735 11.9797L30.7876 0.425781H35.1661L22.145 14.616L36.427 33.5746H24.9648L15.8637 21.5163L4.83706 33.5746H0.45849ZM26.4778 31.0758H31.1544L9.94922 2.92455H5.24971L26.4778 31.0758Z"
-          fill="currentColor"
-        />
-      </svg>
-    ),
+    icon: BrandXIcon,
   },
   {
     name: 'GitHub',

components/icons/BrandXIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+
+export function BrandXIcon(props: SVGProps<any>) {
+  return (
+    <svg
+      viewBox="0 0 37 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M0.45849 33.5746L13.8922 18.88L0 0.425781H11.4393L20.1735 11.9797L30.7876 0.425781H35.1661L22.145 14.616L36.427 33.5746H24.9648L15.8637 21.5163L4.83706 33.5746H0.45849ZM26.4778 31.0758H31.1544L9.94922 2.92455H5.24971L26.4778 31.0758Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

components/members/OurMembers.tsx

@@ -2,6 +2,7 @@
 
 import type { Component } from '@zolplay/react'
 import { clsxm } from '@zolplay/utils'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
 import { ZpBrandReadCV } from '~/components/icons/ZpBrandReadCV'
 import { LogoHelmet } from '~/components/Logo'
 import { urlForImage } from '~/lib/sanity.image'
@@ -17,7 +18,6 @@ import {
   TbBrandGithub,
   TbBrandInstagram,
   TbBrandLinkedin,
-  TbBrandTwitter,
   TbBrandYoutube,
 } from 'react-icons/tb'
 import Tilt from 'react-parallax-tilt'
@@ -55,7 +55,7 @@ export function OurMembers({ members }: { members: Member[] }) {
 type Unarray<T> = T extends Array<infer U> ? U : T
 const SocialIconMap: Record<Unarray<Member['social']>['platform'], Component> =
   {
-    twitter: TbBrandTwitter,
+    twitter: BrandXIcon,
     youtube: TbBrandYoutube,
     github: TbBrandGithub,
     linkedin: TbBrandLinkedin,
@@ -75,7 +75,7 @@ function SocialLink({ social }: { social: Unarray<Member['social']> }) {
         target="_blank"
         className="transition-transform duration-200 hover:-rotate-6 hover:scale-105"
       >
-        <Icon className="h-5 w-5" />
+        <Icon className={social.platform === 'twitter' ? 'h-4' : 'h-5 w-5'} />
       </Link>
     </li>
   )