From 43f6fb03fe1118bb5a9dd926d8a2d0460659adf6 Mon Sep 17 00:00:00 2001
From: egutierrez <egutierrez@dead.dd>
Date: Mon, 16 Jun 2025 22:12:28 +0200
Subject: [PATCH] feat: Refactor CamaraNoir component layout and update content
 for live streaming

---
 .../src/domains/CamaraNoir/Camaras_noir.tsx   | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/domains/CamaraNoir/Camaras_noir.tsx b/frontend/src/domains/CamaraNoir/Camaras_noir.tsx
index 776f5b6..0a8502d 100644
--- a/frontend/src/domains/CamaraNoir/Camaras_noir.tsx
+++ b/frontend/src/domains/CamaraNoir/Camaras_noir.tsx
@@ -1,5 +1,5 @@
 import { AppShellWithMenu } from '../FitzStudio/Appshell/Appshell';
-import { Card, Text, Center, Container } from '@mantine/core';
+import { Card, Text, Container } from '@mantine/core';
 
 export function Camara_noir() {
   return (
@@ -8,16 +8,29 @@ export function Camara_noir() {
         size="lg"
         style={{
           display: 'flex',
+          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
+          gap: 16,
         }}
       >
         <Card shadow="sm" padding="xl" radius="md" withBorder>
-          <Text size="lg">
-            Aquí irá la cámara Noir
+          <Text size="lg" mb="md">
+            Cámara Noir en Vivo
           </Text>
-          <Text size="sm" color="dimmed">
-            Este espacio está reservado para la funcionalidad de la cámara Noir.
+          <img
+            src="http://10.8.0.9:8000/video"
+            alt="Stream MJPEG en vivo desde Raspberry Pi"
+            style={{
+              width: '640px',
+              height: '480px',
+              borderRadius: '8px',
+              border: '1px solid #ccc',
+              objectFit: 'cover',
+            }}
+          />
+          <Text size="sm" color="dimmed" mt="sm">
+            Transmisión MJPEG en vivo vía FastAPI / libcamera-vid
           </Text>
         </Card>
       </Container>