fix: fixing breadcrumbs admin and button in management-user
This commit is contained in:
parent
d21d377e17
commit
4c32b76ea3
|
|
@ -1,64 +1,111 @@
|
|||
'use client';
|
||||
import React from 'react'
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { Link, usePathname, useRouter } from "@/components/navigation";
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbEllipsis,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb"
|
||||
import { Icon } from "@/components/ui/icon"
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb";
|
||||
import { Icon } from "@/components/ui/icon";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
|
||||
const location = usePathname();
|
||||
const locations = location.split('/').filter(path => path)
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="flex justify-between gap-3 items-center mb-6">
|
||||
<div className="flex-1">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<Link href="/dashboard">
|
||||
<Icon icon="heroicons:home" className="h-5 w-5" />
|
||||
</Link>
|
||||
</BreadcrumbItem>
|
||||
|
||||
<BreadcrumbSeparator />
|
||||
|
||||
return (
|
||||
<div className="flex justify-between gap-3 items-center mb-6">
|
||||
<div className="flex-1">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="capitalize flex items-center gap-1"
|
||||
>
|
||||
Back
|
||||
<BreadcrumbSeparator />
|
||||
</button>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
|
||||
<BreadcrumbItem
|
||||
>
|
||||
<Link href="/dashboard">
|
||||
<Icon icon="heroicons:home" className=" h-5 w-5" />
|
||||
</Link>
|
||||
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
|
||||
{
|
||||
locations.map((link, index) => {
|
||||
let href = `/${locations.slice(0, index + 1).join('/')}`
|
||||
let itemLink = link
|
||||
const isLast = index === locations.length - 1;
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<BreadcrumbItem className=' capitalize' >
|
||||
{isLast ? (
|
||||
itemLink?.replaceAll("-", " ")
|
||||
) : (
|
||||
<Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
|
||||
)}
|
||||
</BreadcrumbItem>
|
||||
{locations.length !== index + 1 && <BreadcrumbSeparator />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
<div className=" flex-none flex gap-2">{children}</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex-none flex gap-2">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteBreadcrumb;
|
||||
export default SiteBreadcrumb;
|
||||
|
||||
// 'use client';
|
||||
// import React from 'react'
|
||||
// import { Link, usePathname, useRouter } from "@/components/navigation";
|
||||
// import {
|
||||
// Breadcrumb,
|
||||
// BreadcrumbEllipsis,
|
||||
// BreadcrumbItem,
|
||||
// BreadcrumbLink,
|
||||
// BreadcrumbList,
|
||||
// BreadcrumbPage,
|
||||
// BreadcrumbSeparator,
|
||||
// } from "@/components/ui/breadcrumb"
|
||||
// import { Icon } from "@/components/ui/icon"
|
||||
// import { ReactNode } from "react";
|
||||
|
||||
// const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
|
||||
// const location = usePathname();
|
||||
// const locations = location.split('/').filter(path => path)
|
||||
|
||||
// return (
|
||||
// <div className="flex justify-between gap-3 items-center mb-6">
|
||||
// <div className="flex-1">
|
||||
// <Breadcrumb>
|
||||
// <BreadcrumbList>
|
||||
|
||||
// <BreadcrumbItem
|
||||
// >
|
||||
// <Link href="/dashboard">
|
||||
// <Icon icon="heroicons:home" className=" h-5 w-5" />
|
||||
// </Link>
|
||||
|
||||
// </BreadcrumbItem>
|
||||
// <BreadcrumbSeparator />
|
||||
|
||||
// {
|
||||
// locations.map((link, index) => {
|
||||
// let href = `/${locations.slice(0, index + 1).join('/')}`
|
||||
// let itemLink = link
|
||||
// const isLast = index === locations.length - 1;
|
||||
// return (
|
||||
// <React.Fragment key={index}>
|
||||
// <BreadcrumbItem className=' capitalize' >
|
||||
// {isLast ? (
|
||||
// itemLink?.replaceAll("-", " ")
|
||||
// ) : (
|
||||
// <Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
|
||||
// )}
|
||||
// </BreadcrumbItem>
|
||||
// {locations.length !== index + 1 && <BreadcrumbSeparator />}
|
||||
// </React.Fragment>
|
||||
// )
|
||||
// })
|
||||
// }
|
||||
// </BreadcrumbList>
|
||||
// </Breadcrumb>
|
||||
// </div>
|
||||
// <div className=" flex-none flex gap-2">{children}</div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default SiteBreadcrumb;
|
||||
|
|
|
|||
|
|
@ -133,35 +133,35 @@ const columns: ColumnDef<any>[] = [
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
{/* <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<a>Aktivasi</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Link
|
||||
href={`/admin/management-user/external/detail/${row.original.id}`}
|
||||
>
|
||||
Detail
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Link
|
||||
href={`/admin/management-user/external/edit/${row.original.id}`}
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
color="red"
|
||||
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
|
||||
</DropdownMenuItem> */}
|
||||
<Link
|
||||
href={`/admin/management-user/external/detail/${row.original.id}`}
|
||||
>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleDelete(row.original.id);
|
||||
}}
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
|
||||
Detail
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/admin/management-user/external/edit/${row.original.id}`}
|
||||
>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleDelete(row.original.id);
|
||||
}}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
color="red"
|
||||
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
|
||||
>
|
||||
Hapus
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuItem>
|
||||
</a>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -130,32 +130,32 @@ const columns: ColumnDef<any>[] = [
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Link
|
||||
href={`/admin/management-user/internal/detail/${row.original.id}`}
|
||||
>
|
||||
Detail
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Link
|
||||
href={`/admin/management-user/internal/edit/${row.original.id}`}
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
color="red"
|
||||
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none"
|
||||
<Link
|
||||
href={`/admin/management-user/internal/detail/${row.original.id}`}
|
||||
>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleDelete(row.original.id);
|
||||
}}
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
|
||||
Detail
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/admin/management-user/internal/edit/${row.original.id}`}
|
||||
>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleDelete(row.original.id);
|
||||
}}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
color="red"
|
||||
className="p-2 border-b text-red-500 group focus:bg-red-500 focus:text-white rounded-none cursor-pointer"
|
||||
>
|
||||
Hapus
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuItem>
|
||||
</a>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue