新增urls页面

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@douyinfe/semi-icons": "^2.70.1",
     "@douyinfe/semi-ui": "^2.70.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",

src/components/Footer.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {FaCloudflare, FaReact} from "react-icons/fa";
 import {RiTailwindCssFill} from "react-icons/ri";
+import {IconSemiLogo} from "@douyinfe/semi-icons";
 
 const Footer = ({github}) => {
     return (
@@ -30,12 +31,19 @@ const Footer = ({github}) => {
                             <RiTailwindCssFill className="text-teal-400 text-lg"/>
                             <span>Tailwind CSS</span>
                         </a>
+                        <a
+                            href="https://semi.design/zh-CN/"
+                            className="flex items-center space-x-1 text-blue-400 hover:underline"
+                        >
+                            <IconSemiLogo className="text-black text-lg"/>
+                            <span>Semi Design</span>
+                        </a>
                         <a
                             href="https://www.cloudflare.com/"
                             className="flex items-center space-x-1 text-blue-400 hover:underline"
                         >
                             <FaCloudflare className="text-orange-500 text-lg"/>
-                            <span>Cloudflare</span>
+                            <span>Cloud flare</span>
                         </a>
                     </p>
                 </div>

src/components/NavBar.jsx

@@ -28,12 +28,12 @@ const NavBar = ({skipUrl}) => {
                     {/*>*/}
                     {/*    Tools*/}
                     {/*</Link>*/}
-                    {/*<Link*/}
-                    {/*    to="/urls"*/}
-                    {/*    className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200"*/}
-                    {/*>*/}
-                    {/*    Urls*/}
-                    {/*</Link>*/}
+                    <Link
+                        to="/urls"
+                        className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200"
+                    >
+                        Urls
+                    </Link>
                     <a
                         href={skipUrl.note}
                         target="_blank"

src/components/Urls/CustomCardList.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Card, Avatar, Popover} from '@douyinfe/semi-ui';
+import {IconInfoCircle} from '@douyinfe/semi-icons';
+import {cn} from "../../lib/utils";
+
+const CustomCardList = ({data, className}) => {
+    return (
+        <div
+            className={cn(
+                className,
+                'flex flex-col rounded-xl border border-gray-200 p-5 gap-y-6 sm:gap-y-8'
+            )}
+        >
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                {data.map((item, index) => (
+                    <Card
+                        key={index}
+                        shadows="hover"
+                        bodyStyle={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }}
+                        onClick={item.src ? () => window.open(item.src, '_blank') : undefined}
+                        className="group relative border border-gray-200 rounded-lg hover:shadow-lg transition-all"
+                    >
+                        <Card.Meta
+                            title={item.title}
+                            avatar={
+                                <Avatar
+                                    alt={item.title}
+                                    size="default"
+                                    src={
+                                        item.img_src ? item.img_src
+                                            : 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/card-meta-avatar-docs-demo.jpg'
+                                    }
+                                />
+                            }
+                        />
+                        {item.describe && (
+                            <Popover
+                                position="top"
+                                showArrow
+                                content={
+                                    <article className="p-2 text-sm text-gray-200 bg-gray-800 rounded shadow-lg">
+                                        {item.describe}
+                                    </article>
+                                }
+                            >
+                                <IconInfoCircle
+                                    className="text-gray-400 group-hover:text-primary cursor-pointer"
+                                />
+                            </Popover>
+                        )}
+                    </Card>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default CustomCardList;

src/components/Urls/UrlsCategorySection.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import CustomCardList from './CustomCardList';
+
+const ToolsCategorySection = ({title, data}) => {
+    return (
+        <div className="w-full">
+            <h2 className="mb-6 text-xl font-bold mt-10">{title}</h2>
+            <div className="mb-6">
+                <CustomCardList data={data}/>
+            </div>
+        </div>
+    );
+};
+
+export default ToolsCategorySection;

src/components/Urls/index.jsx

@@ -1,13 +1,21 @@
 import React from "react";
+import {motion} from "framer-motion";
 import {Button} from "@douyinfe/semi-ui";
 import {IoIosArrowBack} from "react-icons/io";
 import {useNavigate} from "react-router-dom";
+import {frindsList, pageVariants} from "../../config";
+import ToolsCategorySection from "./UrlsCategorySection";
 
 const Index = () => {
     const navigate = useNavigate()
     return (
-        <div
+        <motion.div
             className="w-[60%] mx-auto min-h-screen dark:bg-gray-900 text-white flex flex-col items-center p-4 mt-3"
+            variants={pageVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{duration: 0.5}}
         >
             <div className="w-full flex justify-start text-white">
                 <Button
@@ -19,7 +27,10 @@ const Index = () => {
                     返回首页
                 </Button>
             </div>
-        </div>
+
+            <ToolsCategorySection title="Friends" data={frindsList} />
+
+        </motion.div>
     );
 };
 

src/config.js

@@ -30,6 +30,39 @@ export const pageVariants = {
     exit: { opacity: 0, x: 100 },
 };
 
+export const frindsList = [
+    {
+        title: '声控烤箱',
+        src: 'https://blog.kazoottt.top/',
+        describe: '毛怪俱乐部前端',
+        img_src: 'https://img.tteam.icu/i/2024/11/30/114ctsb-3.webp'
+    },
+    {
+        title: '行走在云端',
+        src: 'https://hexo.tomsawyer2.xyz/',
+        describe: '毛怪俱乐部前端',
+        img_src: 'https://img.tteam.icu/i/2024/11/30/116en4y-3.webp'
+    },
+    {
+        title: 'Poivre',
+        src: 'https://blog.poivrehxx.site/',
+        describe: '毛怪俱乐部前端',
+        img_src: 'https://img.tteam.icu/i/2024/12/01/xu5aoq-3.webp'
+    },
+    {
+        title: 'Roi\'s Blog',
+        src: 'https://roi.moe/',
+        describe: '毛怪俱乐部运维',
+        img_src: 'https://img.tteam.icu/i/2024/12/01/r8p265-3.webp'
+    },
+    {
+        title: '思无道siudao',
+        src: 'https://siwudao.github.io/',
+        describe: '毛怪俱乐部切片',
+        img_src: 'https://img.tteam.icu/i/2024/11/30/12e1ezb-3.webp'
+    }
+]
+
 export const softwareTools = {
     development: {
         title: 'Development',
@@ -136,6 +169,36 @@ export const devices = {
             }
         }
     },
+    computer_device: {
+        title: 'Computer Input Device',
+        sections: {
+            devices: {
+                title: 'Devices',
+                tools: [
+                    {
+                        name: '达尔优 A87 Pro',
+                        description: '家用',
+                    },
+                    {
+                        name: '达尔优 A87',
+                        description: '公司用',
+                    },
+                    {
+                        name: '罗技 G304',
+                        description: '家用&公司用',
+                    },
+                    {
+                        name: '小米挂灯 1S',
+                        description: '家用护眼',
+                    },
+                    {
+                        name: 'KOORUI MB27S7U',
+                        description: '家用副屏',
+                    }
+                ]
+            }
+        }
+    },
     mobile: {
         title: 'Mobile Devices',
         sections: {
@@ -185,6 +248,10 @@ export const devices = {
                     {
                         name: 'Sony WH-XM3',
                         description: '头戴式耳机'
+                    },
+                    {
+                        name: '小爱音响 Pro',
+                        description: '智能邮箱'
                     }
                 ]
             }