76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { SceneCard } from 'avanza-ui'
|
|
|
|
const scenes = [
|
|
{ id: 1, name: 'Escena Principal', layout: '👤' },
|
|
{ id: 2, name: 'Presentación', layout: '👥' },
|
|
{ id: 3, name: 'Pantalla Compartida', layout: '🖥️' }
|
|
]
|
|
|
|
const Sidebar: React.FC = () => {
|
|
const [activeScene, setActiveScene] = useState(1)
|
|
|
|
return (
|
|
<div>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: '16px',
|
|
paddingBottom: '12px',
|
|
borderBottom: '1px solid var(--au-border-dark)'
|
|
}}>
|
|
<h2 style={{
|
|
fontSize: '14px',
|
|
fontWeight: '700',
|
|
color: 'var(--au-text-primary)',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px'
|
|
}}>
|
|
Escenas
|
|
</h2>
|
|
<button style={{
|
|
width: '24px',
|
|
height: '24px',
|
|
borderRadius: 'var(--au-radius-sm)',
|
|
border: '1px solid var(--au-border-dark)',
|
|
background: 'var(--au-gray-700)',
|
|
color: 'var(--au-text-primary)',
|
|
cursor: 'pointer',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '16px',
|
|
transition: 'all 0.2s ease'
|
|
}}>
|
|
+
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
{scenes.map(scene => (
|
|
<SceneCard
|
|
key={scene.id}
|
|
title={scene.name}
|
|
active={activeScene === scene.id}
|
|
onClick={() => setActiveScene(scene.id)}
|
|
preview={
|
|
<div style={{
|
|
fontSize: '32px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}>
|
|
{scene.layout}
|
|
</div>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|
|
|