4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ warning in tabs

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-24 16:59:36 +02:00
parent 87d6e1e931
commit 635bd45b43
3 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss
View File

@ -6,6 +6,9 @@
border-bottom: 1px solid var(--tabs-stroke, #d7dce0); border-bottom: 1px solid var(--tabs-stroke, #d7dce0);
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-1-5, 12px);
&[data-is-selected="true"] { &[data-is-selected="true"] {
border-bottom: 2px solid var(--tabs-contrast-actived, #24282e); border-bottom: 2px solid var(--tabs-contrast-actived, #24282e);
} }

3
src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
View File

@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import useHoverable from "@Front/Hooks/useHoverable"; import useHoverable from "@Front/Hooks/useHoverable";
import { ITabValue } from ".."; import { ITabValue } from "..";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
export type ITab = { export type ITab = {
label: React.ReactNode; label: React.ReactNode;
}; };
@ -11,6 +12,7 @@ export type IProps<T> = {
onSelect: (value: ITabValue<T>) => void; onSelect: (value: ITabValue<T>) => void;
value: ITabValue<T>; value: ITabValue<T>;
isSelected: boolean; isSelected: boolean;
hasWarning?: boolean;
} & ITab; } & ITab;
export default function HorizontalTabs<T>(props: IProps<T>) { export default function HorizontalTabs<T>(props: IProps<T>) {
@ -29,6 +31,7 @@ export default function HorizontalTabs<T>(props: IProps<T>) {
color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}> color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}>
{props.label} {props.label}
</Typography> </Typography>
{props.hasWarning && <ExclamationCircleIcon width="24" height="24" color="var(--tabs-contrast-warning)" />}
</div> </div>
); );
} }

5
src/front/Components/Elements/Tabs/index.tsx
View File

@ -8,11 +8,12 @@ import useOpenable from "@Front/Hooks/useOpenable";
export type ITabValue<T> = T & { export type ITabValue<T> = T & {
id: unknown; id: unknown;
} };
type ITabInternal<T> = ITab & { type ITabInternal<T> = ITab & {
key?: string; key?: string;
value: ITabValue<T>; value: ITabValue<T>;
hasWarning?: boolean;
}; };
type IProps<T> = { type IProps<T> = {
@ -100,6 +101,7 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
value={element.value} value={element.value}
onSelect={handleSelect} onSelect={handleSelect}
isSelected={element.value.id === selectedTab.id} isSelected={element.value.id === selectedTab.id}
hasWarning={element.hasWarning}
/> />
))} ))}
</div> </div>
@ -112,6 +114,7 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
value={element.value} value={element.value}
onSelect={handleSelect} onSelect={handleSelect}
isSelected={element.value.id === selectedTab.id} isSelected={element.value.id === selectedTab.id}
hasWarning={element.hasWarning}
/> />
))} ))}
</div> </div>