fix: fixing breadcrumbs admin and button in management-user
This commit is contained in:
parent
d21d377e17
commit
4c32b76ea3
|
|
@ -1,64 +1,111 @@
|
||||||
'use client';
|
"use client";
|
||||||
import React from 'react'
|
import React from "react";
|
||||||
import { Link, usePathname, useRouter } from "@/components/navigation";
|
import { Link, usePathname, useRouter } from "@/components/navigation";
|
||||||
import {
|
import {
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
BreadcrumbEllipsis,
|
BreadcrumbItem,
|
||||||
BreadcrumbItem,
|
BreadcrumbLink,
|
||||||
BreadcrumbLink,
|
BreadcrumbList,
|
||||||
BreadcrumbList,
|
BreadcrumbSeparator,
|
||||||
BreadcrumbPage,
|
} from "@/components/ui/breadcrumb";
|
||||||
BreadcrumbSeparator,
|
import { Icon } from "@/components/ui/icon";
|
||||||
} from "@/components/ui/breadcrumb"
|
|
||||||
import { Icon } from "@/components/ui/icon"
|
|
||||||
import { ReactNode } from "react";
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
|
const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
|
||||||
const location = usePathname();
|
const router = useRouter();
|
||||||
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 />
|
||||||
|
|
||||||
return (
|
<BreadcrumbItem>
|
||||||
<div className="flex justify-between gap-3 items-center mb-6">
|
<button
|
||||||
<div className="flex-1">
|
onClick={() => router.back()}
|
||||||
<Breadcrumb>
|
className="capitalize flex items-center gap-1"
|
||||||
<BreadcrumbList>
|
>
|
||||||
|
Back
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</button>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</div>
|
||||||
|
|
||||||
<BreadcrumbItem
|
<div className="flex-none flex gap-2">{children}</div>
|
||||||
>
|
</div>
|
||||||
<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;
|
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>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="p-0" align="end">
|
<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>
|
<a>Aktivasi</a>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem> */}
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<Link
|
||||||
<Link
|
href={`/admin/management-user/external/detail/${row.original.id}`}
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<a
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
|
||||||
onClick={() => {
|
Detail
|
||||||
handleDelete(row.original.id);
|
</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
|
Hapus
|
||||||
</a>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuItem>
|
</a>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -130,32 +130,32 @@ const columns: ColumnDef<any>[] = [
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="p-0" align="end">
|
<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
|
||||||
<Link
|
href={`/admin/management-user/internal/detail/${row.original.id}`}
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<a
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
|
||||||
onClick={() => {
|
Detail
|
||||||
handleDelete(row.original.id);
|
</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
|
Hapus
|
||||||
</a>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuItem>
|
</a>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue