Add Placeholder component
This commit is contained in:
parent
6e59ff7be1
commit
79cfe9755d
|
@ -1,5 +1,4 @@
|
|||
import { Button } from "../Button/Button";
|
||||
import "./emptyPlaceholder.css";
|
||||
import { Placeholder } from "../Placeholder/Placeholder";
|
||||
import { EmptyPlaceholderIcon } from "./EmptyPlaceholderIcon";
|
||||
|
||||
type Props = {
|
||||
|
@ -10,18 +9,11 @@ type Props = {
|
|||
|
||||
export function EmptyPlaceholder({ title, message, onRetry }: Props) {
|
||||
return (
|
||||
<div className="emptyPlaceholder">
|
||||
<EmptyPlaceholderIcon className="emptyPlaceholder-icon" width={178} />
|
||||
<b className="emptyPlaceholder-title">{title}</b>
|
||||
<div className="emptyPlaceholder-message">{message} </div>
|
||||
|
||||
{onRetry && (
|
||||
<Button
|
||||
label="Retry"
|
||||
onClick={onRetry}
|
||||
className="emptyPlaceholder-button"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Placeholder
|
||||
title={title}
|
||||
message={message}
|
||||
onRetry={onRetry}
|
||||
Icon={<EmptyPlaceholderIcon width={178} />}
|
||||
></Placeholder>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -1,17 +1,17 @@
|
|||
.emptyPlaceholder {
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emptyPlaceholder-icon {
|
||||
.placeholder-icon {
|
||||
display: block;
|
||||
margin: auto auto 0.75rem;
|
||||
}
|
||||
|
||||
.emptyPlaceholder-title {
|
||||
.placeholder-title {
|
||||
margin-bottom: 0.25rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.emptyPlaceholder-button {
|
||||
.placeholder-button {
|
||||
margin: 0.75rem auto 0;
|
||||
}
|
|
@ -31,3 +31,4 @@ export { Page } from "./components/Page/Page";
|
|||
export { NetworkIndicator } from "./components/NetworkIndicator/NetworkIndicator";
|
||||
export { Tooltip } from "./components/Tooltip/Tooltip";
|
||||
export { Collapse } from "./components/Collapse/Collapse";
|
||||
export { Placeholder } from "./components/Placeholder/Placeholder";
|
||||
|
|
Loading…
Reference in New Issue