45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
|
import React, { useState, useEffect } from "react";
|
|||
|
|
import Cookies from "js-cookie";
|
|||
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Check } from "lucide-react";
|
|||
|
|
|
|||
|
|
export const WelcomeCard = () => {
|
|||
|
|
const [visible, setVisible] = useState(true);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const isRead = Cookies.get("welcome-read");
|
|||
|
|
if (isRead === "true") {
|
|||
|
|
setVisible(false);
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleMarkAsRead = () => {
|
|||
|
|
Cookies.set("welcome-read", "true");
|
|||
|
|
setVisible(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (!visible) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Card className="col-span-full md:col-span-1">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>Welcome to your dashboard</CardTitle>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<p className="text-sm">
|
|||
|
|
Thanks for logging in! Here you can manage your account and the services available to you.
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm mt-4">
|
|||
|
|
We’re thrilled to have you on board, and if you need <i>anything</i>, don’t hesitate to contact support (see the sidebar).
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm mt-4">That’s all, have a great day!</p>
|
|||
|
|
</CardContent>
|
|||
|
|
<CardFooter>
|
|||
|
|
<Button className="w-full" onClick={handleMarkAsRead}>
|
|||
|
|
<Check /> Mark as Read
|
|||
|
|
</Button>
|
|||
|
|
</CardFooter>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
};
|