Breadcrumb Fix

resources/js/Pages/Comic/Favourites.jsx

@@ -70,7 +70,7 @@ export default function Favourites({ auth, favourites }) {
     return (
         <AppLayout auth={ auth } header={
             <>
-                <BreadcrumbSeparator />
+                <BreadcrumbSeparator className="hidden lg:block" />
                 <BreadcrumbItem>
                     <BreadcrumbPage>Favourites</BreadcrumbPage>
                 </BreadcrumbItem>

resources/js/Pages/Comic/Histories.jsx

@@ -24,6 +24,18 @@ export default function Histories({ auth, histories }) {
         }
     }
 
+    const datetimeConversion = (iso8601) => {
+        const date = new Date(iso8601);
+
+        const year = date.getUTCFullYear();
+        const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-based
+        const day = String(date.getUTCDate()).padStart(2, '0');
+        const hours = String(date.getUTCHours()).padStart(2, '0');
+        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+
+        return  `${year}-${month}-${day} ${hours}:${minutes}`;
+    }
+
     const deleteButtonOnClickHandler = () => {
         router.visit(route('comics.destroyHistories'), {
             data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
@@ -41,7 +53,7 @@ export default function Histories({ auth, histories }) {
     return (
         <AppLayout auth={ auth } header={
             <>
-                <BreadcrumbSeparator />
+                <BreadcrumbSeparator className="hidden lg:block" />
                 <BreadcrumbItem>
                     <BreadcrumbPage>Histories</BreadcrumbPage>
                 </BreadcrumbItem>
@@ -62,7 +74,7 @@ export default function Histories({ auth, histories }) {
                             <TableHead>Select</TableHead>
                             <TableHead>Chapter</TableHead>
                             <TableHead>Comic</TableHead>
-                            <TableHead>Read at</TableHead>
+                            <TableHead className="hidden lg:block">Read at</TableHead>
                         </TableRow>
                     </TableHeader>
                     <TableBody>
@@ -85,7 +97,7 @@ export default function Histories({ auth, histories }) {
                                         { h.comic.name }
                                     </Link>
                                 </TableCell>
-                                <TableCell>{ h.created_at }</TableCell>
+                                <TableCell className="hidden lg:block">{ datetimeConversion(h.created_at) }</TableCell>
                             </TableRow>
                         )) }
                     </TableBody>

resources/js/Pages/Comic/Read.jsx

@@ -258,17 +258,15 @@ export default function Read({ auth, comic, chapter }) {
     return (
         <AppLayout auth={ auth } header={
             <>
-                <span className="hidden lg:block">
+                <BreadcrumbSeparator className="hidden lg:block"/>
-                    <BreadcrumbSeparator />
+                <BreadcrumbItem className="hidden lg:block">
-                    <BreadcrumbItem>
                     <BreadcrumbLink asChild>
                         <Link href={ route('comics.chapters', [comic.comic.path_word]) }>
                             { comic.comic.name }
                         </Link>
                     </BreadcrumbLink>
                 </BreadcrumbItem>
-                    <BreadcrumbSeparator />
+                <BreadcrumbSeparator className="hidden lg:block" />
-                </span>
                 <BreadcrumbItem>
                     <BreadcrumbPage>{ chapter.chapter.name }</BreadcrumbPage>
                 </BreadcrumbItem>