ai-workspace-services/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update footer social links to GitHub, X and Linkedin

Browse Source
This commit is contained in:
Haitao Pan 2026-01-30 12:48:52 +08:00
parent 4f3f54a579
commit b0fc695e4f
2 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next-env.d.ts vendored
View File

@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

52
src/components/Footer.tsx
View File

@ -1,29 +1,35 @@
'use client'
import { BookOpen, Github, Globe, Link, MessageCircle, Sparkles, Moon, Sun } from 'lucide-react'
"use client";
import { Github, Linkedin, Moon, Sun, Twitter } from "lucide-react";
import { useThemeStore } from '@components/theme'
import { useViewStore } from './theme/viewStore'
import { useThemeStore } from "@components/theme";
import { useViewStore } from "./theme/viewStore";
export default function Footer() {
const isDark = useThemeStore((state) => state.isDark)
const toggleTheme = useThemeStore((state) => state.toggleTheme)
const { view, setView } = useViewStore()
const isDark = useThemeStore((state) => state.isDark);
const toggleTheme = useThemeStore((state) => state.toggleTheme);
const { view, setView } = useViewStore();
const socials = [
{ label: 'GitHub', icon: Github, href: 'https://github.com/cloud-neutral-toolkit' },
{ label: 'Repository', icon: Link, href: 'https://hub.docker.com/u/cloudneutral' },
{ label: 'Docs', icon: BookOpen, href: '#' },
{ label: 'Globe', icon: Globe, href: '#' },
{ label: '微信公众号', icon: MessageCircle, href: '#' },
{ label: '小红书', icon: Sparkles, href: '#' },
]
{
label: "GitHub",
icon: Github,
href: "https://github.com/cloud-neutrl-toolkit",
},
{ label: "X", icon: Twitter, href: "https://x.com/Cloud_Neutral" },
{
label: "Linkedin",
icon: Linkedin,
href: "https://www.linkedin.com/in/haitaopan/",
},
];
const toggleLabel = isDark ? '切换为浅色主题' : '切换为深色主题'
const viewToggleLabel = view === 'classic' ? 'Switch to Material View' : 'Switch to Classic View'
const toggleLabel = isDark ? "切换为浅色主题" : "切换为深色主题";
const viewToggleLabel =
view === "classic" ? "Switch to Material View" : "Switch to Classic View";
const handleViewToggle = () => {
setView(view === 'classic' ? 'material' : 'classic')
}
setView(view === "classic" ? "material" : "classic");
};
return (
<footer className="mt-12 flex flex-col items-center justify-center gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-4 text-sm text-slate-300">
@ -50,7 +56,7 @@ export default function Footer() {
className="group flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition hover:border-indigo-400/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
>
<span className="material-symbols-outlined text-xl">
{view === 'classic' ? 'view_quilt' : 'view_cozy'}
{view === "classic" ? "view_quilt" : "view_cozy"}
</span>
</button>
<button
@ -63,21 +69,21 @@ export default function Footer() {
>
<span className="relative z-10 flex w-full items-center justify-between text-slate-300">
<Moon
className={`h-4 w-4 transition-colors ${isDark ? 'text-indigo-100' : 'text-slate-500'}`}
className={`h-4 w-4 transition-colors ${isDark ? "text-indigo-100" : "text-slate-500"}`}
aria-hidden
/>
<Sun
className={`h-4 w-4 transition-colors ${isDark ? 'text-slate-500' : 'text-amber-300'}`}
className={`h-4 w-4 transition-colors ${isDark ? "text-slate-500" : "text-amber-300"}`}
aria-hidden
/>
</span>
<span
aria-hidden
className={`absolute inset-y-1 left-1 h-8 w-8 rounded-full bg-white/90 shadow-sm transition-transform duration-300 ease-out ${isDark ? 'translate-x-0' : 'translate-x-10'}`}
className={`absolute inset-y-1 left-1 h-8 w-8 rounded-full bg-white/90 shadow-sm transition-transform duration-300 ease-out ${isDark ? "translate-x-0" : "translate-x-10"}`}
/>
</button>
</div>
</div>
</footer>
)
);
}