Refactor Project Tasks and Task Templates pages with new UI components
- Introduced PageContainer and PageHeader components for consistent layout. - Added SearchBar and FilterBar components for improved task filtering and searching. - Implemented LoadingState component for better loading indication. - Updated ProjectTasksPage to utilize new components and enhance user experience. - Refactored TaskTemplatesPage to use PageContainer and PageHeader for better structure. - Created FilterBar component to manage filter options dynamically. - Added SearchBar component for searching tasks with clear functionality. - Introduced States component for loading and error states.
This commit is contained in:
Chop
30
src/components/ui/FilterBar.js
Normal file
30
src/components/ui/FilterBar.js
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { Select } from "./Input";
|
||||
|
||||
const FilterBar = ({ filters, className = "" }) => {
|
||||
if (!filters || filters.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className={`flex flex-wrap gap-4 ${className}`}>
|
||||
{filters.map((filter, index) => (
|
||||
<div key={index} className="min-w-0 flex-shrink-0">
|
||||
<Select
|
||||
label={filter.label}
|
||||
value={filter.value}
|
||||
onChange={filter.onChange}
|
||||
className="min-w-[150px]"
|
||||
>
|
||||
{filter.options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterBar;
|
||||
11
src/components/ui/PageContainer.js
Normal file
11
src/components/ui/PageContainer.js
Normal file
@@ -0,0 +1,11 @@
|
||||
"use client";
|
||||
|
||||
const PageContainer = ({ children, className = "" }) => {
|
||||
return (
|
||||
<div className={`min-h-screen bg-gray-50 ${className}`}>
|
||||
<div className="max-w-6xl mx-auto p-6">{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageContainer;
|
||||
15
src/components/ui/PageHeader.js
Normal file
15
src/components/ui/PageHeader.js
Normal file
@@ -0,0 +1,15 @@
|
||||
"use client";
|
||||
|
||||
const PageHeader = ({ title, description, children, className = "" }) => {
|
||||
return (
|
||||
<div className={`flex justify-between items-start mb-8 ${className}`}>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold text-gray-900">{title}</h1>
|
||||
{description && <p className="text-gray-600 mt-1">{description}</p>}
|
||||
</div>
|
||||
{children && <div className="ml-6 flex-shrink-0">{children}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageHeader;
|
||||
86
src/components/ui/SearchBar.js
Normal file
86
src/components/ui/SearchBar.js
Normal file
@@ -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 (
|
||||
<div
|
||||
className={`bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6 ${className}`}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
value={searchTerm}
|
||||
onChange={onSearchChange}
|
||||
className="pl-10 pr-10 w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={
|
||||
onClear || (() => onSearchChange({ target: { value: "" } }))
|
||||
}
|
||||
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
||||
>
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{filters}
|
||||
</div>
|
||||
|
||||
{searchTerm && resultsCount !== null && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-100">
|
||||
<p className="text-sm text-gray-600">
|
||||
Found{" "}
|
||||
<span className="font-medium text-gray-900">{resultsCount}</span>{" "}
|
||||
{resultsText} matching
|
||||
<span className="font-medium text-blue-600">
|
||||
{" "}
|
||||
"{searchTerm}"
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
113
src/components/ui/States.js
Normal file
113
src/components/ui/States.js
Normal file
@@ -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 (
|
||||
<div className="flex items-center justify-center">
|
||||
<div
|
||||
className={`${sizeClasses[size]} animate-spin rounded-full border-2 border-gray-300 border-t-blue-600`}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LoadingState = ({ message = "Loading...", className = "" }) => {
|
||||
return (
|
||||
<div className={`flex items-center justify-center py-12 ${className}`}>
|
||||
<div className="text-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
<p className="text-gray-600 mt-4">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EmptyState = ({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
actionLabel,
|
||||
actionHref,
|
||||
onAction,
|
||||
className = "",
|
||||
}) => {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardContent className="text-center py-12">
|
||||
<div className="text-gray-400 mb-4">
|
||||
{icon || (
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">{title}</h3>
|
||||
{description && <p className="text-gray-500 mb-6">{description}</p>}
|
||||
{actionLabel && (actionHref || onAction) && (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onAction}
|
||||
as={actionHref ? "a" : "button"}
|
||||
href={actionHref}
|
||||
>
|
||||
{actionLabel}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const ErrorState = ({
|
||||
title = "Something went wrong",
|
||||
description = "We encountered an error. Please try again.",
|
||||
onRetry,
|
||||
className = "",
|
||||
}) => {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardContent className="text-center py-12">
|
||||
<div className="text-red-400 mb-4">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">{title}</h3>
|
||||
<p className="text-gray-500 mb-6">{description}</p>
|
||||
{onRetry && (
|
||||
<Button variant="primary" onClick={onRetry}>
|
||||
Try Again
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export { LoadingSpinner, LoadingState, EmptyState, ErrorState };
|
||||
Reference in New Issue
Block a user