From 2f8b301a61fdf6d6525976f00fdba2b4ddb23194 Mon Sep 17 00:00:00 2001 From: Mathias Wagner Date: Tue, 9 Sep 2025 13:30:49 +0200 Subject: [PATCH] Create EmptyState component --- .../components/EmptyState/EmptyState.jsx | 19 +++++++++++ .../src/common/components/EmptyState/index.js | 1 + .../common/components/EmptyState/styles.sass | 32 +++++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 webui/src/common/components/EmptyState/EmptyState.jsx create mode 100644 webui/src/common/components/EmptyState/index.js create mode 100644 webui/src/common/components/EmptyState/styles.sass diff --git a/webui/src/common/components/EmptyState/EmptyState.jsx b/webui/src/common/components/EmptyState/EmptyState.jsx new file mode 100644 index 0000000..4ff967d --- /dev/null +++ b/webui/src/common/components/EmptyState/EmptyState.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import './styles.sass'; + +export const EmptyState = ({ + icon, + title, + description, + action, + className = '' +}) => { + return ( +
+ {icon &&
{icon}
} + {title &&

{title}

} + {description &&

{description}

} + {action &&
{action}
} +
+ ); +}; \ No newline at end of file diff --git a/webui/src/common/components/EmptyState/index.js b/webui/src/common/components/EmptyState/index.js new file mode 100644 index 0000000..97972bb --- /dev/null +++ b/webui/src/common/components/EmptyState/index.js @@ -0,0 +1 @@ +export { EmptyState as default } from './EmptyState.jsx'; \ No newline at end of file diff --git a/webui/src/common/components/EmptyState/styles.sass b/webui/src/common/components/EmptyState/styles.sass new file mode 100644 index 0000000..a183db4 --- /dev/null +++ b/webui/src/common/components/EmptyState/styles.sass @@ -0,0 +1,32 @@ +.empty-state + text-align: center + padding: 3rem 2rem + color: var(--text-dim) + display: flex + flex-direction: column + align-items: center + gap: 1rem + +.empty-state-icon + color: var(--text-dim) + display: flex + justify-content: center + + svg + width: 48px + height: 48px + +.empty-state-title + font-size: 1.2rem + font-weight: 600 + color: var(--text) + margin: 0 + +.empty-state-description + font-size: 0.95rem + margin: 0 + max-width: 400px + line-height: 1.5 + +.empty-state-action + margin-top: 0.5rem \ No newline at end of file