Add search bar component to the log table page

front/.eslintrc.json

@@ -12,6 +12,6 @@
       { "max": 75, "skipBlankLines": true, "skipComments": true }
     ],
     "complexity": ["error", 6],
-    "prettier/prettier": ["error", { "tabWidth": 4 }]
+    "prettier/prettier": ["error", {"tabWidth": 4}]
   }
 }

front/src/app/EmptyLogs.tsx

@@ -1,4 +1,4 @@
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { CardAtom } from "@/atomic/atoms";
 import Link from "next/link";
 
 export default function EmptyLogs() {

front/src/app/LogsTable.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { CardAtom, SearchIcon, TextInput } from "@/atomic/atoms";
 import { llm_logs } from "@prisma/client";
 import { useRouter } from "next/navigation";
 
@@ -11,6 +11,7 @@ export default function LogsTable({ logs }: Props) {
 
     return (
         <CardAtom>
+            <TextInput placeholder="Search" icon={<SearchIcon />} />
             <table className="table-fixed w-full">
                 <thead>
                     <tr className="bg-gray-100">

front/src/app/loading.tsx

@@ -1,5 +1,4 @@
-import { AnimatedPulseAtom } from "@/atomic/atoms/AnimatedPulseAtom";
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { AnimatedPulseAtom, CardAtom } from "@/atomic/atoms";
 
 export default function Loading() {
     return (

front/src/app/logs/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { CardAtom } from "@/atomic/atoms";
 import { LogsData } from "@/data/LogsData";
 
 export default async function LogDetails({

front/src/atomic/atoms/CardAtom.tsx

@@ -1,6 +1,6 @@
 export const CardAtom = ({ children }: { children: React.ReactNode }) => {
     return (
-        <div className="border bg-white shadow rounded-md p-4 w-full mx-auto">
+        <div className="border bg-white shadow rounded-md p-4 w-full mx-auto flex flex-col gap-4">
             {children}
         </div>
     );

front/src/atomic/atoms/SearchIcon.tsx

@@ -0,0 +1,14 @@
+export const SearchIcon = () => {
+    return (
+        <svg
+            className="text-gray-600 h-4 w-4 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            id="search_icon"
+            viewBox="0 0 56.966 56.966"
+            width="512px"
+            height="512px"
+        >
+            <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
+        </svg>
+    );
+};

front/src/atomic/atoms/TextInput.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const TextInput = ({
+    placeholder = "",
+    icon = "",
+}: {
+    placeholder: string;
+    icon: React.ReactNode;
+}) => {
+    return (
+        <div className="relative">
+            <input
+                type="text"
+                className="w-full border-2 border-gray-300 bg-white h-10 px-4 pr-16 rounded-lg focus:border-theodo-blue focus:outline-none"
+                placeholder={placeholder}
+            />
+            <div className="absolute right-0 top-0 py-3 px-3">{icon}</div>
+        </div>
+    );
+};

front/src/atomic/atoms/index.ts

@@ -0,0 +1,6 @@
+export * from "./CardAtom";
+export * from "./AnimatedPulseAtom";
+export * from "./OmnilogLogo";
+export * from "./TheodoLogo";
+export * from "./TextInput";
+export * from "./SearchIcon";

front/src/atomic/molecules/Scaffold.tsx

@@ -1,5 +1,4 @@
-import { OmnilogLogo } from "../atoms/OmnilogLogo";
-import { TheodoLogo } from "../atoms/TheodoLogo";
+import { OmnilogLogo, TheodoLogo } from "../atoms";
 
 export const Scaffold = ({ children }: { children: React.ReactNode }) => {
     return (

front/tailwind.config.ts

@@ -12,6 +12,15 @@ const config: Config = {
                 "gradient-conic":
                     "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
             },
+            colors: {
+                "theodo-green": "#6CBC9C",
+                "theodo-dark-green": "#374B42",
+                "theodo-grey": "#9AB0A6",
+                "theodo-sharp-blue": "#0062AD",
+                "theodo-light-blue": "#6CB4E6",
+                "theodo-turquoise": "#009DAC",
+                "theodo-blue": "#2D7FAE",
+            }
         },
     },
     plugins: [],