midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

This commit is contained in:
rizky 2024-08-02 04:36:16 -07:00
parent 75a5ff497f
commit f2fb7ed35a
1 changed files with 76 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
comps/custom/Breadcrumb.tsx
View File

@ -1,6 +1,7 @@
import { useLocal } from "@/utils/use-local"; import { useLocal } from "@/utils/use-local";
import { FC, ReactNode, useEffect } from "react"; import { FC, ReactNode, useEffect } from "react";
import { FieldLoading } from "../ui/field-loading"; import { FieldLoading } from "../ui/field-loading";
import { ChevronLeft } from "lucide-react";
export type BreadItem = { export type BreadItem = {
label: React.ReactNode; label: React.ReactNode;
@ -39,10 +40,13 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
local.value = value; local.value = value;
} }
const list = Array.isArray(local.value) ? local.value : [];
return ( return (
<div <div
className={cx( className={cx(
"breadcrumb c-w-full c-flex c-items-center c-flex-wrap", "breadcrumb c-w-full c-flex c-flex-wrap",
isMobile ? "c-items-stretch" : "c-items-center",
className className
)} )}
> >
@ -53,50 +57,79 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
{(!local.value || local.value.length === 0) && {(!local.value || local.value.length === 0) &&
isEditor && isEditor &&
"Breadcrumb"} "Breadcrumb"}
{(Array.isArray(local.value) ? local.value : []).map( {isDesktop && (
(cur, index): ReactNode => { <>
const lastIndex = (local.value || []).length - 1; {list.map((cur, index): ReactNode => {
const lastIndex = (local.value || []).length - 1;
return ( return (
<> <>
{index === lastIndex ? ( {index === lastIndex ? (
<h1 className="c-font-semibold c-text-xs md:c-text-base"> <h1 className="c-font-semibold c-text-xs md:c-text-base">
{cur?.label} {cur?.label}
</h1> </h1>
) : ( ) : (
<h1 <h1
className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline" className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
onClick={(ev) => { onClick={(ev) => {
if (isEditor) return; if (isEditor) return;
if (cur.url) navigate(cur.url || ""); if (cur.url) navigate(cur.url || "");
if (cur.onClick) cur.onClick(ev); if (cur.onClick) cur.onClick(ev);
}} }}
>
{cur?.label}
</h1>
)}
{index !== lastIndex && (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-chevron-right"
> >
<path d="m9 18 6-6-6-6" /> {cur?.label}
</svg> </h1>
</div> )}
)}
</> {index !== lastIndex && (
); <div>
} <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-chevron-right"
>
<path d="m9 18 6-6-6-6" />
</svg>
</div>
)}
</>
);
})}
</>
)}
{isMobile && (
<>
{list.length > 1 && (
<div className={cx("c-flex c-items-stretch")}>
<div
className="breadcrumb-back c-flex c-items-center c-px-2 c-border-r "
onClick={(ev) => {
const cur = list[list.length - 2];
if (isEditor) return;
if (cur.url) navigate(cur.url || "");
if (cur.onClick) cur.onClick(ev);
}}
>
<ChevronLeft />
</div>
<h1 className="bredcrumb-label c-flex c-font-semibold c-items-center c-pl-2 c-text-xs md:c-text-base">
{list[list.length - 1].label}
</h1>
</div>
)}
{list.length === 1 && (
<h1 className="bredcrumb-label c-font-semibold c-flex c-px-3 c-items-center c-text-xs md:c-text-base">
{list[0].label}
</h1>
)}
</>
)} )}
</> </>
)} )}