Spaces:
Running
Running
File size: 6,789 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
"use client";
import { cn } from "@/lib/utils";
import Image from "next/image";
import React, { useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue } from "motion/react";
export function StatsForChangelog() {
const stats = [
{
title: "Sept 2024",
content: (
<div className="flex flex-col">
<h2 className="mt-8 text-xl font-bold text-neutral-600 md:text-3xl dark:text-neutral-300">
Released Startup Template
</h2>
<p className="mb-8 mt-4 text-neutral-600 dark:text-neutral-300">
Minor bug fixes in the template, included new features with beams
collision and dark mode.
</p>
<Image
src="https://assets.aceternity.com/templates/startup-1.webp"
height="2000"
width="2000"
className="w-full rounded-xl object-cover object-left-top md:rounded-3xl"
alt="Startup template image"
fetchPriority="high"
/>
</div>
),
},
{
title: "Aug 2024",
content: (
<div className="flex flex-col">
<h2 className="mt-8 text-xl font-bold text-neutral-600 md:text-3xl dark:text-neutral-300">
Released Agency Template
</h2>
<p className="mb-8 mt-4 text-neutral-600 dark:text-neutral-300">
Beautiful template with modern design and minimal animations.
</p>
<Image
src="https://assets.aceternity.com/templates/startup-2.webp"
height="2000"
width="2000"
className="w-full rounded-xl object-cover object-left-top md:rounded-3xl"
alt="Startup template image"
fetchPriority="high"
/>
</div>
),
},
{
title: "July 2024",
content: (
<div className="flex flex-col">
<h2 className="mt-8 text-xl font-bold text-neutral-600 md:text-3xl dark:text-neutral-300">
Released Startup Template
</h2>
<p className="mb-8 mt-4 text-neutral-600 dark:text-neutral-300">
Minor bug fixes in the template
</p>
<Image
src="https://assets.aceternity.com/templates/startup-3.webp"
height="2000"
width="2000"
className="w-full rounded-xl object-cover object-left-top md:rounded-3xl"
alt="Startup template image"
fetchPriority="high"
/>
</div>
),
},
{
title: "June 2024",
content: (
<div className="flex flex-col">
<h2 className="mt-8 text-xl font-bold text-neutral-600 md:text-3xl dark:text-neutral-300">
Released Startup Template
</h2>
<p className="mb-8 mt-4 text-neutral-600 dark:text-neutral-300">
Minor bug fixes in the template
</p>
<Image
src="https://assets.aceternity.com/templates/startup-4.webp"
height="2000"
width="2000"
className="w-full rounded-xl object-cover object-left-top md:rounded-3xl"
alt="Startup template image"
fetchPriority="high"
/>
</div>
),
},
];
return (
<div className="w-full">
<StatsForChangelogDesktop stats={stats} />
<StatsForChangelogMobile stats={stats} />
</div>
);
}
type Stats = { title: string; content: React.ReactNode };
export const StatsForChangelogMobile = ({ stats }: { stats: Stats[] }) => {
return (
<div className="mx-auto block w-full max-w-7xl px-4 md:px-8 lg:hidden">
{stats.map((stat, index) => (
<div
className="mb-10 flex flex-col gap-4"
key={`stat-tab-mobile-${index}`}
>
<div
className={cn(
"flex items-center rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800"
)}
>
<span className="mr-4 flex-shrink-0 font-medium text-neutral-700 dark:text-neutral-100">
{stat.title}
</span>
<div className="flex w-full items-center gap-2">
<div className="h-1 w-1 flex-shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-700"></div>
<div className="h-px w-full bg-neutral-300 dark:bg-neutral-700"></div>
<div className="h-1 w-1 flex-shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-700"></div>
</div>
</div>
{stat.content}
</div>
))}
</div>
);
};
export const StatsForChangelogDesktop = ({ stats }: { stats: Stats[] }) => {
const [active, setActive] = useState(stats[0]);
const direction = useMotionValue(0);
const isActive = (stat: (typeof stats)[number]) =>
stat.title === active.title;
const handleSetActive = (stat: (typeof stats)[number]) => {
const currentIndex = stats.findIndex((s) => s.title === active.title);
const newIndex = stats.findIndex((s) => s.title === stat.title);
direction.set(newIndex > currentIndex ? 1 : -1);
setActive(stat);
};
return (
<div className="mx-auto hidden w-full max-w-7xl px-4 md:px-8 lg:block">
<div className="grid w-full grid-cols-4 gap-10">
{stats.map((stat, index) => (
<button
key={`stat-tab-${index}`}
onClick={() => handleSetActive(stat)}
className={cn(
"flex items-center rounded-2xl p-4 hover:bg-neutral-100 dark:hover:bg-neutral-800",
isActive(stat) ? "bg-neutral-100 dark:bg-neutral-800" : ""
)}
>
<span className="mr-4 flex-shrink-0 font-medium text-neutral-700 dark:text-neutral-100">
{stat.title}
</span>
<div className="flex w-full items-center gap-2">
<div className="h-1 w-1 flex-shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-700"></div>
<div className="h-px w-full bg-neutral-300 dark:bg-neutral-700"></div>
<div className="h-1 w-1 flex-shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-700"></div>
</div>
</button>
))}
</div>
<div className="relative mt-4 w-full overflow-hidden px-10 [mask-image:linear-gradient(to_right,transparent,white_2%,white_98%,transparent)]">
<AnimatePresence mode="popLayout" initial={false}>
<motion.div
key={String(active.title)}
initial={{ x: 1000, opacity: 0 }}
exit={{ x: -1000, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ ease: "easeOut" }}
className="w-full"
>
{active.content}
</motion.div>
</AnimatePresence>
</div>
</div>
);
};
|