fix: home layout

Signed-off-by: Innei <i@innei.in>

src/app/(home)/page.tsx

@@ -335,26 +335,26 @@ const NoteScreen = () => {
             >
               看看我的近况，这是我最近的所思所想
             </m.h3>
-            <m.div
-              initial={{ opacity: 0.00001, scale: 0.94, y: 20 }}
-              animate={{
-                y: 0,
-                scale: 1,
-                opacity: 1,
-              }}
-              viewport={{
-                once: true,
-              }}
-              transition={{
-                ...softSpringPreset,
-                delay: 0.3,
-              }}
-              className={clsx(
-                'relative flex h-[150px] w-full rounded-md ring-1 ring-slate-200 center dark:ring-neutral-800',
-                'hover:shadow-md hover:shadow-slate-100 dark:hover:shadow-neutral-900',
-              )}
-            >
-              <Link href={routeBuilder(Routes.Note, { id: theLast.nid })}>
+            <Link href={routeBuilder(Routes.Note, { id: theLast.nid })}>
+              <m.div
+                initial={{ opacity: 0.00001, scale: 0.94, y: 20 }}
+                animate={{
+                  y: 0,
+                  scale: 1,
+                  opacity: 1,
+                }}
+                viewport={{
+                  once: true,
+                }}
+                transition={{
+                  ...softSpringPreset,
+                  delay: 0.3,
+                }}
+                className={clsx(
+                  'relative flex h-[150px] w-full rounded-md ring-1 ring-slate-200 center dark:ring-neutral-800',
+                  'hover:shadow-md hover:shadow-slate-100 dark:hover:shadow-neutral-900',
+                )}
+              >
                 <div className="absolute bottom-6 right-6 ">
                   <h4 className="font-2xl text-lg font-medium ">
                     {theLast.title}
@@ -364,17 +364,17 @@ const NoteScreen = () => {
                     <RelativeTime date={theLast.created} />
                   </small>
                 </div>
-              </Link>
 
-              {!!theLast.images?.[0]?.src && (
-                <div
-                  className="absolute inset-0 bg-cover bg-center"
-                  style={{
-                    background: `url(${theLast.images[0].src})`,
-                  }}
-                />
-              )}
-            </m.div>
+                {!!theLast.images?.[0]?.src && (
+                  <div
+                    className="absolute inset-0 bg-cover bg-center"
+                    style={{
+                      background: `url(${theLast.images[0].src})`,
+                    }}
+                  />
+                )}
+              </m.div>
+            </Link>
           </section>
 
           {hasHistory && (
@@ -480,7 +480,7 @@ const FriendScreen = () => {
           className={clsx(
             'mt-12 grid max-w-5xl grid-cols-3 gap-10 p-4 md:grid-cols-4 lg:grid-cols-5 lg:p-0',
 
-            'min-w-0 [&_*]:flex [&_*]:flex-col [&_*]:center',
+            'min-w-0 [&>*]:flex [&>*]:flex-col [&>*]:center',
           )}
         >
           {data?.data.map((friend, i) => {
@@ -493,10 +493,11 @@ const FriendScreen = () => {
                     delay: i * 0.1 + 0.3,
                     ...softBouncePrest,
                   }}
+                  className="w-full min-w-0"
                 >
                   <a
                     href={friend.url}
-                    className="w-full min-w-0"
+                    className="flex w-full min-w-0 flex-col center"
                     target="_blank"
                     rel="noreferrer"
                   >
@@ -507,7 +508,7 @@ const FriendScreen = () => {
                       }}
                       aria-hidden
                     />
-                    <span className="mt-5 w-full min-w-0 truncate">
+                    <span className="mt-5 w-full min-w-0 truncate text-center">
                       {friend.name}
                     </span>
                   </a>

src/components/icons/platform/BilibiliIcon.tsx

@@ -0,0 +1,13 @@
+export const BilibiliIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M7.172 2.757L10.414 6h3.171l3.243-3.242a1 1 0 1 1 1.415 1.414L16.414 6H18.5A3.5 3.5 0 0 1 22 9.5v8a3.5 3.5 0 0 1-3.5 3.5h-13A3.5 3.5 0 0 1 2 17.5v-8A3.5 3.5 0 0 1 5.5 6h2.085L5.757 4.171a1 1 0 0 1 1.415-1.414ZM18.5 8h-13a1.5 1.5 0 0 0-1.493 1.355L4 9.5v8a1.5 1.5 0 0 0 1.356 1.493L5.5 19h13a1.5 1.5 0 0 0 1.493-1.356L20 17.5v-8A1.5 1.5 0 0 0 18.5 8ZM8 11a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Zm8 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Z"
+    />
+  </svg>
+)

src/components/icons/platform/NeteaseIcon.tsx

@@ -0,0 +1,15 @@
+export function NeteaseCloudMusicIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M10.422 11.375c-.294 1.028.012 2.065.784 2.653c1.061.81 2.565.3 2.874-.995c.08-.337.103-.722.027-1.056c-.23-1.001-.521-1.988-.792-2.996c-1.33.154-2.543 1.172-2.893 2.394Zm5.548-.287c.273 1.012.285 2.017-.127 3c-1.128 2.69-4.722 3.14-6.573.826c-1.302-1.627-1.28-3.961.06-5.734c.78-1.032 1.804-1.707 3.048-2.054l.379-.104c-.084-.415-.188-.816-.243-1.224c-.176-1.317.512-2.503 1.744-3.04c1.226-.535 2.708-.216 3.53.76c.406.479.395 1.08-.025 1.464c-.412.377-.997.346-1.435-.09c-.247-.246-.51-.44-.877-.436c-.525.006-.987.418-.945.937c.037.468.172.93.3 1.386c.022.078.216.135.338.153c1.333.197 2.504.731 3.472 1.676c2.558 2.493 2.861 6.531.672 9.44c-1.529 2.032-3.61 3.169-6.127 3.409c-4.621.44-8.664-2.53-9.7-7.058C2.516 10.255 4.84 5.831 8.796 4.25c.586-.234 1.143-.031 1.371.498c.232.537-.019 1.086-.61 1.35c-2.368 1.06-3.817 2.855-4.215 5.423c-.533 3.434 1.656 6.777 5 7.722c2.723.769 5.658-.167 7.308-2.33c1.586-2.08 1.4-5.1-.427-6.874A3.978 3.978 0 0 0 15.4 9.026c.198.716.389 1.388.57 2.062Z"
+      />
+    </svg>
+  )
+}

src/components/widgets/home/SocialIcon.tsx

@@ -1,5 +1,9 @@
+/* eslint-disable react/jsx-key */
 import { memo, useMemo } from 'react'
+import type { ReactNode } from 'react'
 
+import { BilibiliIcon } from '~/components/icons/platform/BilibiliIcon'
+import { NeteaseCloudMusicIcon } from '~/components/icons/platform/NeteaseIcon'
 import { MotionButtonBase } from '~/components/ui/button'
 import { FloatPopover } from '~/components/ui/float-popover'
 
@@ -16,82 +20,92 @@ const type2Copy = {
   rss: 'RSS',
   email: 'Email',
   feed: 'RSS',
+  bilibili: '哔哩哔哩',
+  netease: '网易云音乐',
+
+  qq: 'QQ',
+  wechat: '微信',
+  weibo: '微博',
 } as any
 const icons = new Set(Object.keys(type2Copy))
+
+const iconSet: Record<
+  string,
+  [string, ReactNode, string, (id: string) => string]
+> = {
+  github: [
+    'Github',
+    <i className="icon-[mingcute--github-line]" />,
+    '#181717',
+    (id) => `https://github.com/${id}`,
+  ],
+  twitter: [
+    'Twitter',
+    <i className="icon-[mingcute--twitter-line]" />,
+    '#1DA1F2',
+    (id) => `https://twitter.com/${id}`,
+  ],
+  telegram: [
+    'Telegram',
+    <i className="icon-[mingcute--telegram-line]" />,
+    '#0088cc',
+    (id) => `https://t.me/${id}`,
+  ],
+  mail: [
+    'Email',
+    <i className="icon-[mingcute--mail-line]" />,
+    '#D44638',
+    (id) => `mailto:${id}`,
+  ],
+  rss: [
+    'RSS',
+    <i className="icon-[mingcute--rss-line]" />,
+    '#FFA500',
+    (id) => id,
+  ],
+  bilibili: [
+    '哔哩哔哩',
+    <BilibiliIcon />,
+    '#00A1D6',
+    (id) => `https://space.bilibili.com/${id}`,
+  ],
+  netease: [
+    '网易云音乐',
+    <NeteaseCloudMusicIcon />,
+    '#C20C0C',
+    (id) => `https://music.163.com/#/user/home?id=${id}`,
+  ],
+  qq: [
+    'QQ',
+    <i className="icon-[mingcute--qq-fill]" />,
+    '#1e6fff',
+    (id) => `https://wpa.qq.com/msgrd?v=3&uin=${id}&site=qq&menu=yes`,
+  ],
+  wechat: [
+    '微信',
+    <i className="icon-[mingcute--wechat-fill]" />,
+    '#2DC100',
+    (id) => id,
+  ],
+  weibo: [
+    '微博',
+    <i className="icon-[mingcute--weibo-line]" />,
+    '#E6162D',
+    (id) => `https://weibo.com/${id}`,
+  ],
+}
+
 export const isSupportIcon = (icon: string) => icons.has(icon)
 export const SocialIcon = memo((props: SocialIconProps) => {
   const { id, type } = props
-  const Icon = useMemo(() => {
-    switch (type) {
-      case 'github': {
-        return <i className="icon-[mingcute--github-line]" />
-      }
-      case 'twitter': {
-        return <i className="icon-[mingcute--twitter-line]" />
-      }
-
-      case 'telegram': {
-        return <i className="icon-[mingcute--telegram-line]" />
-      }
-      case 'mail':
-      case 'email': {
-        return <i className="icon-[mingcute--mail-line]" />
-      }
-      case 'rss':
-      case 'feed': {
-        return <i className="icon-[mingcute--rss-line]" />
-      }
-    }
-
-    return null
-  }, [type])
-  const href = useMemo(() => {
-    switch (type) {
-      case 'github': {
-        return `https://github.com/${id}`
-      }
-      case 'twitter': {
-        return `https://twitter.com/${id}`
-      }
-
-      case 'telegram': {
-        return `https://t.me/${id}`
-      }
-      case 'mail':
-      case 'email': {
-        return `mailto:${id}`
-      }
-      case 'rss':
-      case 'feed': {
-        return id
-      }
-    }
-  }, [id, type])
-
-  const iconBg = useMemo(() => {
-    switch (type) {
-      case 'github': {
-        return '#181717'
-      }
-      case 'twitter': {
-        return '#1DA1F2'
-      }
 
-      case 'telegram': {
-        return '#0088cc'
-      }
-      case 'mail':
-      case 'email': {
-        return '#D44638'
-      }
-      case 'rss':
-      case 'feed': {
-        return '#FFA500'
-      }
-    }
+  const [name, Icon, iconBg, hrefFn] = useMemo(() => {
+    const [name, Icon, iconBg, hrefFn] = iconSet[type] || []
+    return [name, Icon, iconBg, hrefFn]
   }, [type])
 
-  if (!Icon) return null
+  if (!name) return null
+  const href = hrefFn(id)
 
   return (
     <FloatPopover