Components Finetuning

src/Components/AppShell/DialogModal.tsx

@@ -43,7 +43,7 @@ const DialogModal = ({
 
 
   return (
-    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300'
+    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300 tw-p-4'
     
       ref={ref}
       onCancel={onClose}

src/Components/Input/SelectBox.tsx

@@ -0,0 +1,51 @@
+
+import { useState } from 'react'
+import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'
+import * as React from 'react';
+
+type SelectBoxProps = {
+    labelTitle?: string;
+    labelStyle?: string;
+    type?: string;
+    containerStyle?: string;
+    defaultValue: string;
+    placeholder?: string;
+    updateFormValue: (value: string ) => void;
+
+    options: {name: string, value: string}[];
+    labelDescription?: string
+}
+
+export function SelectBox(props : SelectBoxProps){
+    
+    const {labelTitle, labelDescription, defaultValue, containerStyle, placeholder, labelStyle, options, updateFormValue} = props
+
+    const [value, setValue] = useState(defaultValue || "")
+
+
+    const updateValue = (newValue: string) =>{
+        updateFormValue(newValue)
+        setValue(newValue)
+    }
+
+
+    return (
+        <div className={`tw-inline-block ${containerStyle}`}>
+            {labelTitle? 
+            <label  className={`tw-label  ${labelStyle}`}>
+                <div className="tw-label-text">{labelTitle}
+                {labelDescription && <div className="tw-tooltip tw-tooltip-right" data-tip={labelDescription}><InformationCircleIcon className='tw-w-4 tw-h-4'/></div>}
+                </div>
+            </label>
+           : ""}
+            <select className="tw-select tw-select-bordered tw-w-full" value={value} onChange={(e) => updateValue(e.target.value)}>
+                <option disabled value="PLACEHOLDER">{placeholder}</option>
+                {
+                    options.map((o, k) => {
+                        return <option value={o.value || o.name} key={k}>{o.name}</option>
+                    })
+                }
+            </select>
+        </div>
+    )
+}

src/Components/Input/index.tsx

@@ -1,2 +1,3 @@
 export {TextAreaInput} from "./TextAreaInput"
-export {TextInput} from "./TextInput"
+export {TextInput} from "./TextInput"
+export {SelectBox} from "./SelectBox"

src/Components/Templates/CardPage.tsx

@@ -11,7 +11,7 @@ export function CardPage({title,children} : {
 
   return (
     <main className="tw-flex-1 tw-overflow-y-auto tw-overflow-x-hidden tw-pt-2 tw-px-6 tw-bg-base-200 tw-min-w-80 tw-flex tw-justify-center" >
-      <div className='tw-w-full xl:tw-max-w-6xl'>
+      <div className='tw-w-full xl:tw-max-w-6xl '>
         <div className="tw-text-sm tw-breadcrumbs">
           <ul>
             <li><Link to={'/'} >Home</Link></li>

src/Components/Templates/TitleCard.tsx

@@ -6,12 +6,13 @@ interface TitleCardProps {
   title: string,
   children : React.ReactNode,
   topMargin: string,
+  className?: string,
   TopSideButtons?: any
 }
   
-  export function TitleCard({title, children, topMargin, TopSideButtons} : TitleCardProps){
+  export function TitleCard({title, children, topMargin, TopSideButtons, className} : TitleCardProps){
       return(
-          <div className={"tw-card tw-w-full tw-p-6 tw-mb-16 tw-bg-base-100 tw-shadow-xl tw-h-fit " + (topMargin || "tw-mt-6")}>
+          <div className={"tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit " + className + " " + (topMargin || "tw-mt-6")}>
 
             {/* Title for Card */}
               <Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}>

src/index.tsx

@@ -4,7 +4,7 @@ export {AuthProvider, useAuth, LoginPage, SignupPage} from "./Components/Auth"
 export {Settings} from './Components/Profile'
 export {Quests, Modal} from './Components/Gaming'
 export {TitleCard, CardPage} from './Components/Templates'
-export {TextInput, TextAreaInput} from './Components/Input'
+export {TextInput, TextAreaInput, SelectBox} from './Components/Input'
 
 import "./index.css"