feat: create PageEmptyList empty state component

2026-04-05 20:55:06 +03:00
parent 9ba5c9cbf0
commit b5bdd1e18d
3 changed files with 47 additions and 0 deletions
@@ -0,0 +1,2 @@
+export { PageEmptyList } from './page-empty-list'
+export type { PageEmptyListProps } from './page-empty-list'
@@ -0,0 +1,22 @@
+.page-empty-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  color: #999;
+}
+
+.page-empty-list__icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.7;
+}
+
+.page-empty-list__message {
+  font-size: 18px;
+  margin: 0;
+  color: #666;
+  max-width: 400px;
+}
@@ -0,0 +1,23 @@
+import React from 'react'
+import './page-empty-list.scss'
+
+export interface PageEmptyListProps {
+  message?: string
+  icon?: string
+  className?: string
+  'data-testid'?: string
+}
+
+export const PageEmptyList: React.FC<PageEmptyListProps> = ({
+  message = 'No results found',
+  icon = '✈️',
+  className,
+  'data-testid': dataTestId,
+}) => {
+  return (
+    <div className={`page-empty-list ${className || ''}`} data-testid={dataTestId || 'page-empty-list'}>
+      <div className="page-empty-list__icon">{icon}</div>
+      <p className="page-empty-list__message">{message}</p>
+    </div>
+  )
+}