Projeto 08 - Mini Design System 🎨
Objetivo: Praticar a estilização de componentes, o isolamento de CSS e o uso de classes condicionais.
🚀 Desafio
Crie um "Mini Design System" composto por botões e alertas reutilizáveis:
1. Botão Estilizado:
- Crie um componente Button.svelte que receba uma prop tipo (primario, secundario, perigo).
- Use class:nomeClasse={condicao} para mudar a cor do botão baseado no tipo.
2. Alerta Dinâmico:
- Crie um componente Alerta.svelte que tenha um <slot> para a mensagem.
- Adicione uma animação de "fade-in" quando o alerta aparecer.
3. Página de Demonstração:
- No App.svelte, coloque várias instâncias dos botões e alertas para demonstrar as variações de cores e estilos.
📤 O que entregar?
- Pasta
src/libcom os componentes de estilo. - Screenshot da página de demonstração mostrando as cores diferentes dos botões.