finish v0.1"

src/components/Button.js

@@ -3,8 +3,17 @@ import { classNames } from "../utilities/classNames"
 export const Button = ({ children, className = "", type = "text", ...props }) => {
 
   return (
-    <button type={type} className={classNames("border px-2 py-1 shadow rounded", className)} {...props}>
+    <button type={type} className={classNames("border px-2 py-1 shadow transition-all duration-300 rounded", className)} {...props}>
       {children}
     </button>
   )
 }
+
+export const SmallButton =  ({ children, className = "", type = "button", ...props }) => {
+
+  return (
+      <button type={type} className={classNames("border border-white flex items-center justify-center w-6 h-6 shadow transition-all duration-300 rounded-full cursor-pointer", className)} {...props}>
+        {children}
+      </button>
+  )
+}

src/components/SVG.js

@@ -0,0 +1,23 @@
+
+const SVGSkeleton = ({paths, viewBox = "0 0 512 512", ...props}) => {
+    return <svg xmlns="http://www.w3.org/2000/svg"
+                viewBox={viewBox}
+                fill="currentColor"
+                className={props.className ?? ''}
+                {...props}>
+        {props.title && <title>{ props.title }</title>}
+        {paths}
+    </svg>
+}
+
+export const PlusSVG = (props) => SVGSkeleton({
+    viewBox: "0 0 448 512",
+    paths: <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />,
+    ...props
+})
+
+export const EditSVG = (props) => SVGSkeleton({
+    viewBox: "0 0 576 512",
+    paths: <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />,
+    ...props
+})

src/components/Tasks.js

@@ -17,10 +17,10 @@ export const Tasks = () => {
     return <div className="mb-5">
         <h1>Tasks</h1>
         <div>
-            {plants.map(plant => plant.actions.filter(action => taskIsRequired(action)).map(action => <div className="flex items-center gap-2">
+            {plants.map(plant => plant.actions.filter(action => taskIsRequired(action)).map(action => <div className="flex items-center gap-2 my-2">
+                <span><Button className="bg-blue-500 hover:bg-blue-700" onClick={() => doneTask(action.id)}>Done</Button></span>
                 <span className="capitalize"><b>{plant.name}</b> {action.action_type}</span>
-                <span> every {action.frequency} days {action.id}</span>
-                <span><Button onClick={() => doneTask(action.id)}>Done</Button></span>
+                <span> every {action.frequency} days</span>
             </div>))}
         </div>
     </div>