Samandar/simple-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-10-18 17:14:59 +05:00
parent edf364b389
commit 036a36ce90
92 changed files with 14614 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/pages/news/ui/News.tsx Normal file
View File

@@ -0,0 +1,210 @@
"use client";
import { fakeNewsData } from "@/pages/news/lib/data";
import type { NewsAll } from "@/pages/news/lib/type";
import formatDate from "@/shared/lib/formatDate";
import { Badge } from "@/shared/ui/badge";
import { Button } from "@/shared/ui/button";
import { Card } from "@/shared/ui/card";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shared/ui/dialog";
import clsx from "clsx";
import { Calendar, Edit, FolderOpen, PlusCircle, Trash2 } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
const News = () => {
const [newsList, setNewsList] = useState<NewsAll[]>(fakeNewsData);
const loading = false;
const error = null;
const [deleteId, setDeleteId] = useState<number | null>(null);
const navigate = useNavigate();
const confirmDelete = () => {
if (deleteId !== null) {
setNewsList((prev) => prev.filter((t) => t.id !== deleteId));
setDeleteId(null);
}
};
if (loading) {
return (
<div className="min-h-screen bg-gray-900 w-full text-white flex justify-center items-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
<p className="text-lg">Yuklanmoqda...</p>
</div>
</div>
);
}
if (error) {
return (
<div className="min-h-screen bg-gray-900 w-full text-white flex justify-center items-center">
<div className="text-center">
<p className="text-xl text-red-400">{error}</p>
<Button className="mt-4">Qayta urinish</Button>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-900 w-full text-white p-6">
{/* Header */}
<div className="flex justify-between items-center mb-8 w-[90%] mx-auto">
<div>
<h1 className="text-4xl font-bold mb-2">Yangiliklar</h1>
<p className="text-gray-400">
Jami {newsList.length} ta yangilik mavjud
</p>
</div>
<Button
onClick={() => navigate("/news/add")}
className="flex items-center gap-2 cursor-pointer bg-blue-600 hover:bg-blue-700 text-white"
>
<PlusCircle size={18} />
Yangilik qo'shish
</Button>
</div>
{/* News Grid */}
<div
className={clsx(
"gap-6 w-[90%] mx-auto",
newsList.length === 0
? "flex justify-center items-center min-h-[60vh]"
: "grid md:grid-cols-2 lg:grid-cols-3",
)}
>
{newsList.length === 0 ? (
<div className="text-center py-12">
<div className="mb-6">
<div className="w-24 h-24 bg-neutral-800 rounded-full flex items-center justify-center mx-auto mb-4">
<FolderOpen size={48} className="text-gray-600" />
</div>
</div>
<p className="text-2xl text-gray-400 mb-2 font-semibold">
Hozircha yangilik yo'q
</p>
<p className="text-gray-500 mb-6">
Birinchi yangilikni qo'shib boshlang
</p>
<Button
onClick={() => navigate("/news/add")}
className="flex items-center gap-2 mx-auto bg-blue-600 hover:bg-blue-700 text-white"
>
<PlusCircle size={18} /> Yangilik qo'shish
</Button>
</div>
) : (
newsList.map((item) => (
<Card
key={item.id}
className="overflow-hidden bg-neutral-900 hover:bg-neutral-800 transition-all duration-300 border border-neutral-800 hover:border-neutral-700 group"
>
{/* Image */}
<div className="relative h-48 overflow-hidden">
<img
src={item.image}
alt={item.short_title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
onError={(e) => {
e.currentTarget.src =
"https://images.unsplash.com/photo-1507525428034-b723cf961d3e";
}}
/>
{/* Category Badge */}
{item.category && (
<Badge className="absolute top-3 left-3 bg-blue-600 hover:bg-blue-700 text-white border-0">
<FolderOpen size={12} className="mr-1" />
{item.category.name}
</Badge>
)}
</div>
{/* Content */}
<div className="p-4 space-y-3">
{/* Title */}
<h2 className="text-xl font-bold line-clamp-2 group-hover:text-blue-400 transition-colors">
{item.short_title}
</h2>
{/* Short Text */}
<p className="text-sm text-gray-400 line-clamp-3 leading-relaxed">
{item.short_text}
</p>
{/* Date */}
<div className="flex items-center gap-2 text-xs text-gray-500">
<Calendar size={14} />
<span>{formatDate.format(item.created, "DD.MM.YYYY")}</span>
</div>
{/* Slug */}
<div className="pt-2 border-t border-neutral-800">
<code className="text-xs text-gray-500 bg-neutral-800 px-2 py-1 rounded">
/{item.slug}
</code>
</div>
{/* Actions */}
<div className="flex justify-end gap-2 pt-3">
<Button
onClick={() => navigate(`/news/add`)}
size="sm"
variant="outline"
className="hover:bg-neutral-700 hover:text-blue-400"
>
<Edit size={16} className="mr-1" />
Tahrirlash
</Button>
<Button
size="sm"
variant="destructive"
onClick={() => setDeleteId(item.id)}
className="hover:bg-red-700"
>
<Trash2 size={16} className="mr-1" />
O'chirish
</Button>
</div>
</div>
</Card>
))
)}
</div>
<Dialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
<DialogContent className="sm:max-w-[425px] bg-gray-900">
<DialogHeader>
<DialogTitle className="text-xl">
Yangilikni o'chirishni tasdiqlang
</DialogTitle>
</DialogHeader>
<div className="py-4">
<p className="text-muted-foreground">
Haqiqatan ham bu turni o'chirib tashlamoqchimisiz? Bu amalni ortga
qaytarib bo'lmaydi.
</p>
</div>
<DialogFooter className="gap-4 flex">
<Button variant="outline" onClick={() => setDeleteId(null)}>
Bekor qilish
</Button>
<Button variant="destructive" onClick={confirmDelete}>
<Trash2 className="w-4 h-4 mr-2" />
O'chirish
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
};
export default News;