import { cn } from "@/lib/classes";
import { Apple, GlassWater, Sun } from "lucide-react";

const cards = [
  {
    title: "Nutrition",
    description:
      "Nutrition is a tool that helps you track your dietary intake and maintain a balanced diet.",
    icon: <Apple className="size-10" />,
  },
  {
    title: "Hydration",
    description:
      "Hydration is a tool that helps you monitor your water intake throughout the day.",
    icon: <GlassWater className="size-10" />,
  },
  {
    title: "Weather",
    description:
      "Weather is a tool that provides real-time updates on temperature, humidity, and forecasts.",
    icon: <Sun className="size-10" />,
  },
];

export const EndlessStack = () => {
  return (
    <div className="min-h-[600px] w-full flex items-center justify-center">
      <div className="flex h-[480px] max-w-[692px] w-full items-center justify-center overflow-hidden rounded-xl border border-[#e9e8e6] dark:border-[#222221] bg-white dark:bg-[#131313] shadow-xs">
        <div className="flex h-[480px] w-full flex-col items-center justify-between">
          <div className="border-b border-[#e9e8e6] dark:border-[#222221] w-full flex items-center justify-center bg-[#fcfcfc] dark:bg-[#111111] py-4">
            <button className="border border-[#e9e8e6] dark:border-[#222221] flex h-9 px-4 items-center justify-center gap-1 overflow-hidden rounded-full bg-[#fefefe] dark:bg-[#111111] font-medium shadow-xs [transition:color_200ms_ease-out] active:scale-98 cursor-pointer">
              Cycle
            </button>
          </div>

          <div className="relative h-[364px] w-[324px] sm:max-w-[644px] sm:w-full mx-auto">
            {cards.map((card, index) => (
              <div
                key={card.title}
                className={cn(
                  "absolute bg-[#fcfcfc] dark:bg-[#0f0f0f] flex h-[320px] w-full items-center justify-center rounded-t-xl border-x border-t border-[#e9e8e6] dark:border-[#222221] bottom-0 p-1",
                  "[transition:translate_200ms,scale_200ms] [transition-timing-function:var(--transition-easing)]",
                  "z-[calc(var(--total-cards)+var(--index)*-1)] translate-y-[calc(var(--index)*-8%)] scale-[calc(1-var(--index)*0.05)]"
                )}
                style={
                  {
                    "--index": index,
                    "--total-cards": cards.length,
                    "--transition-easing": "cubic-bezier(.25, .46, .45, .94)",
                  } as React.CSSProperties
                }
              >
                <div className="flex h-full w-full flex-col gap-4">
                  <div className="relative flex flex-1 w-full items-center justify-center rounded-lg border border-[#e9e8e6] dark:border-[#222221] bg-[#fefefe] dark:bg-[#111111]">
                    <div className="flex items-center justify-center rounded-xl p-3 shadow-xs bg-[#fcfcfc] dark:bg-[#131313] border border-[#e9e8e6] dark:border-[#222221]">
                      {card.icon}
                    </div>
                  </div>

                  <div className="flex w-full items-center justify-between px-3 pb-3 self-end">
                    <div className="flex flex-col">
                      <span className="text-lg font-medium text-[#21201c] dark:text-[#eeeeec]">
                        {card.title}
                      </span>
                      <span className="dark:text-[#b5b3ad] text-[#63635e]">
                        {card.description}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
Endless Stack

Endless Stack

Installation

Endless Stack

Installation
