personal website
nekomimi.pet
1import { useSystemTheme } from "../../hooks/useSystemTheme"
2
3export function Footer() {
4 const isLightMode = useSystemTheme()
5
6 return (
7 <footer
8 className="py-12 sm:py-16 border-t"
9 style={isLightMode ? {
10 backgroundColor: '#e2e2e2',
11 color: 'oklch(0.2 0.02 255)',
12 borderColor: 'oklch(0.88 0.01 255)'
13 } : {}}
14 >
15 <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 sm:gap-8">
16 <div className="flex items-center gap-4">
17 <button
18 className="group p-3 rounded-lg border transition-all duration-300"
19 style={isLightMode ? {
20 borderColor: 'oklch(0.88 0.01 255)'
21 } : {}}
22 onMouseEnter={(e) => {
23 if (isLightMode) {
24 e.currentTarget.style.borderColor = 'oklch(0.48 0.015 255)'
25 }
26 }}
27 onMouseLeave={(e) => {
28 if (isLightMode) {
29 e.currentTarget.style.borderColor = 'oklch(0.88 0.01 255)'
30 }
31 }}
32 >
33 <svg
34 className="w-4 h-4 transition-colors duration-300"
35 style={isLightMode ? {
36 color: 'oklch(0.48 0.015 255)'
37 } : {}}
38 fill="none"
39 stroke="currentColor"
40 viewBox="0 0 24 24"
41 onMouseEnter={(e) => {
42 if (isLightMode) {
43 e.currentTarget.style.color = 'oklch(0.2 0.02 255)'
44 }
45 }}
46 onMouseLeave={(e) => {
47 if (isLightMode) {
48 e.currentTarget.style.color = 'oklch(0.48 0.015 255)'
49 }
50 }}
51 >
52 <path
53 strokeLinecap="round"
54 strokeLinejoin="round"
55 strokeWidth={2}
56 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
57 />
58 </svg>
59 </button>
60 </div>
61 </div>
62 </footer>
63 )
64}