feat(web): Implement basic page

Author: MiladSadeghi

web/src/App.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes, useLocation } from 'react-router';
 import MainLayout from '@/components/layouts/main-layout/main-layout';
 import TerraformTemplate from '@/pages/terraform-template/components/layout';
-import { Argocd, Docker, EC2, IAM, Installation, S3 } from './pages';
+import { Argocd, Basic, Docker, EC2, IAM, Installation, S3 } from '@/pages';
 
 function App() {
   const location = useLocation();
@@ -10,6 +10,7 @@ function App() {
       <div className="container mx-auto border-l border-r border-gray-700 h-dvh max-w-7xl">
         <Routes location={location}>
           <Route element={<MainLayout />}>
+            <Route index element={<Basic />} />
             <Route path="terraform-template" element={<TerraformTemplate />}>
               <Route path="docker" element={<Docker />} />
               <Route path="ec2" element={<EC2 />} />

web/src/pages/basic/basic.tsx

@@ -0,0 +1,97 @@
+import { FC } from 'react';
+import { Send } from 'lucide-react';
+
+const Basic: FC = () => {
+  return (
+    <div className="flex items-center justify-center w-full h-full">
+      <div className="w-full max-w-[768px]">
+        <div className="w-full p-2 rounded-md">
+          <div className="flex items-center justify-center w-full h-full gap-3">
+            <div className="flex flex-col w-full">
+              <label htmlFor="min_token" className="mb-2">
+                Min Token
+              </label>
+              <input
+                id="min_token"
+                className="w-full p-3 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col w-full">
+              <label htmlFor="min_token" className="mb-2">
+                Max Token
+              </label>
+              <input
+                id="min_token"
+                className="w-full p-3 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col w-full">
+              <label htmlFor="min_token" className="mb-2">
+                Service
+              </label>
+              <input
+                id="min_token"
+                className="w-full p-3 rounded-md outline-none"
+              />
+            </div>
+          </div>
+          <div className="mt-4">
+            <div className="w-full p-3 overflow-y-auto rounded-md scrollbar-corner-transparent scrollbar-thin scrollbar-track-transparent h-96 bg-slate-900">
+              <div className="max-w-full chat chat-end">
+                <div className="text-white bg-gray-600 chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-start">
+                <div className="text-white chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-end">
+                <div className="text-white bg-gray-600 chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-start">
+                <div className="text-white chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-end">
+                <div className="text-white bg-gray-600 chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-start">
+                <div className="text-white chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-end">
+                <div className="text-white bg-gray-600 chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+              <div className="max-w-full chat chat-start">
+                <div className="text-white chat-bubble">
+                  You underestimate my power!
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="relative mt-4">
+            <textarea
+              className="w-full p-4 pr-16 rounded-md outline-none resize-none"
+              rows={2}
+            />
+            <button className="absolute flex items-center justify-center p-2 bg-white rounded-full right-3 top-5">
+              <Send className="size-6 stroke-[#121212]" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Basic;

web/src/pages/index.ts

@@ -4,5 +4,6 @@ import EC2 from './terraform-template/EC2/ec2';
 import IAM from './terraform-template/IAM/iam';
 import S3 from './terraform-template/S3/s3';
 import Installation from './installation/installation';
+import Basic from './basic/basic';
 
-export { Argocd, Docker, EC2, IAM, S3, Installation };
+export { Argocd, Docker, EC2, IAM, S3, Installation, Basic };

web/tailwind.config.js

@@ -16,6 +16,6 @@ export default {
       }
     }
   },
-  plugins: [require("tailwindcss-animate"), require('daisyui')],
+  plugins: [require("tailwind-scrollbar"), require('daisyui')],
 }