diff --git a/components/OrganizationList.tsx b/components/OrganizationList.tsx index be9de6dd..636e9c8b 100644 --- a/components/OrganizationList.tsx +++ b/components/OrganizationList.tsx @@ -42,6 +42,41 @@ export const OrganizationList = ({ organizations }: OrganizationListProps) => { const loadMoreItems = () => setItems(items + itemsPerScroll); const hasMoreItems = items < filteredOrganizations.length; + if (filteredOrganizations.length === 0) { + return ( +
+
+ + + +
+ void + } + /> +
+ +
+
+ +
+

No results found. Try changing your search term or filters.

+
+
+
+
+
+ ); + } + return (
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx index 34bc5488..87b75192 100644 --- a/components/RepositoryList.tsx +++ b/components/RepositoryList.tsx @@ -61,6 +61,34 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) => const loadMoreItems = () => setItems(items + itemsPerScroll); const hasMoreItems = items < filteredRepositories.length; + if (filteredRepositories.length === 0) { + return ( +
+
+ + + + + + + + +
+

No results found. Try changing your search term or filters.

+
+
+
+
+
+ ); + } + return (
diff --git a/styles/globals.scss b/styles/globals.scss index 899fee3b..e9fc8cf8 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -321,4 +321,17 @@ base, html { color: #57606a; pointer-events: none; } +} + +.empty-state { + display: flex; + align-items: center; + justify-content: center; + padding: 48px 16px; + text-align: center; + color: var(--light-text-secondary, #57606A); + font-size: 16px; + border: 1px dashed var(--light-border, #B7BFC7); + border-radius: 6px; + background: var(--light-bg-primary, #FFF); } \ No newline at end of file