WIP

src/components/chat/Message.tsx

@@ -7,6 +7,7 @@ export interface MessageProps {
   ack: boolean;
   isSender: boolean;
   rxTime: Date;
+  senderName: string;
 }
 
 export const Message = ({
@@ -14,6 +15,7 @@ export const Message = ({
   ack,
   isSender,
   rxTime,
+  senderName,
 }: MessageProps): JSX.Element => {
   return (
     <div
@@ -27,16 +29,19 @@ export const Message = ({
           colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
         />
       </div>
-      <div
-        className={`relative max-w-3/4 px-3 py-2 rounded-t-lg mb-2 ${
-          isSender
-            ? 'bg-gray-500 text-gray-50 rounded-br-lg'
-            : 'bg-primary text-blue-50 rounded-bl-lg'
-        } ${ack ? 'animate-none' : 'animate-pulse'}`}
-      >
-        <div className="min-w-4 leading-5">{message}</div>
+      <div>
+        <div
+          className={`relative max-w-3/4 px-3 py-2 rounded-t-lg ${
+            isSender
+              ? 'bg-gray-500 text-gray-50 rounded-br-lg'
+              : 'bg-primary text-blue-50 rounded-bl-lg'
+          } ${ack ? 'animate-none' : 'animate-pulse'}`}
+        >
+          <div className="min-w-4 leading-5">{message}</div>
+        </div>
+        <div className="text-xs text-gray-600">{senderName}</div>
       </div>
-      <div className="mt-auto mb-2 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
+      <div className="mt-auto mb-4 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
         {rxTime.getHours()}:{rxTime.getMinutes()}
       </div>
     </div>

src/components/form/Input.tsx

@@ -8,6 +8,8 @@ export interface InputProps {
   type: string;
   name: string;
   value?: string;
+  disabled?: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Input = ({
@@ -18,6 +20,8 @@ export const Input = ({
   type,
   name,
   value,
+  disabled,
+  onChange,
 }: InputProps): JSX.Element => {
   return (
     <div className="space-y-1">
@@ -40,10 +44,12 @@ export const Input = ({
           name={name}
           id={name}
           value={value}
+          onChange={onChange}
           className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
             icon ? 'pl-9' : 'pl-2'
           }`}
           placeholder={placeholder}
+          disabled={disabled}
         />
       </div>
       {!valid && (

src/components/form/Toggle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Switch } from '@headlessui/react';
+
+export interface ToggleProps {
+  enabled: boolean;
+  setEnabled: (state: boolean) => void;
+}
+
+export const Toggle = ({ enabled, setEnabled }: ToggleProps): JSX.Element => {
+  return (
+    <Switch
+      checked={enabled}
+      onChange={setEnabled}
+      className={`${enabled ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-700'}
+          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+    >
+      <span className="sr-only">Use setting</span>
+      <span
+        aria-hidden="true"
+        className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
+            pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
+      />
+    </Switch>
+  );
+};