componenets standardization 1
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,6 +1,8 @@
|
||||
import React, { useState } from "react";
|
||||
import { PlusIcon, HorizontaLDots } from "../../icons";
|
||||
import { PlusIcon, HorizontaLDots, FilterIcon } from "../../icons";
|
||||
import RelationshipMap from "./RelationshipMap";
|
||||
import Button from "../ui/button/Button";
|
||||
import IconButton from "../ui/button/IconButton";
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
@@ -103,13 +105,12 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({
|
||||
<div className="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
|
||||
<div className="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
|
||||
<div className="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("All")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "All"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "All" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
All Tasks
|
||||
<span
|
||||
@@ -121,15 +122,14 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({
|
||||
>
|
||||
{tasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("Todo")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "Todo"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "Todo" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
To do
|
||||
<span
|
||||
@@ -141,15 +141,14 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({
|
||||
>
|
||||
{todoTasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("InProgress")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "InProgress"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "InProgress" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
In Progress
|
||||
<span
|
||||
@@ -161,15 +160,14 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({
|
||||
>
|
||||
{inProgressTasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("Completed")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "Completed"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "Completed" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
Completed
|
||||
<span
|
||||
@@ -181,24 +179,28 @@ const KanbanBoard: React.FC<KanbanBoardProps> = ({
|
||||
>
|
||||
{completedTasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 xl:justify-end">
|
||||
<button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
|
||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
|
||||
</svg>
|
||||
<Button
|
||||
variant="outline"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
startIcon={<FilterIcon className="fill-current" />}
|
||||
>
|
||||
Filter & Sort
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
size="sm"
|
||||
onClick={onAddTask}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
|
||||
endIcon={<PlusIcon className="fill-current" />}
|
||||
>
|
||||
Add New Task
|
||||
<PlusIcon className="fill-current" width={20} height={20} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -324,12 +326,14 @@ const KanbanColumn: React.FC<KanbanColumnProps> = ({
|
||||
</h3>
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
<IconButton
|
||||
icon={<HorizontaLDots className="fill-current" />}
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
title="More options"
|
||||
onClick={() => onDropdownToggle(status)}
|
||||
className="text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<HorizontaLDots className="fill-current" width={24} height={24} />
|
||||
</button>
|
||||
/>
|
||||
{openDropdown && (
|
||||
<>
|
||||
<div
|
||||
@@ -337,15 +341,15 @@ const KanbanColumn: React.FC<KanbanColumnProps> = ({
|
||||
onClick={() => onDropdownClose(status)}
|
||||
/>
|
||||
<div className="shadow-theme-md dark:bg-gray-dark absolute top-full right-0 z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800">
|
||||
<button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
||||
<Button variant="ghost" tone="neutral" size="xs" fullWidth className="justify-start">
|
||||
Edit
|
||||
</button>
|
||||
<button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
||||
</Button>
|
||||
<Button variant="ghost" tone="neutral" size="xs" fullWidth className="justify-start">
|
||||
Delete
|
||||
</button>
|
||||
<button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
||||
</Button>
|
||||
<Button variant="ghost" tone="neutral" size="xs" fullWidth className="justify-start">
|
||||
Clear All
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { ArrowRightIcon } from "../../icons";
|
||||
import Button from "../ui/button/Button";
|
||||
|
||||
export interface RelationshipData {
|
||||
taskId: number;
|
||||
@@ -43,13 +44,15 @@ const RelationshipMap: React.FC<RelationshipMapProps> = ({
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{task.keywordNames?.slice(0, 3).map((keyword, idx) => (
|
||||
<button
|
||||
<Button
|
||||
key={idx}
|
||||
onClick={() => onNavigate?.("keyword", task.keywordIds![idx])}
|
||||
className="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="xs"
|
||||
>
|
||||
{keyword}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
{task.keywordIds.length > 3 && (
|
||||
<span className="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import { PlusIcon, HorizontaLDots } from "../../icons";
|
||||
import { PlusIcon, HorizontaLDots, FilterIcon } from "../../icons";
|
||||
import { Task } from "./KanbanBoard";
|
||||
import Button from "../ui/button/Button";
|
||||
import IconButton from "../ui/button/IconButton";
|
||||
import Checkbox from "../form/input/Checkbox";
|
||||
|
||||
interface TaskListProps {
|
||||
tasks: Task[];
|
||||
@@ -66,13 +69,12 @@ const TaskList: React.FC<TaskListProps> = ({
|
||||
<div className="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
|
||||
<div className="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
|
||||
<div className="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("All")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "All"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "All" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
All Tasks
|
||||
<span
|
||||
@@ -84,15 +86,14 @@ const TaskList: React.FC<TaskListProps> = ({
|
||||
>
|
||||
{tasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("Todo")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "Todo"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "Todo" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
To do
|
||||
<span
|
||||
@@ -104,15 +105,14 @@ const TaskList: React.FC<TaskListProps> = ({
|
||||
>
|
||||
{todoTasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("InProgress")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "InProgress"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "InProgress" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
In Progress
|
||||
<span
|
||||
@@ -124,15 +124,14 @@ const TaskList: React.FC<TaskListProps> = ({
|
||||
>
|
||||
{inProgressTasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange("Completed")}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
|
||||
selectedFilter === "Completed"
|
||||
? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400"
|
||||
}`}
|
||||
className={`group ${selectedFilter === "Completed" ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white" : ""}`}
|
||||
>
|
||||
Completed
|
||||
<span
|
||||
@@ -144,24 +143,28 @@ const TaskList: React.FC<TaskListProps> = ({
|
||||
>
|
||||
{completedTasks.length}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 xl:justify-end">
|
||||
<button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
|
||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
|
||||
</svg>
|
||||
<Button
|
||||
variant="outline"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
startIcon={<FilterIcon className="fill-current" />}
|
||||
>
|
||||
Filter & Sort
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
size="sm"
|
||||
onClick={onAddTask}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
|
||||
endIcon={<PlusIcon className="fill-current" />}
|
||||
>
|
||||
Add New Task
|
||||
<PlusIcon className="fill-current" width={20} height={20} />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -257,12 +260,14 @@ const TaskListSection: React.FC<TaskListSectionProps> = ({
|
||||
</h3>
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
<IconButton
|
||||
icon={<HorizontaLDots className="fill-current" />}
|
||||
variant="ghost"
|
||||
tone="neutral"
|
||||
size="sm"
|
||||
title="More options"
|
||||
onClick={() => onDropdownToggle(title.toLowerCase().replace(" ", "_"))}
|
||||
className="text-gray-700 dark:text-gray-400"
|
||||
>
|
||||
<HorizontaLDots className="fill-current" width={24} height={24} />
|
||||
</button>
|
||||
/>
|
||||
{openDropdown && (
|
||||
<>
|
||||
<div
|
||||
@@ -270,15 +275,15 @@ const TaskListSection: React.FC<TaskListSectionProps> = ({
|
||||
onClick={() => onDropdownClose(title.toLowerCase().replace(" ", "_"))}
|
||||
/>
|
||||
<div className="absolute right-0 top-full z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-md dark:border-gray-800 dark:bg-gray-dark">
|
||||
<button className="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
||||
<Button variant="ghost" tone="neutral" size="xs" fullWidth className="justify-start">
|
||||
Edit
|
||||
</button>
|
||||
<button className="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
||||
</Button>
|
||||
<Button variant="ghost" tone="neutral" size="xs" fullWidth className="justify-start">
|
||||
Delete
|
||||
</button>
|
||||
<button className="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
||||
</Button>
|
||||
<Button variant="ghost" tone="neutral" size="xs" fullWidth className="justify-start">
|
||||
Clear All
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -334,27 +339,18 @@ const TaskListItem: React.FC<TaskListItemProps> = ({ task, checked, onClick, onC
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<label htmlFor={`taskCheckbox-${task.id}`} className="w-full cursor-pointer">
|
||||
<div className="relative flex items-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
<div className="w-full flex items-start">
|
||||
<div className="mr-3">
|
||||
<Checkbox
|
||||
id={`taskCheckbox-${task.id}`}
|
||||
className="sr-only taskCheckbox"
|
||||
checked={checked}
|
||||
onChange={(e) => onCheckboxChange(e.target.checked)}
|
||||
onChange={onCheckboxChange}
|
||||
/>
|
||||
<div className={`flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700 ${checked ? "bg-brand-500 border-brand-500" : ""}`}>
|
||||
<span className={checked ? "opacity-100" : "opacity-0"}>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<p className="-mt-0.5 text-base text-gray-800 dark:text-white/90" onClick={onClick}>
|
||||
{task.title}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
<p className="-mt-0.5 text-base text-gray-800 dark:text-white/90 cursor-pointer" onClick={onClick}>
|
||||
{task.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
|
||||
|
||||
Reference in New Issue
Block a user