功能：完成 GitHub 贡献图表

loongzcode · Dec 1, 2024 · 05a9ec9 · 05a9ec9
1 parent d090831
commit 05a9ec9
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "next-nprogress-bar": "^2.3.13",
     "react": "^18",
     "react-dom": "^18",
+    "react-github-calendar": "^4.5.1",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",

diff --git a/src/app/my/component/Calendar/index.scss b/src/app/my/component/Calendar/index.scss
@@ -0,0 +1,5 @@
+.react-activity-calendar__scroll-container::-webkit-scrollbar {
+    width: 0;
+    /* 隐藏滚动条 */
+    height: 0;
+}
diff --git a/src/app/my/component/Calendar/index.tsx b/src/app/my/component/Calendar/index.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { useConfigStore } from '@/stores'
+import GitHubCalendar from "react-github-calendar"
+import "./index.scss"
+
+export default () => {
+    const isDark = useConfigStore(state => state.isDark)
+
+    return (
+        <>
+            <GitHubCalendar username="liuyuyang01" colorScheme={isDark ? "dark" : "light"} hideTotalCount />
+        </>
+    )
+}
diff --git a/src/app/my/component/Character/index.tsx b/src/app/my/component/Character/index.tsx
@@ -29,49 +29,46 @@ export default ({ data }: Props) => {
     }, [])
 
     return (
-        <>
-            <div data-aos="fade-down" className="w-full md:w-7/12 flex flex-col mr-0 md:mr-20">
-                <div className="text-center text-xl mb-8">我的性格</div>
+        <div data-aos="fade-down" className="w-full md:w-7/12 flex flex-col mr-0 md:mr-20">
+            <div className="text-center text-xl mb-8">我的性格</div>
 
-                <div className="flex flex-col sm:flex-row justify-between items-center">
-                    <div className="flex sm:block w-[40%]">
-                        <div className="text-[30px] sm:text-[40px] text-[#33a474] font-medium font-sans">提倡者</div>
-                        <div className="text-[#666] dark:text-[#8c9ab1] hidden sm:block">INFJ</div>
-                        <Image src={INFJ} alt="性格" width={200}></Image>
-                        <Link href="https://www.16personalities.com/ch/infj-人格" className="block w-full mt-2 text-center text-[#666] text-xs hover:text-[#33a474]">了解一下</Link>
-                    </div>
+            <div className="flex flex-col sm:flex-row justify-between items-center">
+                <div className="flex sm:block w-[40%]">
+                    <div className="text-[30px] sm:text-[40px] text-[#33a474] font-medium font-sans">提倡者</div>
+                    <div className="text-[#666] dark:text-[#8c9ab1] hidden sm:block">INFJ</div>
+                    <Image src={INFJ} alt="性格" width={200}></Image>
+                    <Link href="https://www.16personalities.com/ch/infj-人格" className="block w-full mt-2 text-center text-[#666] text-xs hover:text-[#33a474]">了解一下</Link>
+                </div>
 
-                    <div className="w-full sm:w-[65%] mt-10 sm:mt-0 space-y-10">
-                        {
-                            data?.map(({ value, text1, text2, content, color }, index) => {
-                                return (
-                                    <div key={index} className="flex justify-center items-center">
-                                        <span className="min-w-[60px] dark:text-[#8c9ab1] text-xs sm:text-base">{text1}</span>
+                <div className="w-full sm:w-[65%] mt-10 sm:mt-0 space-y-10">
+                    {
+                        data?.map(({ value, text1, text2, content, color }, index) => {
+                            return (
+                                <div key={index} className="flex justify-center items-center">
+                                    <span className="min-w-[60px] dark:text-[#8c9ab1] text-xs sm:text-base">{text1}</span>
 
-                                        <div className="relative w-full max-w-md">
-                                            <Progress
-                                                value={value}
-                                                className={`relative [&>div]:justify-center ${colors[index]}`}
-                                            />
-                                            <div className="absolute -top-[25px] -translate-x-1/2 left-0 h-full flex items-center justify-center" style={{ left: `${value}%` }}>
-                                                <span className={`flex items-center text-[${color}]`}>
-                                                    {value}%
-                                                    <Tooltip content={content}>
-                                                        <BiQuestionMark className="w-5 h-5 ml-2 rounded-full p-[2px] bg-[#eee] dark:bg-black-b cursor-pointer" />
-                                                    </Tooltip>
-                                                </span>
-                                            </div>
+                                    <div className="relative w-full max-w-md">
+                                        <Progress
+                                            value={value}
+                                            className={`relative [&>div]:justify-center ${colors[index]}`}
+                                        />
+                                        <div className="absolute -top-[25px] -translate-x-1/2 left-0 h-full flex items-center justify-center" style={{ left: `${value}%` }}>
+                                            <span className={`flex items-center text-[${color}]`}>
+                                                {value}%
+                                                <Tooltip content={content}>
+                                                    <BiQuestionMark className="w-5 h-5 ml-2 rounded-full p-[2px] bg-[#eee] dark:bg-black-b cursor-pointer" />
+                                                </Tooltip>
+                                            </span>
                                         </div>
-
-                                        <span className="text-end min-w-[60px] dark:text-[#8c9ab1] text-xs sm:text-base">{text2}</span>
                                     </div>
-                                );
-                            })
-                        }
-                    </div>
+
+                                    <span className="text-end min-w-[60px] dark:text-[#8c9ab1] text-xs sm:text-base">{text2}</span>
+                                </div>
+                            );
+                        })
+                    }
                 </div>
             </div>
-
-        </>
+        </div>
     )
 }
diff --git a/src/app/my/page.tsx b/src/app/my/page.tsx
@@ -9,6 +9,7 @@ import Technology from './component/Technology'
 import Project from './component/Project'
 import CurriculumVitae from './component/CurriculumVitae'
 import Info from "./component/Info";
+import Calendar from "./component/Calendar"
 
 export default () => {
   const data: MyData = {
@@ -177,6 +178,10 @@ export default () => {
           <Info data={data?.info} />
         </div>
 
+        <div className='flex justify-center mt-16 px-10'>
+          <Calendar />
+        </div>
+
         <div className="flex flex-col md:flex-row w-[90%] sm:w-9/12 mt-16 mx-auto">
           <Character data={data?.character} />
           <Goals data={data?.goals} />