Skip to content

Commit

Permalink
working on dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@sudoarchie
sudoarchie committed Sep 26, 2023
1 parent f092cf7 commit 6ae0029
Show file tree
Hide file tree
Showing 5 changed files with 2,165 additions and 139 deletions.
34 changes: 34 additions & 0 deletions app/blog/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react'
import { Navbar } from '../components/navbar'
import Image from 'next/image'
import Heroimg from '../../images/2.jpg'

function page() {
return (
<div><Navbar></Navbar>
<div className="relative w-full bg-white mt-10">
<div className="mx-auto max-w-7xl lg:px-8">

<div className="rounded-lg bg-gray-200 p-4">
<Image
src={Heroimg}
className="aspect-[3/2] w-full rounded-lg bg-gray-50 object-cover lg:aspect-auto lg:h-[400px]"
alt="Go Back"
/>

</div>
</div>
</div>
<div className='w-full my-[50px]'>
<div className=' mx-auto sm:w-[100vw] lg:w-[90vw]'>
<h1 className=''>lorem12</h1>
<p className=''>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error consequatur obcaecati praesentium laboriosam quam inventore ipsa eius ducimus repellendus laborum sequi enim expedita, maiores, beatae, sapiente architecto sint saepe minus. Error facilis nam harum accusamus magni magnam, cumque quisquam sint doloremque excepturi molestiae consectetur eaque, perspiciatis laboriosam ab sed, quos sunt vitae optio eos dolorum. Labore voluptatem repudiandae accusamus non facere voluptatibus hic, assumenda dolor tempore? Aut, in velit! Repellat amet ipsam, sit perferendis recusandae omnis praesentium, assumenda ipsa magnam deserunt harum sequi vel exercitationem modi consequatur architecto! Laudantium fuga unde quas quibusdam voluptas nobis vitae recusandae id dolores autem odio deserunt minima ut modi, repellat a at vero. Sit cum, nihil aspernatur fugiat maiores quia nam corporis quod expedita dolore inventore tempore neque natus voluptatem necessitatibus at quo non esse modi. Reiciendis excepturi odit ex facere ab error, labore eius natus eaque maxime exercitationem, voluptatem illo neque iusto sapiente. Distinctio eos fuga debitis accusantium soluta adipisci ab sit fugit obcaecati, eveniet minus praesentium? Praesentium culpa inventore consequuntur illo quibusdam corporis, qui, rem labore omnis accusamus quae deleniti fugiat, ullam molestias officia. Maiores accusantium quod labore nesciunt totam earum voluptatem fuga nemo neque. Consequuntur rem cupiditate officiis incidunt labore. Quibusdam! </p>
</div>
</div>

</div>

)
}

export default page
88 changes: 88 additions & 0 deletions app/components/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react'
import { BarChart, Wallet, Newspaper, BellRing, Paperclip, Brush, Wrench } from 'lucide-react'

export function Sidebar() {
return (
<aside className="flex h-screen w-64 flex-col overflow-y-auto border-r bg-white px-5 py-8">
{/* <a href="#">
<svg
width="40"
height="46"
viewBox="0 0 50 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.2732 0.2528C20.8078 1.18964 2.12023 12.2346 1.08477 13.3686C0 14.552 0 14.7493 0 27.7665C0 39.6496 0.0986153 41.1289 0.83823 42.0164C2.12023 43.5449 23.2239 55.4774 24.6538 55.5267C25.9358 55.576 46.1027 44.3832 48.2229 42.4602C49.3077 41.474 49.3077 41.3261 49.3077 27.8158C49.3077 14.3055 49.3077 14.1576 48.2229 13.1714C46.6451 11.7415 27.1192 0.450027 25.64 0.104874C24.9497 -0.0923538 23.9142 0.00625992 23.2732 0.2528ZM20.2161 21.8989C20.2161 22.4906 18.9835 23.8219 17.0111 25.3997C15.2361 26.7803 13.8061 27.9637 13.8061 28.0623C13.8061 28.1116 15.2361 29.0978 16.9618 30.2319C18.6876 31.3659 20.2655 32.6479 20.4134 33.0917C20.8078 34.0286 19.871 35.2119 18.8355 35.2119C17.8001 35.2119 9.0233 29.3936 8.67815 28.5061C8.333 27.6186 9.36846 26.5338 14.3485 22.885C17.6521 20.4196 18.4904 20.0252 19.2793 20.4196C19.7724 20.7155 20.2161 21.3565 20.2161 21.8989ZM25.6893 27.6679C23.4211 34.9161 23.0267 35.7543 22.1391 34.8668C21.7447 34.4723 22.1391 32.6479 23.6677 27.9637C26.2317 20.321 26.5275 19.6307 27.2671 20.3703C27.6123 20.7155 27.1685 22.7864 25.6893 27.6679ZM36.0932 23.2302C40.6788 26.2379 41.3198 27.0269 40.3337 28.1609C39.1503 29.5909 31.6555 35.2119 30.9159 35.2119C29.9298 35.2119 28.9436 33.8806 29.2394 33.0424C29.3874 32.6479 30.9652 31.218 32.7403 29.8867L35.9946 27.4706L32.5431 25.1532C30.6201 23.9205 29.0915 22.7371 29.0915 22.5892C29.0915 21.7509 30.2256 20.4196 30.9159 20.4196C31.3597 20.4196 33.6771 21.7016 36.0932 23.2302Z"
fill="black"
/>
</svg>
</a> */}
<div className="mt-6 flex flex-1 flex-col justify-between">
<nav className="-mx-3 space-y-6 ">
<div className="space-y-3 ">
<label className="px-3 text-xs font-semibold uppercase text-gray-900">analytics</label>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<BarChart className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Dashboard</span>
</a>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<Wallet className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Sales</span>
</a>
</div>
<div className="space-y-3 ">
<label className="px-3 text-xs font-semibold uppercase text-gray-900">content</label>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<Newspaper className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Blogs</span>
</a>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<BellRing className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Notifications</span>
</a>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<Paperclip className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Checklists</span>
</a>
</div>

<div className="space-y-3 ">
<label className="px-3 text-xs font-semibold uppercase text-gray-900">
Customization
</label>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<Brush className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Themes</span>
</a>
<a
className="flex transform items-center rounded-lg px-3 py-2 text-gray-600 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-700"
href="#"
>
<Wrench className="h-5 w-5" aria-hidden="true" />
<span className="mx-2 text-sm font-medium">Setting</span>
</a>
</div>
</nav>
</div>
</aside>
)
}
221 changes: 219 additions & 2 deletions app/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,230 @@ import React from 'react'
// import { Navbar } from '../components/navbar'
import { NavbarLogout } from '../components/navbarlogout'
import { TableData } from './table'
import { Sidebar } from '../components/sidebar'
import { ArrowLeft, ArrowRight } from 'lucide-react'

const data = [
{
department: 'Engineering',
employess: [
{
name: 'John Doe',
title: 'Front-end Developer',
department: 'Engineering',
email: '[email protected]',
role: 'Developer',
image:
'https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80',
},
{
name: 'Jane Doe',
title: 'Back-end Developer',
department: 'Engineering',
email: '[email protected]',
role: 'CTO',
image:
'https://images.unsplash.com/photo-1639149888905-fb39731f2e6c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80',
},
],
},
{
department: 'Marketing',
employess: [
{
name: 'Mark Doe',
title: 'Digital Marketing',
department: 'Marketing',
email: '[email protected]',
role: 'SEO Manager',
image:
'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
},
{
name: 'Seb Cook',
title: 'Social Media',
department: 'Marketing',
email: '[email protected]',
role: 'Social Media Manager',
image:
'https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80',
},
],
},
]

function page() {
return (
<>
<NavbarLogout></NavbarLogout>
<NavbarLogout></NavbarLogout>
<div className='grid grid-cols-2'>
<div className='fixed'>
<Sidebar></Sidebar>
</div>

{/* Dashboard section */}
<div className='w-[100%] relative origin-center left-64'>

<div className='flex justify-center'><h1 className='text-2xl font-extrabold mt-10 '>केतकी सिंह विधायक 362 विधान सभा बांसडीह</h1></div>
<TableData></TableData>
<section className="mx-auto w-full max-w-7xl px-4 py-4">
<div className="flex flex-col space-y-4 md:flex-row md:items-center md:justify-between md:space-y-0">
<div>
<h2 className="text-lg font-semibold text-black">Employees</h2>
<p className="mt-1 text-sm text-gray-700">
This is a list of all employees. You can add new employees, edit or delete existing
ones.
</p>
</div>
<div>
<button
type="button"
className="rounded-md bg-black px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-black/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
>
Add new employee
</button>
</div>
</div>
<div className="mt-6 flex flex-col">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div className="overflow-hidden border border-gray-200 md:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-4 py-3.5 text-left text-sm font-normal text-gray-500"
>
<span>Employee</span>
</th>
<th
scope="col"
className="px-12 py-3.5 text-left text-sm font-normal text-gray-500"
>
Title
</th>

<th
scope="col"
className="px-4 py-3.5 text-left text-sm font-normal text-gray-500"
>
Status
</th>

<th
scope="col"
className="px-4 py-3.5 text-left text-sm font-normal text-gray-500"
>
Role
</th>
<th scope="col" className="relative px-4 py-3.5">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
{data.map((dept) => (
<React.Fragment key={dept.department}>
<tr className="border-t border-gray-200">
<th
colSpan={5}
scope="col"
className="bg-gray-50 py-2 pl-4 pr-3 text-left text-sm font-medium text-gray-500"
>
{dept.department}
</th>
</tr>
{dept.employess.map((employee) => (
<tr key={employee.name}>
<td className="whitespace-nowrap px-4 py-4">
<div className="flex items-center">
<div className="h-10 w-10 flex-shrink-0">
<img
className="h-10 w-10 rounded-full object-cover"
src={employee.image}
alt=""
/>
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900 ">
{employee.name}
</div>
<div className="text-sm text-gray-500">{employee.email}</div>
</div>
</div>
</td>
<td className="whitespace-nowrap px-12 py-4">
<div className="text-sm text-gray-900">{employee.title}</div>
<div className="text-sm text-gray-500">{employee.department}</div>
</td>
<td className="whitespace-nowrap px-4 py-4">
<span className="inline-flex rounded-full bg-green-100 px-2 text-xs font-semibold leading-5 text-green-800">
Active
</span>
</td>
<td className="whitespace-nowrap px-4 py-4 text-sm text-gray-500">
{employee.role}
</td>
<td className="whitespace-nowrap px-4 py-4 text-right text-sm font-medium">
<a href="#" className="text-gray-500">
Edit
</a>
</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="mt-6 flex items-center justify-between">
<a
href="#"
className="flex items-center gap-x-2 rounded-md border bg-white px-5 py-2 text-sm capitalize text-gray-700 transition-colors duration-200 hover:bg-gray-100"
>
<ArrowLeft className="h-4 w-4" />
<span>previous</span>
</a>

<div className="hidden items-center gap-x-3 md:flex">
<a href="#" className="rounded-md bg-gray-100 px-2 py-1 text-sm">
1
</a>
<a href="#" className="rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100">
2
</a>
<a href="#" className="rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100">
3
</a>
<a href="#" className="rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100">
...
</a>
<a href="#" className="rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100">
12
</a>
<a href="#" className="rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100">
13
</a>
<a href="#" className="rounded-md px-2 py-1 text-sm text-gray-500 hover:bg-gray-100">
14
</a>
</div>
<a
href="#"
className="flex items-center gap-x-2 rounded-md border bg-white px-5 py-2 text-sm capitalize text-gray-700 transition-colors duration-200 hover:bg-gray-100"
>
<span>Next</span>
<ArrowRight className="h-4 w-4" />
</a>
</div>
</section>
</div>
</div>


</>
)
}
Expand Down
Loading

0 comments on commit 6ae0029

Please sign in to comment.