legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update content tags and enhance rendering in dashboard data table

Browse Source
This commit is contained in:
fredy.siswanto 2025-02-26 23:26:46 +07:00
parent d273d9ecc6
commit c36c5721c8
2 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/pages/dashboard-contents/data.ts
View File

@ -14,7 +14,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'John Doe', author: 'John Doe',
title: 'Introduction to TypeScript', title: 'Introduction to TypeScript',
tags: 'typescript, programming', tags: 'Normal',
category: 'Education', category: 'Education',
status: 'Published', status: 'Published',
}, },
@ -23,7 +23,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Jane Smith', author: 'Jane Smith',
title: 'Advanced React Patterns', title: 'Advanced React Patterns',
tags: 'react, javascript', tags: 'Normal',
category: 'Development', category: 'Development',
status: 'Draft', status: 'Draft',
}, },
@ -32,7 +32,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Alice Johnson', author: 'Alice Johnson',
title: 'Understanding Redux', title: 'Understanding Redux',
tags: 'redux, state management', tags: 'Normal',
category: 'Development', category: 'Development',
status: 'Published', status: 'Published',
}, },
@ -41,7 +41,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Bob Brown', author: 'Bob Brown',
title: 'CSS Grid Layout', title: 'CSS Grid Layout',
tags: 'css, design', tags: 'Premium',
category: 'Design', category: 'Design',
status: 'Published', status: 'Published',
}, },
@ -50,7 +50,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Charlie Davis', author: 'Charlie Davis',
title: 'Node.js Best Practices', title: 'Node.js Best Practices',
tags: 'nodejs, backend', tags: 'Premium',
category: 'Development', category: 'Development',
status: 'Published', status: 'Published',
}, },
@ -59,7 +59,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Diana Evans', author: 'Diana Evans',
title: 'GraphQL for Beginners', title: 'GraphQL for Beginners',
tags: 'graphql, api', tags: 'Premium',
category: 'Development', category: 'Development',
status: 'Draft', status: 'Draft',
}, },
@ -68,7 +68,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Evan Harris', author: 'Evan Harris',
title: 'Building RESTful APIs', title: 'Building RESTful APIs',
tags: 'rest, api', tags: 'Premium',
category: 'Development', category: 'Development',
status: 'Published', status: 'Published',
}, },
@ -77,7 +77,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Fiona Green', author: 'Fiona Green',
title: 'Introduction to Docker', title: 'Introduction to Docker',
tags: 'docker, devops', tags: 'Normal',
category: 'DevOps', category: 'DevOps',
status: 'Published', status: 'Published',
}, },
@ -86,7 +86,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'George King', author: 'George King',
title: 'Microservices Architecture', title: 'Microservices Architecture',
tags: 'microservices, architecture', tags: 'Normal',
category: 'Development', category: 'Development',
status: 'Draft', status: 'Draft',
}, },
@ -95,7 +95,7 @@ export const CONTENTS: TContens[] = [
createdAt: '24/10/2024', createdAt: '24/10/2024',
author: 'Hannah Lee', author: 'Hannah Lee',
title: 'Kubernetes Essentials', title: 'Kubernetes Essentials',
tags: 'kubernetes, devops', tags: 'Normal',
category: 'DevOps', category: 'DevOps',
status: 'Published', status: 'Published',
}, },

45
app/pages/dashboard-contents/index.tsx
View File

@ -13,25 +13,42 @@ export const ContentsPage = () => {
{ title: 'Nama Penulis', data: 'author' }, { title: 'Nama Penulis', data: 'author' },
{ title: 'Judul', data: 'title' }, { title: 'Judul', data: 'title' },
{ title: 'Kategori', data: 'category' }, { title: 'Kategori', data: 'category' },
{ title: 'Tags', data: 'tags' }, {
{ title: 'Action', data: 'id', render: () => 'Edit' }, title: 'Tags',
data: 'tags',
render: (value: string) => {
return value === 'Normal'
? `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
: `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">${value}</span>`
},
},
{
title: 'Action',
data: 'id',
render: () => {
return '<button class="bg-[#2E2F7C] text-white px-2 py-1 rounded-md">Lihat Detail</button>'
},
},
] ]
return ( return (
<div className="relative"> <div className="relative">
<TitleDashboard title="Konten" /> <TitleDashboard title="Konten" />
<DataTable <div className="rounded-lg bg-white p-6 shadow-md">
className="cell-border" <h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
data={CONTENTS} <DataTable
columns={columns} className="cell-border"
options={{ data={CONTENTS}
paging: true, columns={columns}
searching: true, options={{
ordering: true, paging: true,
info: true, searching: true,
// scrollY: '50vh', ordering: true,
}} info: true,
></DataTable> // scrollY: '50vh',
}}
></DataTable>
</div>
</div> </div>
) )
} }