Add Placeholder component

This commit is contained in:
Arnaud 2024-08-30 10:51:48 +02:00
parent 6e59ff7be1
commit 79cfe9755d
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
4 changed files with 47 additions and 19 deletions

View File

@ -1,5 +1,4 @@
import { Button } from "../Button/Button"; import { Placeholder } from "../Placeholder/Placeholder";
import "./emptyPlaceholder.css";
import { EmptyPlaceholderIcon } from "./EmptyPlaceholderIcon"; import { EmptyPlaceholderIcon } from "./EmptyPlaceholderIcon";
type Props = { type Props = {
@ -10,18 +9,11 @@ type Props = {
export function EmptyPlaceholder({ title, message, onRetry }: Props) { export function EmptyPlaceholder({ title, message, onRetry }: Props) {
return ( return (
<div className="emptyPlaceholder"> <Placeholder
<EmptyPlaceholderIcon className="emptyPlaceholder-icon" width={178} /> title={title}
<b className="emptyPlaceholder-title">{title}</b> message={message}
<div className="emptyPlaceholder-message">{message} </div> onRetry={onRetry}
Icon={<EmptyPlaceholderIcon width={178} />}
{onRetry && ( ></Placeholder>
<Button
label="Retry"
onClick={onRetry}
className="emptyPlaceholder-button"
/>
)}
</div>
); );
} }

View File

@ -0,0 +1,35 @@
import { ReactNode } from "react";
import { Button } from "../Button/Button";
import "./placeholder.css";
type Props = {
title: string;
message: string;
onRetry?: () => void | Promise<void>;
Icon: ReactNode;
className?: string;
};
export function Placeholder({
title,
message,
Icon,
className = "",
onRetry,
}: Props) {
return (
<div className={"placeholder " + className}>
<div className="placeholder-icon">{Icon}</div>
<b className="placeholder-title">{title}</b>
<div className="placeholder-message">{message} </div>
{onRetry && (
<Button
label="Retry"
onClick={onRetry}
className="placeholder-button"
/>
)}
</div>
);
}

View File

@ -1,17 +1,17 @@
.emptyPlaceholder { .placeholder {
text-align: center; text-align: center;
} }
.emptyPlaceholder-icon { .placeholder-icon {
display: block; display: block;
margin: auto auto 0.75rem; margin: auto auto 0.75rem;
} }
.emptyPlaceholder-title { .placeholder-title {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
display: inline-block; display: inline-block;
} }
.emptyPlaceholder-button { .placeholder-button {
margin: 0.75rem auto 0; margin: 0.75rem auto 0;
} }

View File

@ -31,3 +31,4 @@ export { Page } from "./components/Page/Page";
export { NetworkIndicator } from "./components/NetworkIndicator/NetworkIndicator"; export { NetworkIndicator } from "./components/NetworkIndicator/NetworkIndicator";
export { Tooltip } from "./components/Tooltip/Tooltip"; export { Tooltip } from "./components/Tooltip/Tooltip";
export { Collapse } from "./components/Collapse/Collapse"; export { Collapse } from "./components/Collapse/Collapse";
export { Placeholder } from "./components/Placeholder/Placeholder";