71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import { FileSearch } from "lucide-react";
|
|
import { useLanguage } from "@/context/language-context";
|
|
|
|
//salomalr
|
|
|
|
export default function EmptyState() {
|
|
const { t } = useLanguage();
|
|
|
|
const container = {
|
|
hidden: { opacity: 0, y: 8 },
|
|
show: { opacity: 1, y: 0, transition: { staggerChildren: 0.06 } },
|
|
};
|
|
|
|
return (
|
|
<motion.section
|
|
aria-labelledby="empty-state-title"
|
|
className="w-full px-4 py-16 flex items-center justify-center"
|
|
initial="hidden"
|
|
animate="show"
|
|
variants={container}
|
|
>
|
|
<div className="max-w-5xl w-full bg-white/60 bg-linear-to-br from-primary to-gray-800 backdrop-blur-md rounded-2xl shadow-lg overflow-hidden">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center p-8 md:p-12">
|
|
{/* Illustration / Icon */}
|
|
<motion.div className="flex items-center justify-center">
|
|
<motion.div
|
|
className="p-6 bg-linear-to-tr from-blue-50 to-blue-100 rounded-xl shadow-inner"
|
|
initial={{ scale: 0.96 }}
|
|
animate={{ scale: [0.96, 1.02, 0.98, 1] }}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
repeatType: "mirror",
|
|
}}
|
|
>
|
|
<FileSearch className="w-28 h-28 text-primary" />
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Content */}
|
|
<motion.div className="text-center md:text-left">
|
|
<h3
|
|
id="empty-state-title"
|
|
className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-gray-100"
|
|
>
|
|
{t.empty_data.title || "Hech narsa topilmadi"}
|
|
</h3>
|
|
|
|
<p className="mt-3 text-sm sm:text-base text-gray-600 dark:text-gray-300 max-w-xl mx-auto md:mx-0">
|
|
{t.empty_data.description}
|
|
</p>
|
|
|
|
<div className="mt-6 flex flex-col sm:flex-row items-center sm:items-start gap-3 md:gap-4 justify-center md:justify-start">
|
|
<motion.a
|
|
className="inline-flex items-center justify-center px-5 py-2.5 bg-primary/70 hover:bg-primary text-white rounded-lg shadow-md transition-colors text-sm font-medium"
|
|
// @ts-ignore allow Link-like anchor
|
|
>
|
|
<Link href="/">{t.empty_data.back || "Bosh sahifa"}</Link>
|
|
</motion.a>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|