17f2de2a73
Adds a subscription page within the settings section, including a title, a card displaying plan details (name, price, benefits), and "Subscribe Now" and "View Details" buttons. Uses Tailwind CSS for styling.
101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
|
import MeuCadastroForm from "@/components/settings/MeuCadastroForm";
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowLeft, Check } from "lucide-react";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
|
|
const Configuracoes = () => {
|
|
const [tab, setTab] = useState("visao-geral");
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<Button asChild variant="outline" size="icon">
|
|
<Link to="/">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
<span className="sr-only">Voltar</span>
|
|
</Link>
|
|
</Button>
|
|
<h1 className="text-2xl font-bold">Configurações</h1>
|
|
</div>
|
|
|
|
<Tabs value={tab} onValueChange={setTab} className="mt-4">
|
|
<TabsList className="mb-6">
|
|
<TabsTrigger value="visao-geral">Visão Geral</TabsTrigger>
|
|
<TabsTrigger value="meu-cadastro">Meu cadastro</TabsTrigger>
|
|
<TabsTrigger value="assinatura">Assinatura</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="visao-geral">
|
|
<div className="p-6 bg-muted rounded-lg border text-muted-foreground text-center">
|
|
<div className="text-lg font-semibold mb-2">Bem-vindo à página de Configurações!</div>
|
|
<div>Aqui você pode gerenciar suas informações, assinatura e muito mais.</div>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="meu-cadastro">
|
|
<MeuCadastroForm />
|
|
</TabsContent>
|
|
<TabsContent value="assinatura">
|
|
<div className="w-full max-w-md mx-auto">
|
|
<h2 className="text-3xl font-bold text-center mb-6">
|
|
Assinatura Mensal
|
|
</h2>
|
|
<Card className="shadow-lg animate-fade-in">
|
|
<CardHeader className="items-center text-center p-6">
|
|
<CardTitle className="text-2xl">
|
|
Plano Mensal Finance Home
|
|
</CardTitle>
|
|
<CardDescription className="text-5xl font-extrabold pt-4">
|
|
R$14,99
|
|
<span className="text-lg font-medium text-muted-foreground">
|
|
/mês
|
|
</span>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="px-6 pb-6">
|
|
<ul className="space-y-4">
|
|
<li className="flex items-center gap-3">
|
|
<Check className="h-5 w-5 text-primary" />
|
|
<span className="text-muted-foreground">
|
|
Acesso total ao Finance Home
|
|
</span>
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<Check className="h-5 w-5 text-primary" />
|
|
<span className="text-muted-foreground">
|
|
Relatórios ilimitados
|
|
</span>
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<Check className="h-5 w-5 text-primary" />
|
|
<span className="text-muted-foreground">
|
|
Exportação de dados
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 p-6 bg-muted/50 rounded-b-lg">
|
|
<Button variant="outline" className="w-full sm:w-auto">
|
|
Ver Detalhes
|
|
</Button>
|
|
<Button className="w-full sm:w-auto">Assinar Agora</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Configuracoes;
|