Add Placeholder component
This commit is contained in:
parent
6e59ff7be1
commit
79cfe9755d
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
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;
|
||||||
}
|
}
|
|
@ -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";
|
||||||
|
|
Loading…
Reference in New Issue