add emojis for logo

Author: xc2f

src/Footer/Component.tsx

@@ -4,20 +4,28 @@ import React from 'react'
 
 import type { Footer } from '@/payload-types'
 
+import { findFeedBySlug } from '@/queries/feeds'
+
 import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
 import { CMSLink } from '@/components/Link'
 import { Logo } from '@/components/Logo/Logo'
 
 export async function Footer() {
   const footerData: Footer = await getCachedGlobal('footer', 1)()
-
   const navItems = footerData?.navItems || []
 
+  let emojis: string[] = []
+  const emojiData = await findFeedBySlug('logo-emojis')
+  if (emojiData) {
+    const json = emojiData.json || []
+    emojis = Array.isArray(json) ? json.filter((v): v is string => typeof v === 'string') : []
+  }
+
   return (
     <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
       <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
         <Link className="flex items-center" href="/">
-          <Logo />
+          <Logo emojis={emojis} />
         </Link>
 
         <div className="flex flex-col-reverse items-start md:flex-row gap-4 md:items-center">

src/Header/Component.client.tsx

@@ -11,9 +11,10 @@ import { HeaderNav } from './Nav'
 
 interface HeaderClientProps {
   data: Header
+  emojis: string[]
 }
 
-export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
+export const HeaderClient: React.FC<HeaderClientProps> = ({ data, emojis }) => {
   /* Storing the value in a useState to avoid hydration errors */
   const [theme, setTheme] = useState<string | null>(null)
   const { headerTheme, setHeaderTheme } = useHeaderTheme()
@@ -33,7 +34,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
     <header className="container relative z-20   " {...(theme ? { 'data-theme': theme } : {})}>
       <div className="py-8 flex justify-between">
         <Link className="flex items-center" href="/">
-          <Logo />
+          <Logo emojis={emojis} />
         </Link>
         <HeaderNav data={data} />
       </div>

src/Header/Component.tsx

@@ -4,8 +4,17 @@ import React from 'react'
 
 import type { Header } from '@/payload-types'
 
+import { findFeedBySlug } from '@/queries/feeds'
+
 export async function Header() {
   const headerData: Header = await getCachedGlobal('header', 1)()
 
-  return <HeaderClient data={headerData} />
+  let emojis: string[] = []
+  const emojiData = await findFeedBySlug('logo-emojis')
+  if (emojiData) {
+    const json = emojiData.json || []
+    emojis = Array.isArray(json) ? json.filter((v): v is string => typeof v === 'string') : []
+  }
+
+  return <HeaderClient data={headerData} emojis={emojis} />
 }

src/components/Logo/Logo.tsx

@@ -1,12 +1,54 @@
-import React from 'react'
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 
 interface Props {
   className?: string
-  loading?: 'lazy' | 'eager'
-  priority?: 'auto' | 'high' | 'low'
+  emojis: string[]
 }
 
-export const Logo = (props: Props) => {
-  return <span className={clsx('text-2xl font-bold font-logo')}>XC@F</span>
+export const Logo = ({ emojis = [] }: Props) => {
+  const [hovered, setHovered] = useState(false)
+  const [emoji, setEmoji] = useState(emojis[0])
+  const indexRef = useRef(0)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (!hovered || !emoji) {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+        timerRef.current = null
+      }
+      return
+    }
+
+    timerRef.current = setInterval(() => {
+      indexRef.current = (indexRef.current + 1) % emojis.length
+      setEmoji(emojis[indexRef.current])
+    }, 250)
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [hovered])
+
+  return (
+    <span
+      className="text-2xl font-bold font-logo cursor-pointer select-none"
+      onMouseEnter={() => setHovered(!!emoji)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      XC
+      <span
+        className={clsx(
+          'inline-flex w-[1em] justify-center leading-none',
+          hovered && 'scale-[0.9] relative bottom-[3px] right-px',
+        )}
+      >
+        {!hovered && '@'}
+        {hovered && emoji}
+      </span>
+      F
+    </span>
+  )
 }

src/queries/feeds.ts

@@ -0,0 +1,18 @@
+import 'server-only'
+import { getPayloadClient } from './payloadClient'
+
+export async function findFeedBySlug(slug: string) {
+  const payload = await getPayloadClient()
+
+  const { docs } = await payload.find({
+    collection: 'feeds',
+    where: {
+      slug: { equals: slug },
+      enabled: { equals: true },
+      _status: { equals: 'published' },
+    },
+    limit: 1,
+  })
+
+  return docs[0] ?? null
+}

src/queries/payloadClient.ts

@@ -0,0 +1,16 @@
+import 'server-only'
+
+import { getPayload } from 'payload'
+import config from '@payload-config'
+
+let payloadInstance: Awaited<ReturnType<typeof getPayload>> | null = null
+
+export async function getPayloadClient() {
+  if (!payloadInstance) {
+    payloadInstance = await getPayload({
+      config,
+    })
+  }
+
+  return payloadInstance
+}