FrontOps/UserDashboard
6
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

✨ table component

Browse Source
This commit is contained in:
sam 2025-02-20 23:52:51 +08:00
parent 02572d0644
commit c232a4705c
2 changed files with 148 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/panel-code-highlight.tsx Normal file
View File

@ -0,0 +1,31 @@
'use client';
import IconCode from '@/components/icon/icon-code';
import React, { useState, ReactNode } from 'react';
interface PanelCodeHighlightProps {
children: ReactNode;
title?: string;
codeHighlight?: string;
id?: string;
className?: string;
}
const PanelCodeHighlight = ({ children, title, codeHighlight, id, className = '' }: PanelCodeHighlightProps) => {
const [toggleCode, setToggleCode] = useState(false);
return (
<div className={`panel ${className}`} id={id}>
<div className="mb-5 flex items-center justify-between">
<h5 className="text-lg font-semibold dark:text-white-light">{title}</h5>
<button type="button" className="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" onClick={() => setToggleCode(!toggleCode)}>
<span className="flex items-center">
<IconCode className="me-2" />
Code
</span>
</button>
</div>
{children}
</div>
);
};
export default PanelCodeHighlight;

117
components/tables/components-tables-simple.tsx Normal file
View File

@ -0,0 +1,117 @@
'use client';
import IconTrashLines from '@/components/icon/icon-trash-lines';
import PanelCodeHighlight from '@/components/panel-code-highlight';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import React from 'react';
const ComponentsTablesSimple = () => {
const tableData = [
{
id: 1,
name: 'John Doe',
email: 'johndoe@yahoo.com',
date: '10/08/2020',
sale: 120,
status: 'Complete',
register: '5 min ago',
progress: '40%',
position: 'Developer',
office: 'London',
},
{
id: 2,
name: 'Shaun Park',
email: 'shaunpark@gmail.com',
date: '11/08/2020',
sale: 400,
status: 'Pending',
register: '11 min ago',
progress: '23%',
position: 'Designer',
office: 'New York',
},
{
id: 3,
name: 'Alma Clarke',
email: 'alma@gmail.com',
date: '12/02/2020',
sale: 310,
status: 'In Progress',
register: '1 hour ago',
progress: '80%',
position: 'Accountant',
office: 'Amazon',
},
{
id: 4,
name: 'Vincent Carpenter',
email: 'vincent@gmail.com',
date: '13/08/2020',
sale: 100,
status: 'Canceled',
register: '1 day ago',
progress: '60%',
position: 'Data Scientist',
office: 'Canada',
},
];
return (
<PanelCodeHighlight
title="Simple Table"
>
<div className="table-responsive mb-5">
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Sale</th>
<th>Status</th>
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{tableData.map((data) => {
return (
<tr key={data.id}>
<td>
<div className="whitespace-nowrap">{data.name}</div>
</td>
<td>{data.date}</td>
<td>{data.sale}</td>
<td>
<div
className={`whitespace-nowrap ${
data.status === 'completed'
? 'text-success'
: data.status === 'Pending'
? 'text-secondary'
: data.status === 'In Progress'
? 'text-info'
: data.status === 'Canceled'
? 'text-danger'
: 'text-success'
}`}
>
{data.status}
</div>
</td>
<td className="text-center">
<Tippy content="Delete">
<button type="button">
<IconTrashLines className="m-auto" />
</button>
</Tippy>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</PanelCodeHighlight>
);
};
export default ComponentsTablesSimple;