Added to do custom input

examples/to-do-example/src/app/components/Cards.tsx

@@ -66,7 +66,6 @@ export function AccordianTriggerContent({
       <div className="flex gap-2">
         <div className="w-6 h-6">{contentVariants.icon}</div>
         <div className="w-11/12">
-          {" "}
           <Header4 variant={"extra-small/medium"}>
             {active
               ? contentVariants.activeHeaderText
@@ -78,7 +77,7 @@ export function AccordianTriggerContent({
         <>
           <div className="flex gap-1 items-center">
             <CheckCircleIcon className="text-green-500 h-3 w-3" />
-            contentVariants.activeBodyReactContent
+            {contentVariants.activeBodyReactContent}
             <Paragraph
               variant="small"
               className="font-bold text-slate-300"
@@ -89,7 +88,9 @@ export function AccordianTriggerContent({
           </div>
         </>
       ) : (
-        <Paragraph variant="small">contentVariants.inactiveBodyText</Paragraph>
+        <Paragraph variant="small">
+          {contentVariants.inactiveBodyText}
+        </Paragraph>
       )}
     </div>
   );

examples/to-do-example/src/app/components/ToDoRow.tsx

@@ -3,21 +3,24 @@ import { CheckCircleIcon, PlusIcon } from "@heroicons/react/24/solid";
 import { Paragraph } from "./Paragraph";
 
 const baseStyle =
-  "flex h-16 w-full rounded-md pl-2 pr-4 transition hover:cursor-pointer";
+  "flex h-16 w-full rounded-md transition hover:cursor-pointer pl-12 font-sans focus:outline-none focus:bg-slate-600 focus:text-slate-200";
 
 const ToDoRowVariants = {
   add: {
-    button: "bg-slate-800 border-slate-500 border-2 hover:border-slate-400 ",
+    button:
+      "bg-slate-800 border-slate-500 border-2 hover:border-slate-400  pr-4 ",
     text: "text-slate-600 italic",
-    icon: <PlusIcon className="text-slate-100" />,
+    icon: (
+      <PlusIcon className="text-slate-200 group-hover:rotate-180 transition duration-500" />
+    ),
   },
   active: {
-    button: "bg-slate-800 text-slate-100",
-    text: "text-slate-400",
+    button: "bg-slate-800",
+    text: "text-slate-200",
     icon: <div className="rounded-full border-2 border-slate-400 h-4 w-4" />,
   },
   completed: {
-    button: "bg-slate-900 text-slate-100",
+    button: "bg-slate-900",
     text: "text-slate-600",
     icon: <CheckCircleIcon className="text-green-500" />,
   },
@@ -31,16 +34,30 @@ type ToDoRowProps = {
 export function ToDoRow({ variant, className }: ToDoRowProps) {
   const Icon = ToDoRowVariants[variant].icon;
   return (
-    <div className={cn(baseStyle, ToDoRowVariants[variant].button, className)}>
-      <div className="flex justify-center items-center gap-2">
-        <div className="w-6 h-6 flex justify-center items-center">{Icon}</div>
-        <Paragraph
-          variant="large"
-          className={cn(ToDoRowVariants[variant].text)}
-        >
-          What do you want to do?
-        </Paragraph>
+    <form method="GET" className="group">
+      <div className="relative text-slate-400 focus-within:text-slate-900 ">
+        <span className="absolute inset-y-0 left-0 flex items-center pl-2">
+          <button
+            type="submit"
+            className="p-1 focus:outline-none focus:shadow-outline"
+          >
+            <div className="w-6 h-6 flex justify-center items-center">
+              {Icon}
+            </div>
+          </button>
+        </span>
+        <input
+          type="text"
+          name="q"
+          placeholder="Search..."
+          className={cn(
+            baseStyle,
+            ToDoRowVariants[variant].button,
+            "text-lg placeholder-slate-600 focus:text-slate-200",
+            className
+          )}
+        />
       </div>
-    </div>
+    </form>
   );
 }

examples/to-do-example/src/app/components/ui/accordion.tsx

@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 place-content-between w-full items-top font-medium transition-all [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 place-content-between w-full items-top font-medium transition-all [&[data-state=open]>svg]:rotate-180 text-slate-400",
         className
       )}
       {...props}

examples/to-do-example/src/app/page.tsx

@@ -3,6 +3,7 @@ import { Header1, Header2 } from "./components/Header";
 import { Paragraph } from "./components/Paragraph";
 import { PrimaryGradientText } from "./components/TextStyling";
 import { ToDoRow } from "./components/ToDoRow";
+// import { ToDoRow } from "./components/ToDoRow";
 
 export default function Home() {
   return (
@@ -29,18 +30,20 @@ export default function Home() {
               trigger.dev/to-do-list-example
             </a>
           </Paragraph>
-          <Paragraph variant="base" removeBottomPadding>
-            View the{" "}
-            <a
-              rel="noopener noreferrer"
-              target="_blank"
-              href=""
-              className="text-indigo-400 hover:underline hover:underline-offset-2 transition"
-            >
-              source code
-            </a>
-            .
-          </Paragraph>
+          <div className="flex gap-x-2">
+            <Paragraph variant="base" removeBottomPadding>
+              View the{" "}
+              <a
+                rel="noopener noreferrer"
+                target="_blank"
+                href=""
+                className="text-indigo-400 hover:underline hover:underline-offset-2 transition"
+              >
+                source code
+              </a>
+              .
+            </Paragraph>
+          </div>
           <Paragraph variant="base" removeBottomPadding>
             View the{" "}
             <a