-
-
-
-
Task Templates
-
Manage reusable task templates
-
+
+
+ }
+ />
- {templates.length === 0 ? (
-
-
-
-
- No task templates yet
-
-
- Create reusable task templates to streamline your workflow
-
-
-
-
-
-
- ) : (
-
- {templates.map((template) => (
-
+
+
+
+
+
+ ))}{" "}
+
+ )}
+
);
}
diff --git a/src/components/ui/FilterBar.js b/src/components/ui/FilterBar.js
new file mode 100644
index 0000000..b44418e
--- /dev/null
+++ b/src/components/ui/FilterBar.js
@@ -0,0 +1,30 @@
+"use client";
+
+import { Select } from "./Input";
+
+const FilterBar = ({ filters, className = "" }) => {
+ if (!filters || filters.length === 0) return null;
+
+ return (
+
+ {filters.map((filter, index) => (
+
+
+
+ ))}
+
+ );
+};
+
+export default FilterBar;
diff --git a/src/components/ui/PageContainer.js b/src/components/ui/PageContainer.js
new file mode 100644
index 0000000..3e2b84c
--- /dev/null
+++ b/src/components/ui/PageContainer.js
@@ -0,0 +1,11 @@
+"use client";
+
+const PageContainer = ({ children, className = "" }) => {
+ return (
+
+ );
+};
+
+export default PageContainer;
diff --git a/src/components/ui/PageHeader.js b/src/components/ui/PageHeader.js
new file mode 100644
index 0000000..22919e2
--- /dev/null
+++ b/src/components/ui/PageHeader.js
@@ -0,0 +1,15 @@
+"use client";
+
+const PageHeader = ({ title, description, children, className = "" }) => {
+ return (
+
+
+
{title}
+ {description &&
{description}
}
+
+ {children &&
{children}
}
+
+ );
+};
+
+export default PageHeader;
diff --git a/src/components/ui/SearchBar.js b/src/components/ui/SearchBar.js
new file mode 100644
index 0000000..8b11bdd
--- /dev/null
+++ b/src/components/ui/SearchBar.js
@@ -0,0 +1,86 @@
+"use client";
+
+import { Input } from "./Input";
+
+const SearchBar = ({
+ searchTerm,
+ onSearchChange,
+ placeholder = "Search...",
+ resultsCount = null,
+ resultsText = "items",
+ onClear = null,
+ filters = null,
+ className = "",
+}) => {
+ return (
+
+
+
+
+
+ {searchTerm && (
+
+ )}
+
+ {filters}
+
+
+ {searchTerm && resultsCount !== null && (
+
+
+ Found{" "}
+ {resultsCount}{" "}
+ {resultsText} matching
+
+ {" "}
+ "{searchTerm}"
+
+
+
+ )}
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/components/ui/States.js b/src/components/ui/States.js
new file mode 100644
index 0000000..33b9e63
--- /dev/null
+++ b/src/components/ui/States.js
@@ -0,0 +1,113 @@
+"use client";
+
+import { Card, CardContent } from "./Card";
+import Button from "./Button";
+
+const LoadingSpinner = ({ size = "md" }) => {
+ const sizeClasses = {
+ sm: "w-4 h-4",
+ md: "w-8 h-8",
+ lg: "w-12 h-12",
+ };
+
+ return (
+
+ );
+};
+
+const LoadingState = ({ message = "Loading...", className = "" }) => {
+ return (
+
+ );
+};
+
+const EmptyState = ({
+ icon,
+ title,
+ description,
+ actionLabel,
+ actionHref,
+ onAction,
+ className = "",
+}) => {
+ return (
+
+
+
+ {icon || (
+
+ )}
+
{title}
+ {description && {description}
}
+ {actionLabel && (actionHref || onAction) && (
+
+ )}
+
+
+ );
+};
+
+const ErrorState = ({
+ title = "Something went wrong",
+ description = "We encountered an error. Please try again.",
+ onRetry,
+ className = "",
+}) => {
+ return (
+
+
+
+ {title}
+ {description}
+ {onRetry && (
+
+ )}
+
+
+ );
+};
+
+export { LoadingSpinner, LoadingState, EmptyState, ErrorState };