mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-28 14:09:05 +08:00
Format codebase
This commit is contained in:
Thomas Camlong
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { REPO_PATH } from "@/constants";
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink, Github, Heart } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { REPO_PATH } from "@/constants"
|
||||
import { motion } from "framer-motion"
|
||||
import { ExternalLink, Github, Heart } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
|
||||
// Pre-define unique IDs for animations to avoid using array indices as keys
|
||||
const HOVER_HEART_IDS = [
|
||||
@@ -16,23 +16,17 @@ const HOVER_HEART_IDS = [
|
||||
"hover-heart-6",
|
||||
"hover-heart-7",
|
||||
"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() {
|
||||
const [isHeartHovered, setIsHeartHovered] = useState(false);
|
||||
const [isHeartFilled, setIsHeartFilled] = useState(false);
|
||||
const [isHeartHovered, setIsHeartHovered] = useState(false)
|
||||
const [isHeartFilled, setIsHeartFilled] = useState(false)
|
||||
|
||||
// Toggle heart fill state and add extra mini hearts on click
|
||||
const handleHeartClick = () => {
|
||||
setIsHeartFilled(!isHeartFilled);
|
||||
};
|
||||
setIsHeartFilled(!isHeartFilled)
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="border-t py-4 relative overflow-hidden">
|
||||
@@ -41,28 +35,19 @@ export function Footer() {
|
||||
<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="flex flex-col gap-3">
|
||||
<h3 className="font-bold text-lg text-foreground/90">
|
||||
Dashboard Icons
|
||||
</h3>
|
||||
<h3 className="font-bold text-lg text-foreground/90">Dashboard Icons</h3>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<h3 className="font-bold text-lg text-foreground/90">Links</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-muted-foreground hover: transition-colors duration-200 flex items-center w-fit"
|
||||
>
|
||||
<Link href="/" className="text-sm text-muted-foreground hover: transition-colors duration-200 flex items-center w-fit">
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/icons"
|
||||
className="text-sm text-muted-foreground hover: transition-colors duration-200 flex items-center w-fit"
|
||||
>
|
||||
<Link href="/icons" className="text-sm text-muted-foreground hover: transition-colors duration-200 flex items-center w-fit">
|
||||
<span>Icons</span>
|
||||
</Link>
|
||||
<Link
|
||||
@@ -132,9 +117,7 @@ export function Footer() {
|
||||
}}
|
||||
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" : ""}`}
|
||||
/>
|
||||
<Heart className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : ""}`} />
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
@@ -182,10 +165,7 @@ export function Footer() {
|
||||
}}
|
||||
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 "
|
||||
fill="#f43f5e"
|
||||
/>
|
||||
<Heart className="h-2 w-2 " fill="#f43f5e" />
|
||||
</motion.div>
|
||||
))}
|
||||
</>
|
||||
@@ -210,5 +190,5 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,48 +1,43 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { IconSubmissionForm } from "@/components/icon-submission-form";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
import { REPO_PATH } from "@/constants";
|
||||
import { getIconsArray } from "@/lib/api";
|
||||
import type { IconWithName } from "@/types/icons";
|
||||
import { motion } from "framer-motion";
|
||||
import { Github, Search } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { CommandMenu } from "./command-menu";
|
||||
import { HeaderNav } from "./header-nav";
|
||||
import { Button } from "./ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "./ui/tooltip";
|
||||
import { IconSubmissionForm } from "@/components/icon-submission-form"
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher"
|
||||
import { REPO_PATH } from "@/constants"
|
||||
import { getIconsArray } from "@/lib/api"
|
||||
import type { IconWithName } from "@/types/icons"
|
||||
import { motion } from "framer-motion"
|
||||
import { Github, Search } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { useEffect, useState } from "react"
|
||||
import { CommandMenu } from "./command-menu"
|
||||
import { HeaderNav } from "./header-nav"
|
||||
import { Button } from "./ui/button"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
|
||||
|
||||
export function Header() {
|
||||
const [iconsData, setIconsData] = useState<IconWithName[]>([]);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const [commandMenuOpen, setCommandMenuOpen] = useState(false);
|
||||
const [iconsData, setIconsData] = useState<IconWithName[]>([])
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const [commandMenuOpen, setCommandMenuOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
async function loadIcons() {
|
||||
try {
|
||||
const icons = await getIconsArray();
|
||||
setIconsData(icons);
|
||||
setIsLoaded(true);
|
||||
const icons = await getIconsArray()
|
||||
setIconsData(icons)
|
||||
setIsLoaded(true)
|
||||
} catch (error) {
|
||||
console.error("Failed to load icons:", error);
|
||||
setIsLoaded(true);
|
||||
console.error("Failed to load icons:", error)
|
||||
setIsLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
loadIcons();
|
||||
}, []);
|
||||
loadIcons()
|
||||
}, [])
|
||||
|
||||
// Function to open the command menu
|
||||
const openCommandMenu = () => {
|
||||
setCommandMenuOpen(true);
|
||||
};
|
||||
setCommandMenuOpen(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
@@ -53,13 +48,8 @@ export function Header() {
|
||||
>
|
||||
<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18">
|
||||
<div className="flex items-center gap-2 md:gap-6">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-lg md:text-xl font-bold group hidden md:block"
|
||||
>
|
||||
<span className="transition-colors duration-300 group-hover:">
|
||||
Dashboard Icons
|
||||
</span>
|
||||
<Link href="/" className="text-lg md:text-xl font-bold group hidden md:block">
|
||||
<span className="transition-colors duration-300 group-hover:">Dashboard Icons</span>
|
||||
</Link>
|
||||
<div className="flex-nowrap">
|
||||
<HeaderNav />
|
||||
@@ -122,13 +112,7 @@ export function Header() {
|
||||
</div>
|
||||
|
||||
{/* Single instance of CommandMenu */}
|
||||
{isLoaded && (
|
||||
<CommandMenu
|
||||
icons={iconsData}
|
||||
open={commandMenuOpen}
|
||||
onOpenChange={setCommandMenuOpen}
|
||||
/>
|
||||
)}
|
||||
{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />}
|
||||
</motion.header>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion, useAnimation, useInView } from "framer-motion";
|
||||
import { Github, Heart, Search } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { AnimatedShinyText } from "./magicui/animated-shiny-text";
|
||||
import { AuroraText } from "./magicui/aurora-text";
|
||||
import { InteractiveHoverButton } from "./magicui/interactive-hover-button";
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { motion, useAnimation, useInView } from "framer-motion"
|
||||
import { Github, Heart, Search } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { AnimatedShinyText } from "./magicui/animated-shiny-text"
|
||||
import { AuroraText } from "./magicui/aurora-text"
|
||||
import { InteractiveHoverButton } from "./magicui/interactive-hover-button"
|
||||
|
||||
interface IconCardProps {
|
||||
name: string;
|
||||
imageUrl: string;
|
||||
name: string
|
||||
imageUrl: string
|
||||
}
|
||||
|
||||
function IconCard({ name, imageUrl }: IconCardProps) {
|
||||
@@ -23,11 +23,9 @@ function IconCard({ name, imageUrl }: IconCardProps) {
|
||||
<div className="w-16 h-16 flex items-center justify-center">
|
||||
<img src={imageUrl} alt={name} className="max-w-full max-h-full" />
|
||||
</div>
|
||||
<p className="text-sm text-center text-muted-foreground group-hover:text-foreground transition-colors">
|
||||
{name}
|
||||
</p>
|
||||
<p className="text-sm text-center text-muted-foreground group-hover:text-foreground transition-colors">{name}</p>
|
||||
</Card>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
function ElegantShape({
|
||||
@@ -40,28 +38,28 @@ function ElegantShape({
|
||||
mobileWidth,
|
||||
mobileHeight,
|
||||
}: {
|
||||
className?: string;
|
||||
delay?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
rotate?: number;
|
||||
gradient?: string;
|
||||
mobileWidth?: number;
|
||||
mobileHeight?: number;
|
||||
className?: string
|
||||
delay?: number
|
||||
width?: number
|
||||
height?: number
|
||||
rotate?: number
|
||||
gradient?: string
|
||||
mobileWidth?: number
|
||||
mobileHeight?: number
|
||||
}) {
|
||||
const controls = useAnimation();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, amount: 0.1 });
|
||||
const controls = useAnimation()
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true, amount: 0.1 })
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
checkMobile();
|
||||
window.addEventListener("resize", checkMobile);
|
||||
return () => window.removeEventListener("resize", checkMobile);
|
||||
}, []);
|
||||
setIsMobile(window.innerWidth < 768)
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener("resize", checkMobile)
|
||||
return () => window.removeEventListener("resize", checkMobile)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (isInView) {
|
||||
@@ -78,9 +76,9 @@ function ElegantShape({
|
||||
ease: [0.23, 0.86, 0.39, 0.96],
|
||||
opacity: { duration: 1.2 },
|
||||
},
|
||||
});
|
||||
})
|
||||
}
|
||||
}, [controls, delay, isInView, rotate]);
|
||||
}, [controls, delay, isInView, rotate])
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -122,11 +120,11 @@ function ElegantShape({
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export function HeroSection({ totalIcons }: { totalIcons: number }) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
|
||||
return (
|
||||
<div className="relative my-20 w-full flex items-center justify-center overflow-hidden">
|
||||
@@ -191,40 +189,26 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
|
||||
|
||||
<div className="relative z-10 container mx-auto px-4 md:px-6">
|
||||
<div className="max-w-4xl mx-auto text-center flex flex-col gap-4">
|
||||
<Link
|
||||
prefetch
|
||||
href="https://github.com/homarr-labs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mx-auto"
|
||||
>
|
||||
<Link prefetch href="https://github.com/homarr-labs" target="_blank" rel="noopener noreferrer" className="mx-auto">
|
||||
<Card className="group p-2 px-4 flex flex-row items-center gap-2 border-2 z-10 relative glass-effect motion-safe:motion-preset-slide-up motion-duration-1500 hover:scale-105 transition-all duration-300">
|
||||
<Heart
|
||||
// Filled when hovered
|
||||
className="h-4 w-4 text-primary group-hover:fill-primary transition-all duration-300"
|
||||
/>
|
||||
<span className="text-sm text-foreground/70 tracking-wide">
|
||||
Made with love by Homarr Labs
|
||||
</span>
|
||||
<span className="text-sm text-foreground/70 tracking-wide">Made with love by Homarr Labs</span>
|
||||
</Card>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-3xl sm:text-5xl md:text-7xl font-bold mb-4 md:mb-8 tracking-tight motion-safe:motion-preset-slide-up motion-duration-1500">
|
||||
Your definitive source for
|
||||
<br />
|
||||
<AuroraText colors={["#FA5352", "#FA5352", "orange"]}>
|
||||
dashboard icons
|
||||
</AuroraText>
|
||||
<AuroraText colors={["#FA5352", "#FA5352", "orange"]}>dashboard icons</AuroraText>
|
||||
</h1>
|
||||
|
||||
<motion.div
|
||||
custom={2}
|
||||
className="motion-safe:motion-preset-slide-up motion-duration-1500"
|
||||
>
|
||||
<motion.div custom={2} className="motion-safe:motion-preset-slide-up motion-duration-1500">
|
||||
<p className="text-sm sm:text-base md:text-xl text-muted-foreground mb-6 md:mb-8 leading-relaxed font-light tracking-wide max-w-2xl mx-auto px-4">
|
||||
A collection of <span className="font-medium ">{totalIcons}</span>{" "}
|
||||
curated icons for services, applications and tools, designed
|
||||
specifically for dashboards and app directories.
|
||||
A collection of <span className="font-medium ">{totalIcons}</span> curated icons for services, applications and tools,
|
||||
designed specifically for dashboards and app directories.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -232,11 +216,7 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
|
||||
custom={3}
|
||||
className="flex flex-col items-center gap-4 md:gap-6 mb-8 md:mb-12 motion-safe:motion-preset-slide-up motion-duration-1500"
|
||||
>
|
||||
<form
|
||||
action="/icons"
|
||||
method="GET"
|
||||
className="relative w-full max-w-md group"
|
||||
>
|
||||
<form action="/icons" method="GET" className="relative w-full max-w-md group">
|
||||
<Input
|
||||
name="q"
|
||||
type="search"
|
||||
@@ -257,11 +237,7 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
|
||||
<Link href="/icons">
|
||||
<InteractiveHoverButton className="rounded-md">Explore icons</InteractiveHoverButton>
|
||||
</Link>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-9 md:h-10 px-4 gap-2 backdrop-blur-sm"
|
||||
asChild
|
||||
>
|
||||
<Button variant="outline" className="h-9 md:h-10 px-4 gap-2 backdrop-blur-sm" asChild>
|
||||
<Link
|
||||
href="https://github.com/homarr-labs/dashboard-icons"
|
||||
target="_blank"
|
||||
@@ -279,5 +255,5 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/80 pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,73 +1,48 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { BASE_URL, REPO_PATH } from "@/constants";
|
||||
import type { AuthorData, Icon } from "@/types/icons";
|
||||
import confetti from "canvas-confetti";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Check,
|
||||
Copy,
|
||||
Download,
|
||||
FileType,
|
||||
Github,
|
||||
Moon,
|
||||
PaletteIcon,
|
||||
Sun,
|
||||
} from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useCallback, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Carbon } from "./carbon";
|
||||
import { MagicCard } from "./magicui/magic-card";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { BASE_URL, REPO_PATH } from "@/constants"
|
||||
import type { AuthorData, Icon } from "@/types/icons"
|
||||
import confetti from "canvas-confetti"
|
||||
import { motion } from "framer-motion"
|
||||
import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { useCallback, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { Carbon } from "./carbon"
|
||||
import { MagicCard } from "./magicui/magic-card"
|
||||
|
||||
export type IconDetailsProps = {
|
||||
icon: string;
|
||||
iconData: Icon;
|
||||
authorData: AuthorData;
|
||||
};
|
||||
icon: string
|
||||
iconData: Icon
|
||||
authorData: AuthorData
|
||||
}
|
||||
|
||||
export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
const authorName = authorData.name || authorData.login || "";
|
||||
const iconColorVariants = iconData.colors;
|
||||
const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString(
|
||||
"en-GB",
|
||||
{
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
},
|
||||
);
|
||||
const authorName = authorData.name || authorData.login || ""
|
||||
const iconColorVariants = iconData.colors
|
||||
const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
const getAvailableFormats = () => {
|
||||
switch (iconData.base) {
|
||||
case "svg":
|
||||
return ["svg", "png", "webp"];
|
||||
return ["svg", "png", "webp"]
|
||||
case "png":
|
||||
return ["png", "webp"];
|
||||
return ["png", "webp"]
|
||||
default:
|
||||
return [iconData.base];
|
||||
return [iconData.base]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const availableFormats = getAvailableFormats();
|
||||
const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>(
|
||||
{},
|
||||
);
|
||||
const availableFormats = getAvailableFormats()
|
||||
const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>({})
|
||||
|
||||
// Launch confetti from the pointer position
|
||||
const launchConfetti = useCallback((originX?: number, originY?: number) => {
|
||||
@@ -77,15 +52,8 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
ticks: 50,
|
||||
zIndex: 0,
|
||||
disableForReducedMotion: true,
|
||||
colors: [
|
||||
"#ff0a54",
|
||||
"#ff477e",
|
||||
"#ff7096",
|
||||
"#ff85a1",
|
||||
"#fbb1bd",
|
||||
"#f9bec7",
|
||||
],
|
||||
};
|
||||
colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
|
||||
}
|
||||
|
||||
// If we have origin coordinates, use them
|
||||
if (originX !== undefined && originY !== undefined) {
|
||||
@@ -96,103 +64,87 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
x: originX / window.innerWidth,
|
||||
y: originY / window.innerHeight,
|
||||
},
|
||||
});
|
||||
})
|
||||
} else {
|
||||
// Default to center of screen
|
||||
confetti({
|
||||
...defaults,
|
||||
particleCount: 50,
|
||||
origin: { x: 0.5, y: 0.5 },
|
||||
});
|
||||
})
|
||||
}
|
||||
}, []);
|
||||
}, [])
|
||||
|
||||
const handleCopy = (
|
||||
url: string,
|
||||
variantKey: string,
|
||||
event?: React.MouseEvent,
|
||||
) => {
|
||||
navigator.clipboard.writeText(url);
|
||||
const handleCopy = (url: string, variantKey: string, event?: React.MouseEvent) => {
|
||||
navigator.clipboard.writeText(url)
|
||||
setCopiedVariants((prev) => ({
|
||||
...prev,
|
||||
[variantKey]: true,
|
||||
}));
|
||||
}))
|
||||
setTimeout(() => {
|
||||
setCopiedVariants((prev) => ({
|
||||
...prev,
|
||||
[variantKey]: false,
|
||||
}));
|
||||
}, 2000);
|
||||
}))
|
||||
}, 2000)
|
||||
|
||||
// Launch confetti from click position or center of screen
|
||||
if (event) {
|
||||
launchConfetti(event.clientX, event.clientY);
|
||||
launchConfetti(event.clientX, event.clientY)
|
||||
} else {
|
||||
launchConfetti();
|
||||
launchConfetti()
|
||||
}
|
||||
|
||||
toast.success("URL copied", {
|
||||
description:
|
||||
"The icon URL has been copied to your clipboard. Ready to use!",
|
||||
});
|
||||
};
|
||||
description: "The icon URL has been copied to your clipboard. Ready to use!",
|
||||
})
|
||||
}
|
||||
|
||||
const handleDownload = async (
|
||||
event: React.MouseEvent,
|
||||
url: string,
|
||||
filename: string,
|
||||
) => {
|
||||
event.preventDefault();
|
||||
const handleDownload = async (event: React.MouseEvent, url: string, filename: string) => {
|
||||
event.preventDefault()
|
||||
|
||||
// Launch confetti from download button position
|
||||
launchConfetti(event.clientX, event.clientY);
|
||||
launchConfetti(event.clientX, event.clientY)
|
||||
|
||||
try {
|
||||
// Show loading toast
|
||||
toast.loading("Preparing download...");
|
||||
toast.loading("Preparing download...")
|
||||
|
||||
// Fetch the file first as a blob
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const response = await fetch(url)
|
||||
const blob = await response.blob()
|
||||
|
||||
// Create a blob URL and use it for download
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = blobUrl;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
const blobUrl = URL.createObjectURL(blob)
|
||||
const link = document.createElement("a")
|
||||
link.href = blobUrl
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(link);
|
||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
|
||||
document.body.removeChild(link)
|
||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
|
||||
|
||||
toast.dismiss();
|
||||
toast.dismiss()
|
||||
toast.success("Download started", {
|
||||
description:
|
||||
"Your icon file is being downloaded and will be saved to your device.",
|
||||
});
|
||||
description: "Your icon file is being downloaded and will be saved to your device.",
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("Download error:", error);
|
||||
toast.dismiss();
|
||||
console.error("Download error:", error)
|
||||
toast.dismiss()
|
||||
toast.error("Download failed", {
|
||||
description:
|
||||
"There was an error downloading the file. Please try again.",
|
||||
});
|
||||
description: "There was an error downloading the file. Please try again.",
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const renderVariant = (
|
||||
format: string,
|
||||
iconName: string,
|
||||
theme?: "light" | "dark",
|
||||
) => {
|
||||
const variantName =
|
||||
theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName;
|
||||
const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`;
|
||||
const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`;
|
||||
const variantKey = `${format}-${theme || "default"}`;
|
||||
const isCopied = copiedVariants[variantKey] || false;
|
||||
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
|
||||
const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
|
||||
const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
|
||||
const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
|
||||
const variantKey = `${format}-${theme || "default"}`
|
||||
const isCopied = copiedVariants[variantKey] || false
|
||||
|
||||
return (
|
||||
<TooltipProvider key={variantKey} delayDuration={500}>
|
||||
@@ -252,9 +204,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) =>
|
||||
handleDownload(e, imageUrl, `${iconName}.${format}`)
|
||||
}
|
||||
onClick={(e) => handleDownload(e, imageUrl, `${iconName}.${format}`)}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
@@ -272,11 +222,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleCopy(imageUrl, `btn-${variantKey}`, e)}
|
||||
>
|
||||
{copiedVariants[`btn-${variantKey}`] ? (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4" />
|
||||
)}
|
||||
{copiedVariants[`btn-${variantKey}`] ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
@@ -286,17 +232,8 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg"
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href={githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
|
||||
<Link href={githubUrl} target="_blank" rel="noopener noreferrer">
|
||||
<Github className="w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
@@ -309,8 +246,8 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
</div>
|
||||
</MagicCard>
|
||||
</TooltipProvider>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
@@ -329,9 +266,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold capitalize text-center mb-2">
|
||||
{icon}
|
||||
</CardTitle>
|
||||
<CardTitle className="text-2xl font-bold capitalize text-center mb-2">{icon}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -340,23 +275,15 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm">
|
||||
<span className="font-medium">Updated on:</span>{" "}
|
||||
{formattedDate}
|
||||
<span className="font-medium">Updated on:</span> {formattedDate}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium">By:</p>
|
||||
<Avatar className="h-5 w-5 border">
|
||||
<AvatarImage
|
||||
src={authorData.avatar_url}
|
||||
alt={authorName}
|
||||
/>
|
||||
<AvatarFallback>
|
||||
{authorName
|
||||
? authorName.slice(0, 2).toUpperCase()
|
||||
: "??"}
|
||||
</AvatarFallback>
|
||||
<AvatarImage src={authorData.avatar_url} alt={authorName} />
|
||||
<AvatarFallback>{authorName ? authorName.slice(0, 2).toUpperCase() : "??"}</AvatarFallback>
|
||||
</Avatar>
|
||||
{authorData.html_url ? (
|
||||
<Link
|
||||
@@ -377,9 +304,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
|
||||
{iconData.categories && iconData.categories.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||
Categories
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{iconData.categories.map((category) => (
|
||||
<Link
|
||||
@@ -389,10 +314,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
>
|
||||
{category
|
||||
.split("-")
|
||||
.map(
|
||||
(word) =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1),
|
||||
)
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")}
|
||||
</Link>
|
||||
))}
|
||||
@@ -402,9 +324,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
|
||||
{iconData.aliases && iconData.aliases.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||
Aliases
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{iconData.aliases.map((alias) => (
|
||||
<span
|
||||
@@ -416,10 +336,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
These aliases can be used to find this icon in search
|
||||
results.
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">These aliases can be used to find this icon in search results.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -432,16 +349,12 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
<Card className="h-full backdrop-blur-sm bg-card/50 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Icon variants</CardTitle>
|
||||
<CardDescription>
|
||||
Click on any icon to copy its URL to your clipboard
|
||||
</CardDescription>
|
||||
<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!iconData.colors ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{availableFormats.map((format) =>
|
||||
renderVariant(format, icon),
|
||||
)}
|
||||
{availableFormats.map((format) => renderVariant(format, icon))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-10">
|
||||
@@ -451,9 +364,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
Light theme
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg ">
|
||||
{availableFormats.map((format) =>
|
||||
renderVariant(format, icon, "light"),
|
||||
)}
|
||||
{availableFormats.map((format) => renderVariant(format, icon, "light"))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -462,9 +373,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
Dark theme
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 rounded-lg ">
|
||||
{availableFormats.map((format) =>
|
||||
renderVariant(format, icon, "dark"),
|
||||
)}
|
||||
{availableFormats.map((format) => renderVariant(format, icon, "dark"))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -482,27 +391,18 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||
Base format
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Base format</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileType className="w-4 h-4 text-blue-500" />
|
||||
<div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">
|
||||
{iconData.base.toUpperCase()}
|
||||
</div>
|
||||
<div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">{iconData.base.toUpperCase()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||
Available formats
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{availableFormats.map((format) => (
|
||||
<div
|
||||
key={format}
|
||||
className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium"
|
||||
>
|
||||
<div key={format} className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium">
|
||||
{format.toUpperCase()}
|
||||
</div>
|
||||
))}
|
||||
@@ -511,37 +411,23 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
|
||||
{iconData.colors && (
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||
Color variants
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3>
|
||||
<div className="space-y-2">
|
||||
{Object.entries(iconData.colors).map(
|
||||
([theme, variant]) => (
|
||||
<div key={theme} className="flex items-center gap-2">
|
||||
<PaletteIcon className="w-4 h-4 text-purple-500" />
|
||||
<span className="capitalize font-medium text-sm">
|
||||
{theme}:
|
||||
</span>
|
||||
<code className=" border border-border px-2 py-0.5 rounded-lg text-xs">
|
||||
{variant}
|
||||
</code>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
{Object.entries(iconData.colors).map(([theme, variant]) => (
|
||||
<div key={theme} className="flex items-center gap-2">
|
||||
<PaletteIcon className="w-4 h-4 text-purple-500" />
|
||||
<span className="capitalize font-medium text-sm">{theme}:</span>
|
||||
<code className=" border border-border px-2 py-0.5 rounded-lg text-xs">{variant}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">
|
||||
Source
|
||||
</h3>
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Source</h3>
|
||||
<Button variant="outline" className="w-full" asChild>
|
||||
<Link
|
||||
href={`${REPO_PATH}/blob/main/meta/${icon}.json`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer">
|
||||
<Github className="w-4 h-4 mr-2" />
|
||||
View on GitHub
|
||||
</Link>
|
||||
@@ -554,5 +440,5 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,39 +1,33 @@
|
||||
import { ComponentPropsWithoutRef, CSSProperties, FC } from "react";
|
||||
import type { CSSProperties, ComponentPropsWithoutRef, FC } from "react"
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface AnimatedShinyTextProps
|
||||
extends ComponentPropsWithoutRef<"span"> {
|
||||
shimmerWidth?: number;
|
||||
export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
|
||||
shimmerWidth?: number
|
||||
}
|
||||
|
||||
export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
|
||||
children,
|
||||
className,
|
||||
shimmerWidth = 100,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<span
|
||||
style={
|
||||
{
|
||||
"--shiny-width": `${shimmerWidth}px`,
|
||||
} as CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
|
||||
export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ children, className, shimmerWidth = 100, ...props }) => {
|
||||
return (
|
||||
<span
|
||||
style={
|
||||
{
|
||||
"--shiny-width": `${shimmerWidth}px`,
|
||||
} as CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
|
||||
|
||||
// Shine effect
|
||||
"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
|
||||
// Shine effect
|
||||
"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
|
||||
|
||||
// Shine gradient
|
||||
"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
|
||||
// Shine gradient
|
||||
"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
|
||||
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,43 +1,37 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import React, { memo } from "react";
|
||||
import type React from "react"
|
||||
import { memo } from "react"
|
||||
|
||||
interface AuroraTextProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
colors?: string[];
|
||||
speed?: number;
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
colors?: string[]
|
||||
speed?: number
|
||||
}
|
||||
|
||||
export const AuroraText = memo(
|
||||
({
|
||||
children,
|
||||
className = "",
|
||||
colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
|
||||
speed = 1,
|
||||
}: AuroraTextProps) => {
|
||||
const gradientStyle = {
|
||||
backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
|
||||
colors[0]
|
||||
})`,
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
animationDuration: `${10 / speed}s`,
|
||||
};
|
||||
({ children, className = "", colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"], speed = 1 }: AuroraTextProps) => {
|
||||
const gradientStyle = {
|
||||
backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${colors[0]})`,
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
animationDuration: `${10 / speed}s`,
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`relative inline-block ${className}`}>
|
||||
<span className="sr-only">{children}</span>
|
||||
<span
|
||||
className="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent"
|
||||
style={gradientStyle}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
},
|
||||
);
|
||||
return (
|
||||
<span className={`relative inline-block ${className}`}>
|
||||
<span className="sr-only">{children}</span>
|
||||
<span
|
||||
className="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent"
|
||||
style={gradientStyle}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
AuroraText.displayName = "AuroraText";
|
||||
AuroraText.displayName = "AuroraText"
|
||||
|
||||
@@ -1,35 +1,31 @@
|
||||
import React from "react";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ArrowRight } from "lucide-react"
|
||||
import React from "react"
|
||||
|
||||
interface InteractiveHoverButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
|
||||
interface InteractiveHoverButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
|
||||
|
||||
export const InteractiveHoverButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
InteractiveHoverButtonProps
|
||||
>(({ children, className, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]"></div>
|
||||
<span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
|
||||
{children}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
|
||||
<span>{children}</span>
|
||||
<ArrowRight />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
});
|
||||
export const InteractiveHoverButton = React.forwardRef<HTMLButtonElement, InteractiveHoverButtonProps>(
|
||||
({ children, className, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]" />
|
||||
<span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">{children}</span>
|
||||
</div>
|
||||
<div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
|
||||
<span>{children}</span>
|
||||
<ArrowRight />
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
InteractiveHoverButton.displayName = "InteractiveHoverButton";
|
||||
InteractiveHoverButton.displayName = "InteractiveHoverButton"
|
||||
|
||||
@@ -1,108 +1,106 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { motion, useMotionTemplate, useMotionValue } from "motion/react";
|
||||
import React, { useCallback, useEffect, useRef } from "react";
|
||||
import { motion, useMotionTemplate, useMotionValue } from "motion/react"
|
||||
import type React from "react"
|
||||
import { useCallback, useEffect, useRef } from "react"
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface MagicCardProps {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
gradientSize?: number;
|
||||
gradientColor?: string;
|
||||
gradientOpacity?: number;
|
||||
gradientFrom?: string;
|
||||
gradientTo?: string;
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
gradientSize?: number
|
||||
gradientColor?: string
|
||||
gradientOpacity?: number
|
||||
gradientFrom?: string
|
||||
gradientTo?: string
|
||||
}
|
||||
|
||||
export function MagicCard({
|
||||
children,
|
||||
className,
|
||||
gradientSize = 200,
|
||||
gradientColor = "",
|
||||
gradientOpacity = 0.8,
|
||||
gradientFrom = "#ff0a54",
|
||||
gradientTo = "#f9bec7",
|
||||
children,
|
||||
className,
|
||||
gradientSize = 200,
|
||||
gradientColor = "",
|
||||
gradientOpacity = 0.8,
|
||||
gradientFrom = "#ff0a54",
|
||||
gradientTo = "#f9bec7",
|
||||
}: MagicCardProps) {
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
const mouseX = useMotionValue(-gradientSize);
|
||||
const mouseY = useMotionValue(-gradientSize);
|
||||
const cardRef = useRef<HTMLDivElement>(null)
|
||||
const mouseX = useMotionValue(-gradientSize)
|
||||
const mouseY = useMotionValue(-gradientSize)
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (cardRef.current) {
|
||||
const { left, top } = cardRef.current.getBoundingClientRect();
|
||||
const clientX = e.clientX;
|
||||
const clientY = e.clientY;
|
||||
mouseX.set(clientX - left);
|
||||
mouseY.set(clientY - top);
|
||||
}
|
||||
},
|
||||
[mouseX, mouseY],
|
||||
);
|
||||
const handleMouseMove = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (cardRef.current) {
|
||||
const { left, top } = cardRef.current.getBoundingClientRect()
|
||||
const clientX = e.clientX
|
||||
const clientY = e.clientY
|
||||
mouseX.set(clientX - left)
|
||||
mouseY.set(clientY - top)
|
||||
}
|
||||
},
|
||||
[mouseX, mouseY],
|
||||
)
|
||||
|
||||
const handleMouseOut = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!e.relatedTarget) {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}
|
||||
},
|
||||
[handleMouseMove, mouseX, gradientSize, mouseY],
|
||||
);
|
||||
const handleMouseOut = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (!e.relatedTarget) {
|
||||
document.removeEventListener("mousemove", handleMouseMove)
|
||||
mouseX.set(-gradientSize)
|
||||
mouseY.set(-gradientSize)
|
||||
}
|
||||
},
|
||||
[handleMouseMove, mouseX, gradientSize, mouseY],
|
||||
)
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}, [handleMouseMove, mouseX, gradientSize, mouseY]);
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
document.addEventListener("mousemove", handleMouseMove)
|
||||
mouseX.set(-gradientSize)
|
||||
mouseY.set(-gradientSize)
|
||||
}, [handleMouseMove, mouseX, gradientSize, mouseY])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseout", handleMouseOut);
|
||||
document.addEventListener("mouseenter", handleMouseEnter);
|
||||
useEffect(() => {
|
||||
document.addEventListener("mousemove", handleMouseMove)
|
||||
document.addEventListener("mouseout", handleMouseOut)
|
||||
document.addEventListener("mouseenter", handleMouseEnter)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseout", handleMouseOut);
|
||||
document.removeEventListener("mouseenter", handleMouseEnter);
|
||||
};
|
||||
}, [handleMouseEnter, handleMouseMove, handleMouseOut]);
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove)
|
||||
document.removeEventListener("mouseout", handleMouseOut)
|
||||
document.removeEventListener("mouseenter", handleMouseEnter)
|
||||
}
|
||||
}, [handleMouseEnter, handleMouseMove, handleMouseOut])
|
||||
|
||||
useEffect(() => {
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}, [gradientSize, mouseX, mouseY]);
|
||||
useEffect(() => {
|
||||
mouseX.set(-gradientSize)
|
||||
mouseY.set(-gradientSize)
|
||||
}, [gradientSize, mouseX, mouseY])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={cardRef}
|
||||
className={cn("group relative rounded-[inherit]", className)}
|
||||
>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
return (
|
||||
<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
|
||||
${gradientFrom},
|
||||
${gradientTo},
|
||||
var(--border) 100%
|
||||
)
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-px rounded-[inherit] bg-background" />
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-px rounded-[inherit] bg-background" />
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
|
||||
`,
|
||||
opacity: gradientOpacity,
|
||||
}}
|
||||
/>
|
||||
<div className="relative">{children}</div>
|
||||
</div>
|
||||
);
|
||||
opacity: gradientOpacity,
|
||||
}}
|
||||
/>
|
||||
<div className="relative">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,73 +1,73 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ComponentPropsWithoutRef } from "react";
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { ComponentPropsWithoutRef } from "react"
|
||||
|
||||
interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
|
||||
/**
|
||||
* Optional CSS class name to apply custom styles
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* Whether to reverse the animation direction
|
||||
* @default false
|
||||
*/
|
||||
reverse?: boolean;
|
||||
/**
|
||||
* Whether to pause the animation on hover
|
||||
* @default false
|
||||
*/
|
||||
pauseOnHover?: boolean;
|
||||
/**
|
||||
* Content to be displayed in the marquee
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Whether to animate vertically instead of horizontally
|
||||
* @default false
|
||||
*/
|
||||
vertical?: boolean;
|
||||
/**
|
||||
* Number of times to repeat the content
|
||||
* @default 4
|
||||
*/
|
||||
repeat?: number;
|
||||
/**
|
||||
* Optional CSS class name to apply custom styles
|
||||
*/
|
||||
className?: string
|
||||
/**
|
||||
* Whether to reverse the animation direction
|
||||
* @default false
|
||||
*/
|
||||
reverse?: boolean
|
||||
/**
|
||||
* Whether to pause the animation on hover
|
||||
* @default false
|
||||
*/
|
||||
pauseOnHover?: boolean
|
||||
/**
|
||||
* Content to be displayed in the marquee
|
||||
*/
|
||||
children: React.ReactNode
|
||||
/**
|
||||
* Whether to animate vertically instead of horizontally
|
||||
* @default false
|
||||
*/
|
||||
vertical?: boolean
|
||||
/**
|
||||
* Number of times to repeat the content
|
||||
* @default 4
|
||||
*/
|
||||
repeat?: number
|
||||
}
|
||||
|
||||
export function Marquee({
|
||||
className,
|
||||
reverse = false,
|
||||
pauseOnHover = false,
|
||||
children,
|
||||
vertical = false,
|
||||
repeat = 4,
|
||||
...props
|
||||
className,
|
||||
reverse = false,
|
||||
pauseOnHover = false,
|
||||
children,
|
||||
vertical = false,
|
||||
repeat = 4,
|
||||
...props
|
||||
}: MarqueeProps) {
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
|
||||
{
|
||||
"flex-row": !vertical,
|
||||
"flex-col": vertical,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{Array(repeat)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
|
||||
"animate-marquee flex-row": !vertical,
|
||||
"animate-marquee-vertical flex-col": vertical,
|
||||
"group-hover:[animation-play-state:paused]": pauseOnHover,
|
||||
"[animation-direction:reverse]": reverse,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
|
||||
{
|
||||
"flex-row": !vertical,
|
||||
"flex-col": vertical,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{Array(repeat)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
|
||||
"animate-marquee flex-row": !vertical,
|
||||
"animate-marquee-vertical flex-col": vertical,
|
||||
"group-hover:[animation-play-state:paused]": pauseOnHover,
|
||||
"[animation-direction:reverse]": reverse,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,37 +1,34 @@
|
||||
"use client";
|
||||
"use client"
|
||||
|
||||
import { Marquee } from "@/components/magicui/marquee";
|
||||
import { BASE_URL } from "@/constants";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Icon, IconWithName } from "@/types/icons";
|
||||
import { format, isToday, isYesterday } from "date-fns";
|
||||
import { ArrowRight, Clock, ExternalLink } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Marquee } from "@/components/magicui/marquee"
|
||||
import { BASE_URL } from "@/constants"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { Icon, IconWithName } from "@/types/icons"
|
||||
import { format, isToday, isYesterday } from "date-fns"
|
||||
import { ArrowRight, Clock, ExternalLink } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
function formatIconDate(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
const date = new Date(timestamp)
|
||||
if (isToday(date)) {
|
||||
return "Today";
|
||||
return "Today"
|
||||
}
|
||||
if (isYesterday(date)) {
|
||||
return "Yesterday";
|
||||
return "Yesterday"
|
||||
}
|
||||
return format(date, "MMM d, yyyy");
|
||||
return format(date, "MMM d, yyyy")
|
||||
}
|
||||
|
||||
export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
|
||||
// Split icons into two rows for the marquee
|
||||
const firstRow = icons.slice(0, Math.ceil(icons.length / 2));
|
||||
const secondRow = icons.slice(Math.ceil(icons.length / 2));
|
||||
const firstRow = icons.slice(0, Math.ceil(icons.length / 2))
|
||||
const secondRow = icons.slice(Math.ceil(icons.length / 2))
|
||||
|
||||
return (
|
||||
<div className="relative isolate overflow-hidden my-8">
|
||||
{/* Background glow */}
|
||||
<div
|
||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true" />
|
||||
|
||||
<div className="mx-auto px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl text-center my-4">
|
||||
@@ -41,10 +38,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
|
||||
</div>
|
||||
|
||||
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
|
||||
<Marquee
|
||||
pauseOnHover
|
||||
className="[--duration:60s] [--gap:1em] motion-safe:motion-preset-slide-left-sm motion-duration-1000"
|
||||
>
|
||||
<Marquee pauseOnHover className="[--duration:60s] [--gap:1em] motion-safe:motion-preset-slide-left-sm motion-duration-1000">
|
||||
{firstRow.map(({ name, data }) => (
|
||||
<RecentIconCard key={name} name={name} data={data} />
|
||||
))}
|
||||
@@ -73,7 +67,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
// Marquee-compatible icon card
|
||||
@@ -81,8 +75,8 @@ function RecentIconCard({
|
||||
name,
|
||||
data,
|
||||
}: {
|
||||
name: string;
|
||||
data: Icon;
|
||||
name: string
|
||||
data: Icon
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
@@ -118,5 +112,5 @@ function RecentIconCard({
|
||||
<ExternalLink className="w-3 h-3 " />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user