Refactor UI components, remove unused imports ,update hover animation duration and create notification page

This commit is contained in:
Pattadon 2024-09-13 13:39:00 +07:00
parent 195327d691
commit c2c81ac08b
3 changed files with 29 additions and 2 deletions

View File

@ -18,7 +18,6 @@ import { ShareIcon, StarIcon } from "lucide-react";
import { Toaster, toast } from "react-hot-toast";
import useSession from "@/lib/supabase/useSession";
import { redirect } from "next/navigation";
import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,

View File

@ -0,0 +1,28 @@
"use client";
import { Card, CardContent } from "@/components/ui/card";
export default function Notification() {
const sampleNotifications = [
{ message: "New message from John Doe", time: "5 minutes ago" },
{ message: "Your order has been shipped", time: "2 hours ago" },
{ message: "Meeting reminder: Team sync at 3 PM", time: "1 day ago" },
];
return (
<div>
<div className="ml-56 mt-16 ">
<h1 className="font-bold text-3xl h-0">Notifications</h1>
<div className=" w-full mt-20 ">
{/* Cards */}
<Card className=" border-slate-800 w-3/4 p-6">
<CardContent>
<Card>
<CardContent>1</CardContent>
</Card>
</CardContent>
</Card>
</div>
</div>
</div>
);
}

View File

@ -57,7 +57,7 @@ export function ExtendableCard(props: ExtendableCardProps) {
</div>
{/* Hover content (appears when hovered) */}
<div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-500 ease-in-out">
<div className="mt-4 max-h-0 overflow-hidden opacity-0 group-hover:max-h-[500px] group-hover:opacity-100 transition-all duration-1000 ease-in-out">
<p className="text-sm text-muted-foreground">{props.description}</p>
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center space-x-2">