mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-06-28 15:30:22 +08:00
Add marquee component for RecentlyAddedIcons
This commit is contained in:
Thomas Camlong
parent
0902983a17
commit
0b62278274
@ -1,7 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@plugin "tailwindcss-motion";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
@ -62,7 +62,20 @@
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--animate-marquee: marquee var(--duration) infinite linear;
|
||||
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
|
||||
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);}
|
||||
to {
|
||||
transform: translateX(calc(-100% - var(--gap)));}}
|
||||
@keyframes marquee-vertical {
|
||||
from {
|
||||
transform: translateY(0);}
|
||||
to {
|
||||
transform: translateY(calc(-100% - var(--gap)));}}}
|
||||
|
||||
:root {
|
||||
--radius: 0.75rem;
|
||||
@ -158,4 +171,4 @@
|
||||
.glass-effect {
|
||||
@apply backdrop-blur-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
73
web/src/components/magicui/marquee.tsx
Normal file
73
web/src/components/magicui/marquee.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { 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;
|
||||
}
|
||||
|
||||
export function Marquee({
|
||||
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>
|
||||
);
|
||||
}
|
||||
@ -1,13 +1,14 @@
|
||||
"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 { motion, useInView } from "framer-motion";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRight, Clock, ExternalLink } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRef } from "react";
|
||||
|
||||
function formatIconDate(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
@ -21,21 +22,17 @@ function formatIconDate(timestamp: string): string {
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
return (
|
||||
<div className="relative isolate overflow-hidden py-16 md:py-24">
|
||||
{/* 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="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-rose-400/40 to-red-300/40 dark:from-red-600/50 dark:to-red-900/50 opacity-60 dark:opacity-50 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
></div>
|
||||
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
@ -53,10 +50,23 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-4 md:gap-5">
|
||||
{icons.map(({ name, data }) => (
|
||||
<RecentIconCard key={name} name={name} data={data} />
|
||||
))}
|
||||
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
|
||||
<Marquee pauseOnHover className="[--duration:30s] [--gap:2rem]">
|
||||
{firstRow.map(({ name, data }) => (
|
||||
<RecentIconCard key={name} name={name} data={data} />
|
||||
))}
|
||||
</Marquee>
|
||||
<Marquee
|
||||
reverse
|
||||
pauseOnHover
|
||||
className="[--duration:30s] [--gap:2rem] mt-6"
|
||||
>
|
||||
{secondRow.map(({ name, data }) => (
|
||||
<RecentIconCard key={name} name={name} data={data} />
|
||||
))}
|
||||
</Marquee>
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background" />
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background" />
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
@ -79,7 +89,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Extracted component for better animation handling
|
||||
// Marquee-compatible icon card
|
||||
function RecentIconCard({
|
||||
name,
|
||||
data,
|
||||
@ -87,67 +97,40 @@ function RecentIconCard({
|
||||
name: string;
|
||||
data: Icon;
|
||||
}) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, {
|
||||
once: false,
|
||||
amount: 0.2,
|
||||
margin: "100px 0px",
|
||||
});
|
||||
|
||||
const variants = {
|
||||
hidden: { opacity: 0, y: 20, scale: 0.95 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] },
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -10,
|
||||
scale: 0.98,
|
||||
transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial="hidden"
|
||||
animate={isInView ? "visible" : "hidden"}
|
||||
exit="exit"
|
||||
variants={variants}
|
||||
className="will-change-transform"
|
||||
<Link
|
||||
prefetch={false}
|
||||
href={`/icons/${name}`}
|
||||
className={cn(
|
||||
"group flex flex-col items-center p-3 sm:p-4 rounded-xl border border-border bg-background/95 dark:bg-background/80",
|
||||
"hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500",
|
||||
"transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift",
|
||||
"w-36 mx-2",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
prefetch={false}
|
||||
href={`/icons/${name}`}
|
||||
className="group flex flex-col items-center p-3 sm:p-4 rounded-xl border border-border bg-background/95 dark:bg-background/80 hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden hover-lift"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
|
||||
<Image
|
||||
src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
|
||||
alt={`${name} icon`}
|
||||
fill
|
||||
className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
|
||||
{name.replace(/-/g, " ")}
|
||||
<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
|
||||
<Image
|
||||
src={`${BASE_URL}/${data.base}/${name}.${data.base}`}
|
||||
alt={`${name} icon`}
|
||||
fill
|
||||
className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
|
||||
{name.replace(/-/g, " ")}
|
||||
</span>
|
||||
<div className="flex items-center justify-center mt-2 w-full">
|
||||
<span className="text-[10px] sm:text-xs text-muted-foreground flex items-center whitespace-nowrap group-hover:text-rose-500/70 transition-colors duration-200">
|
||||
<Clock className="w-3 h-3 mr-1.5 shrink-0" />
|
||||
{formatIconDate(data.update.timestamp)}
|
||||
</span>
|
||||
<div className="flex items-center justify-center mt-2 w-full">
|
||||
<span className="text-[10px] sm:text-xs text-muted-foreground flex items-center whitespace-nowrap group-hover:text-rose-500/70 transition-colors duration-200">
|
||||
<Clock className="w-3 h-3 mr-1.5 shrink-0" />
|
||||
{formatIconDate(data.update.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<ExternalLink className="w-3 h-3 text-rose-500" />
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||||
<ExternalLink className="w-3 h-3 text-rose-500" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user