Skip to content

Commit

Permalink
done nearly
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShivanshPlays
ShivanshPlays committed Nov 10, 2024
1 parent 383797c commit d31f0c6
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 84 deletions.
5 changes: 3 additions & 2 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"react-dom": "^18.2.0",
"react-google-recaptcha": "^3.1.0",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.0.1",
"react-icons": "^5.3.0",
"react-phone-input-2": "^2.15.1",
"react-phone-number-input": "^3.3.10",
"react-quill": "^2.0.0",
Expand Down
242 changes: 161 additions & 81 deletions client/src/component/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,183 @@
// import React from 'react';
import PropTypes from "prop-types";


import { FaUsers, FaMicroblog } from 'react-icons/fa';
import { PiEyesDuotone } from 'react-icons/pi';

const InsightCard = ({ icon, title, count, progress, color }) => (
<div className="bg-white shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg">
<div className="flex items-center justify-between">
<span className={`material-symbols-sharp text-4xl ${color} text-white p-2 rounded-full`}>
{icon}
</span>
<div className="text-right">
<h3 className="text-lg font-medium text-gray-700">{title}</h3>
<h1 className="text-2xl font-bold text-gray-800">{count}</h1>
</div>
</div>
<div className="mt-4 relative">
<div className="progress-circle relative w-16 h-16">
<svg className="absolute inset-0" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
<circle
cx="50"
cy="50"
r="30"
className="text-blue-500"
strokeWidth="5"
strokeDasharray="150"
strokeDashoffset="calc(150 - (150 * 0.8))"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
{progress}
</div>
</div>
</div>
<small className="block text-gray-500 mt-2">Last 24 Hours</small>
</div>
);

const PostCard = ({ post }) => (
<div className="bg-white shadow-md rounded-lg p-4">
<h3 className="text-lg font-semibold text-gray-800">{post.title}</h3>
<p className="text-gray-600">{post.content}</p>
<small className="text-gray-400">{post.date}</small>
</div>
);
import PropTypes from "prop-types";

const Dashboard = () => {
const posts=[
{id:1,title:"title1"},
]
// Placeholder data; replace with actual data from backend if needed.
const insightsData = [
{ icon: 'trending_up', title: 'Total Views', count: '100', progress: '80%', color: 'bg-coral' },
{ icon: 'local_mall', title: 'New Users', count: '323', progress: '50%', color: 'bg-red-400' },
{ icon: 'stacked_line_chart', title: 'Total Posts', count: '12', progress: '90%', color: 'bg-green-400' },
const Dashboard = ({ mode }) => {
const isDarkMode = mode === 'dark';
const blogs = [
{ id: 1, title: 'Understanding React', author: 'John Doe', category: 'Web Development' },
{ id: 2, title: 'CSS Tips and Tricks', author: 'Jane Smith', category: 'Design' },
{ id: 3, title: 'JavaScript Basics', author: 'Alice Johnson', category: 'Programming' },
];

const handleDelete = (id) => {
console.log(`Blog with id ${id} deleted`);
};

return (
<div className="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
<div
className={`container mt-20 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4 ${
isDarkMode ? 'bg-gray-900 text-gray-100' : 'bg-white text-gray-800'
}`}
>
{/* Header */}
<header className="col-span-full">
<h1 className="text-4xl font-bold text-gray-800 mb-4">Dashboard</h1>
<input type="date" className="p-2 border rounded-md text-gray-600" />
<h1 className="text-[72px] font-bold mb-4">Dashboard</h1>
</header>

{/* Insights */}
<section className="col-span-full grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{insightsData.map((item, index) => (
<InsightCard key={index} icon={item.icon} title={item.title} count={item.count} progress={item.progress} color={item.color} />
))}
<div
className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
}`}
>
<div className="flex items-center justify-between">
<span className="material-symbols-sharp text-4xl bg-coral text-white p-2 rounded-full">
<PiEyesDuotone />
</span>
<div className="text-right">
<h3 className="text-lg font-medium">Total Views</h3>
<h1 className="text-2xl font-bold">100</h1>
</div>
</div>
<div className="mt-4 relative">
<div className="progress-circle relative w-16 h-16">
<svg className="absolute inset-0" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
<circle
cx="50"
cy="50"
r="30"
className="text-blue-500"
strokeWidth="5"
strokeDasharray="150"
strokeDashoffset="calc(150 - (150 * 0.8))"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
80%
</div>
</div>
</div>
<small className="block text-gray-500 mt-2">Last 24 Hours</small>
</div>

<div
className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
}`}
>
<div className="flex items-center justify-between">
<span className="material-symbols-sharp text-4xl bg-red-400 text-white p-2 rounded-full">
<FaUsers />
</span>
<div className="text-right">
<h3 className="text-lg font-medium">New Users</h3>
<h1 className="text-2xl font-bold">323</h1>
</div>
</div>
<div className="mt-4 relative">
<div className="progress-circle relative w-16 h-16">
<svg className="absolute inset-0" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
<circle
cx="50"
cy="50"
r="30"
className="text-blue-500"
strokeWidth="5"
strokeDasharray="150"
strokeDashoffset="calc(150 - (150 * 0.5))"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
50%
</div>
</div>
</div>
<small className="block text-gray-500 mt-2">Last 24 Hours</small>
</div>

<div
className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
}`}
>
<div className="flex items-center justify-between">
<span className="material-symbols-sharp text-4xl bg-green-400 text-white p-2 rounded-full">
<FaMicroblog />
</span>
<div className="text-right">
<h3 className="text-lg font-medium">Total Posts</h3>
<h1 className="text-2xl font-bold">12</h1>
</div>
</div>
<div className="mt-4 relative">
<div className="progress-circle relative w-16 h-16">
<svg className="absolute inset-0" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
<circle
cx="50"
cy="50"
r="30"
className="text-blue-500"
strokeWidth="5"
strokeDasharray="150"
strokeDashoffset="calc(150 - (150 * 0.9))"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
90%
</div>
</div>
</div>
<small className="block text-gray-500 mt-2">Last 24 Hours</small>
</div>
</section>

{/* Recent Posts */}
{/* Blog Table */}
<section className="col-span-full mt-6">
<h2 className="text-2xl font-semibold text-gray-800 mb-4">Recent Posts</h2>
<div className="space-y-4">
{posts && posts.length > 0 ? (
posts.map((post, index) => <PostCard key={index} post={post} />)
) : (
<p className="text-gray-600">No posts available.</p>
)}
</div>
<a href="#" className="text-blue-500 mt-4 inline-block">Show All</a>
<h2 className="text-2xl font-semibold mb-4">Blog Posts</h2>
<table
className={`min-w-full border ${isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white border-gray-200'}`}
>
<thead>
<tr>
<th className="px-4 py-2 border-b">Title</th>
<th className="px-4 py-2 border-b">Author</th>
<th className="px-4 py-2 border-b">Category</th>
<th className="px-4 py-2 border-b">Actions</th>
</tr>
</thead>
<tbody>
{blogs.map((blog) => (
<tr key={blog.id} className={isDarkMode ? 'text-gray-200' : 'text-gray-700'}>
<td className="px-4 py-2 border-b">{blog.title}</td>
<td className="px-4 py-2 border-b">{blog.author}</td>
<td className="px-4 py-2 border-b">{blog.category}</td>
<td className="px-4 py-2 border-b">
<button
className={`px-3 py-1 rounded ${isDarkMode ? 'bg-red-600' : 'bg-red-500'} text-white`}
onClick={() => handleDelete(blog.id)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
<a href="#" className={`text-blue-500 mt-4 inline-block ${isDarkMode ? 'text-blue-300' : ''}`}>
Show All
</a>
</section>
</div>
);
};
PostCard.propTypes = {
post: PropTypes.string.isRequired,
};
Dashboard.propTypes = {
post: PropTypes.string.isRequired,
};
InsightCard.propTypes = {
post: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
count: PropTypes.string.isRequired,
progress: PropTypes.string.isRequired,
color: PropTypes.string.isRequired
mode: PropTypes.string, // Function to notify parent about profile update
};
export default Dashboard;

0 comments on commit d31f0c6

Please sign in to comment.