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

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

View File

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

View File

@ -13,25 +13,42 @@ export const ContentsPage = () => {
{ title: 'Nama Penulis', data: 'author' },
{ title: 'Judul', data: 'title' },
{ 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 (
<div className="relative">
<TitleDashboard title="Konten" />
<DataTable
className="cell-border"
data={CONTENTS}
columns={columns}
options={{
paging: true,
searching: true,
ordering: true,
info: true,
// scrollY: '50vh',
}}
></DataTable>
<div className="rounded-lg bg-white p-6 shadow-md">
<h3 className="py-1 font-semibold text-[#4C5CA0]">Daftar Content</h3>
<DataTable
className="cell-border"
data={CONTENTS}
columns={columns}
options={{
paging: true,
searching: true,
ordering: true,
info: true,
// scrollY: '50vh',
}}
></DataTable>
</div>
</div>
)
}