access logs + audio

src/components/StatusCircle.tsx

@@ -2,13 +2,40 @@ import { FC } from 'react'
 
 type Props = {
     color: string
+    text?: string
+    size?: 'sm' | 'md' | 'lg'
 }
 
-const StatusCircle: FC<Props> = (props: Props) => {
-    return (
-        <div style={{ background: props.color }} className='size-1.5 rounded-full'>
+const StatusCircle: FC<Props> = ({ color, text, size = 'md' }) => {
+    const sizeClasses = {
+        sm: 'size-2',
+        md: 'size-3',
+        lg: 'size-4'
+    }
 
-        </div>
+    const colorClasses = {
+        green: 'bg-green-500',
+        blue: 'bg-blue-500',
+        red: 'bg-red-500',
+        gray: 'bg-gray-500',
+        purple: 'bg-purple-500',
+        orange: 'bg-orange-500',
+        yellow: 'bg-yellow-500'
+    }
+
+    if (text) {
+        return (
+            <div className="flex items-center gap-2">
+                <div className={`${sizeClasses[size]} ${colorClasses[color as keyof typeof colorClasses] || 'bg-gray-500'} rounded-full`} />
+                <span className="text-sm font-medium">{text}</span>
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className={`${sizeClasses[size]} rounded-full ${colorClasses[color as keyof typeof colorClasses] || 'bg-gray-500'}`}
+        />
     )
 }