feat: update content tags and enhance rendering in dashboard data table
This commit is contained in:
parent
d273d9ecc6
commit
c36c5721c8
@ -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',
|
||||
},
|
||||
|
||||
@ -13,13 +13,29 @@ 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" />
|
||||
<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}
|
||||
@ -33,5 +49,6 @@ export const ContentsPage = () => {
|
||||
}}
|
||||
></DataTable>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user