opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 23:40:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

tighten footer

Browse Source
This commit is contained in:
Thomas Camlong 2025-04-17 10:46:15 +02:00
parent c1599b49d1
commit b13b34fc40
No known key found for this signature in database
GPG Key ID: A678F374F428457B
1 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/src/components/footer.tsx
View File

@ -1,10 +1,10 @@
"use client" "use client";
import { REPO_PATH } from "@/constants" import { REPO_PATH } from "@/constants";
import { motion } from "framer-motion" import { motion } from "framer-motion";
import { ExternalLink, Github, Heart } from "lucide-react" import { ExternalLink, Github, Heart } from "lucide-react";
import Link from "next/link" import Link from "next/link";
import { useState } from "react" import { useState } from "react";
// Pre-define unique IDs for animations to avoid using array indices as keys // Pre-define unique IDs for animations to avoid using array indices as keys
const HOVER_HEART_IDS = [ const HOVER_HEART_IDS = [
@ -16,44 +16,41 @@ const HOVER_HEART_IDS = [
"hover-heart-6", "hover-heart-6",
"hover-heart-7", "hover-heart-7",
"hover-heart-8", "hover-heart-8",
] ];
const BURST_HEART_IDS = ["burst-heart-1", "burst-heart-2", "burst-heart-3", "burst-heart-4", "burst-heart-5"] const BURST_HEART_IDS = [
"burst-heart-1",
"burst-heart-2",
"burst-heart-3",
"burst-heart-4",
"burst-heart-5",
];
export function Footer() { export function Footer() {
const [isHeartHovered, setIsHeartHovered] = useState(false) const [isHeartHovered, setIsHeartHovered] = useState(false);
const [isHeartFilled, setIsHeartFilled] = useState(false) const [isHeartFilled, setIsHeartFilled] = useState(false);
// Toggle heart fill state and add extra mini hearts on click // Toggle heart fill state and add extra mini hearts on click
const handleHeartClick = () => { const handleHeartClick = () => {
setIsHeartFilled(!isHeartFilled) setIsHeartFilled(!isHeartFilled);
} };
return ( return (
<footer className="border-t py-12 bg-background relative overflow-hidden"> <footer className="border-t py-4 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-rose-500/[0.03] via-transparent to-rose-500/[0.03]" /> <div className="absolute inset-0 bg-gradient-to-r from-rose-500/[0.03] via-transparent to-rose-500/[0.03]" />
<div className="container mx-auto px-4 md:px-6 relative z-10"> <div className="container mx-auto px-4 md:px-6 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
<motion.div <div className="flex flex-col gap-3">
className="flex flex-col gap-3" <h3 className="font-bold text-lg text-foreground/90">
initial={{ opacity: 0, y: 20 }} Dashboard Icons
whileInView={{ opacity: 1, y: 0 }} </h3>
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
<h3 className="font-bold text-lg text-foreground/90">Dashboard Icons</h3>
<p className="text-sm text-muted-foreground leading-relaxed"> <p className="text-sm text-muted-foreground leading-relaxed">
A collection of curated icons for services, applications and tools, designed specifically for dashboards and app directories. A collection of curated icons for services, applications and
tools, designed specifically for dashboards and app directories.
</p> </p>
</motion.div> </div>
<motion.div <div className="flex flex-col gap-3">
className="flex flex-col gap-3"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<h3 className="font-bold text-lg text-foreground/90">Links</h3> <h3 className="font-bold text-lg text-foreground/90">Links</h3>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Link <Link
@ -78,7 +75,7 @@ export function Footer() {
<Github className="h-3.5 w-3.5 group-hover:text-rose-500 transition-colors duration-200 flex-shrink-0 self-center" /> <Github className="h-3.5 w-3.5 group-hover:text-rose-500 transition-colors duration-200 flex-shrink-0 self-center" />
</Link> </Link>
</div> </div>
</motion.div> </div>
<motion.div <motion.div
className="flex flex-col gap-3" className="flex flex-col gap-3"
@ -135,7 +132,9 @@ export function Footer() {
}} }}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
> >
<Heart className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : "text-rose-500"}`} /> <Heart
className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : "text-rose-500"}`}
/>
</motion.div> </motion.div>
))} ))}
@ -183,7 +182,10 @@ export function Footer() {
}} }}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
> >
<Heart className="h-2 w-2 text-rose-500" fill="#f43f5e" /> <Heart
className="h-2 w-2 text-rose-500"
fill="#f43f5e"
/>
</motion.div> </motion.div>
))} ))}
</> </>
@ -203,16 +205,10 @@ export function Footer() {
</motion.div> </motion.div>
</div> </div>
<motion.div <div className="mt-4 text-center text-sm text-muted-foreground/80">
className="mt-10 pt-6 border-t text-center text-sm text-muted-foreground/80"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.3 }}
>
<p>© {new Date().getFullYear()} Homarr Labs. All rights reserved.</p> <p>© {new Date().getFullYear()} Homarr Labs. All rights reserved.</p>
</motion.div> </div>
</div> </div>
</footer> </footer>
) );
} }