Evandro Fonseca Junior
5c1ccbc69a
Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { AnimatedList } from "@/components/ui/animated-list";
|
|
import { OfferCard } from "@/components/offer-card";
|
|
import { buyOffers, sellOffers } from "@/lib/mock-data";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
export function MarketOffers() {
|
|
const t = useTranslations("home.offers");
|
|
|
|
return (
|
|
<section className="py-20 bg-background">
|
|
<div className="container">
|
|
<h2 className="text-4xl font-bold text-center mb-12">
|
|
Ofertas do Mercado
|
|
</h2>
|
|
|
|
<Tabs defaultValue="buying" className="w-full">
|
|
<TabsList className="grid w-full max-w-md mx-auto grid-cols-2">
|
|
<TabsTrigger value="buying">{t("buying")}</TabsTrigger>
|
|
<TabsTrigger value="selling">{t("selling")}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="buying" className="mt-8">
|
|
<AnimatedList>
|
|
{buyOffers.map((offer) => (
|
|
<OfferCard key={offer.id} offer={offer} />
|
|
))}
|
|
</AnimatedList>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="selling" className="mt-8">
|
|
<AnimatedList>
|
|
{sellOffers.map((offer) => (
|
|
<OfferCard key={offer.id} offer={offer} />
|
|
))}
|
|
</AnimatedList>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|