MermsFirstOffice/src/components/products/ProductView.jsx

import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'

export default function ProductView() {

    return (
        <div className='w-full flex flex-col gap-8'>
            <BreadcrumbCom title='Product View [ProductID]' paths={['Dashboard', 'Product View']}/>

            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>

                <table className="py-2 w-full text-sm">
                    <thead className="py-2 text-sm text-slate-500 text-left">
                    <tr>
                        <th scope="col" className="px-2 py-2" style={{width: '150px'}}>
                            Item
                        </th>
                        <th scope="col" className="px-2">
                            Value
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr className="py-2 border-t border-dashed border-slate-300">
                        <td className="px-2 py-2">
                            <div
                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                <div className="text-left">
                                    ProductID
                                </div>
                            </div>
                        </td>
                        <td className="px-2">
                            <div className="text-left">
                                P000008
                            </div>
                        </td>
                    </tr>

                    <tr className="py-2 border-t border-dashed border-slate-300">
                        <td className="px-2 py-2">
                            <div
                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                <div className="text-left">
                                    ProductID
                                </div>
                            </div>
                        </td>
                        <td className="px-2">
                            <div className="text-left">
                                P000008
                            </div>
                        </td>
                    </tr>
                    <tr className="py-2 border-t border-dashed border-slate-300">
                        <td className="px-2 py-2">
                            <div
                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                <div className="text-left">
                                    ProductID
                                </div>
                            </div>
                        </td>
                        <td className="px-2">
                            <div className="text-left">
                                P000008
                            </div>
                        </td>
                    </tr>
                    <tr className="py-2 border-t border-dashed border-slate-300">
                        <td className="px-2 py-2">
                            <div
                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                <div className="text-left">
                                    ProductID
                                </div>
                            </div>
                        </td>
                        <td className="px-2">
                            <div className="text-left">
                                P000008
                            </div>
                        </td>
                    </tr>
                    <tr className="py-2 border-t border-dashed border-slate-300">
                        <td className="px-2 py-2">
                            <div
                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                <div className="text-left">
                                    ProductID
                                </div>
                            </div>
                        </td>
                        <td className="px-2">
                            <div className="text-left">
                                P000008
                            </div>
                        </td>
                    </tr>
                    <tr className="py-2 border-t border-dashed border-slate-300">
                        <td className="px-2 py-2">
                            <div
                                className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
                                <div className="text-left">
                                    ProductID
                                </div>
                            </div>
                        </td>
                        <td className="px-2">
                            <div className="text-left">
                                P000008
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    )
}