Rafael Lopes
8e29dde2a1
- Telas iniciais do projeto criadas - Estrutura de pastas e arquivos definida - Componentes instalados e linguagem definida - Vite configurado para React e build de dev rapida - Mockups de dados criados para desenvolvimento dos módulos - Documentação inicial criada para guiar o desenvolvimento e uso do projeto
115 lines
3.0 KiB
JavaScript
115 lines
3.0 KiB
JavaScript
function ControlIcon({ id }) {
|
|
const commonProps = {
|
|
width: 22,
|
|
height: 22,
|
|
viewBox: '0 0 24 24',
|
|
fill: 'none',
|
|
stroke: 'currentColor',
|
|
strokeWidth: 1.8,
|
|
strokeLinecap: 'round',
|
|
strokeLinejoin: 'round',
|
|
};
|
|
|
|
if (id === 'mute') {
|
|
return (
|
|
<svg {...commonProps}>
|
|
<path d="M11 5a2 2 0 0 1 4 0v5a2 2 0 0 1-4 0z" />
|
|
<path d="M19 10a7 7 0 0 1-.6 2.8" />
|
|
<path d="M5.6 5.6 18.4 18.4" />
|
|
<path d="M9 10a3 3 0 0 0 4.7 2.5" />
|
|
<path d="M12 19v3" />
|
|
<path d="M8 22h8" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (id === 'keypad') {
|
|
return (
|
|
<svg {...commonProps}>
|
|
<rect x="4" y="4" width="4" height="4" rx="1" />
|
|
<rect x="10" y="4" width="4" height="4" rx="1" />
|
|
<rect x="16" y="4" width="4" height="4" rx="1" />
|
|
<rect x="4" y="10" width="4" height="4" rx="1" />
|
|
<rect x="10" y="10" width="4" height="4" rx="1" />
|
|
<rect x="16" y="10" width="4" height="4" rx="1" />
|
|
<rect x="4" y="16" width="4" height="4" rx="1" />
|
|
<rect x="10" y="16" width="4" height="4" rx="1" />
|
|
<rect x="16" y="16" width="4" height="4" rx="1" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (id === 'speaker') {
|
|
return (
|
|
<svg {...commonProps}>
|
|
<path d="M5 9v6h4l5 4V5l-5 4z" />
|
|
<path d="M18 9a4 4 0 0 1 0 6" />
|
|
<path d="M20.5 6.5a7.5 7.5 0 0 1 0 11" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<svg {...commonProps}>
|
|
<path d="M16 3h5v5" />
|
|
<path d="M21 3l-7 7" />
|
|
<path d="M8 7H3v5" />
|
|
<path d="M3 12l7-7" />
|
|
<path d="M16 21h5v-5" />
|
|
<path d="M21 21l-7-7" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CallControls({ controls, isMobile = false }) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: isMobile
|
|
? 'repeat(2, minmax(0, 1fr))'
|
|
: 'repeat(4, minmax(120px, 1fr))',
|
|
gap: '1rem',
|
|
}}
|
|
>
|
|
{controls.map((control) => (
|
|
<button
|
|
key={control.id}
|
|
type="button"
|
|
style={{
|
|
border: '1px solid rgba(255, 255, 255, 0.12)',
|
|
borderRadius: '24px',
|
|
padding: '1rem',
|
|
background: 'rgba(255, 255, 255, 0.06)',
|
|
color: '#fff',
|
|
display: 'grid',
|
|
gap: '0.35rem',
|
|
justifyItems: 'start',
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
style={{
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: '16px',
|
|
background: 'rgba(255, 255, 255, 0.1)',
|
|
display: 'grid',
|
|
placeItems: 'center',
|
|
fontWeight: 800,
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
<ControlIcon id={control.id} />
|
|
</span>
|
|
<strong>{control.label}</strong>
|
|
<span style={{ color: 'rgba(255, 255, 255, 0.66)', fontSize: '0.9rem' }}>
|
|
{control.hint}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|