Add styled Rotate component and update icons and input field in Messa…

…ges page.
jitunayak · Aug 26, 2024 · a6dfb21 · a6dfb21
1 parent 0b5ef64
commit a6dfb21
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
@@ -2,7 +2,7 @@ import { Row } from '@/components';
 import { Button } from '@/components/Button';
 import { socket } from '@/socket';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
-import { SendIcon } from 'lucide-react';
+import { PowerIcon, PowerOffIcon, SendIcon } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
 type IMessage = { message: string; user: string };
@@ -38,10 +38,16 @@ export const Messages: React.FC = () => {
   return (
     <div style={{ width: '40rem' }}>
       <h2>Welcome {user?.given_name ?? 'Guest'}</h2>
-      <div>
-        <p>Is connected: {isConnected ? 'Yes' : 'No'}</p>
+      <div
+        style={{ alignItems: 'center', display: 'inline-flex', gap: '1rem' }}
+      >
+        {isConnected ? (
+          <PowerIcon color="green" size={18} />
+        ) : (
+          <PowerOffIcon color="red" size={18} />
+        )}
+        <p>Socket connected: {isConnected ? 'Yes' : 'No'}</p>
       </div>
-
       <div
         style={{
           border: '1px solid #0101',
@@ -96,7 +102,7 @@ export const Messages: React.FC = () => {
           style={{
             backgroundColor: '#0101',
             border: '1px solid #0101',
-            borderRadius: '12spx',
+            borderRadius: '12px',
             fontSize: '18px',
             opacity: '0.8',
             padding: '14px',