mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-16 13:27:52 +00:00
First Commit
This commit is contained in:
Lucas Santana
commit
d2b959fe73
3
.bolt/config.json
Normal file
3
.bolt/config.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"template": "bolt-vite-react-ts"
|
||||
}
|
||||
8
.bolt/prompt
Normal file
8
.bolt/prompt
Normal file
@ -0,0 +1,8 @@
|
||||
For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
|
||||
|
||||
By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
|
||||
|
||||
Use icons from lucide-react for logos.
|
||||
|
||||
Use stock photos from unsplash where appropriate, only valid URLs you know exist. Do not download the images, only link to them in image tags.
|
||||
|
||||
108
.cursorrules
Normal file
108
.cursorrules
Normal file
@ -0,0 +1,108 @@
|
||||
{
|
||||
"rules": [
|
||||
{
|
||||
"name": "Padrões de Código",
|
||||
"description": "Regras gerais para manter consistência no código",
|
||||
"patterns": [
|
||||
{
|
||||
"id": "naming-conventions",
|
||||
"pattern": "^[a-z][a-zA-Z0-9]*$",
|
||||
"message": "Use camelCase para nomes de variáveis e funções"
|
||||
},
|
||||
{
|
||||
"id": "component-naming",
|
||||
"pattern": "^[A-Z][a-zA-Z0-9]*$",
|
||||
"message": "Componentes React devem começar com letra maiúscula"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Segurança",
|
||||
"description": "Regras para garantir segurança da aplicação",
|
||||
"patterns": [
|
||||
{
|
||||
"id": "no-sensitive-data",
|
||||
"pattern": "(password|senha|token|key|secret)",
|
||||
"message": "Não exponha dados sensíveis no código"
|
||||
},
|
||||
{
|
||||
"id": "child-safety",
|
||||
"pattern": "(idade|age).*(>12|<6)",
|
||||
"message": "Verifique restrições de idade (6-12 anos)"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Acessibilidade",
|
||||
"description": "Regras para garantir acessibilidade",
|
||||
"patterns": [
|
||||
{
|
||||
"id": "alt-text",
|
||||
"pattern": "<img(?!.*alt=)[^>]*>",
|
||||
"message": "Imagens devem ter texto alternativo (alt)"
|
||||
},
|
||||
{
|
||||
"id": "aria-labels",
|
||||
"pattern": "<button(?!.*aria-label)[^>]*>",
|
||||
"message": "Botões devem ter aria-label quando não têm texto"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Performance",
|
||||
"description": "Regras para otimização de performance",
|
||||
"patterns": [
|
||||
{
|
||||
"id": "large-images",
|
||||
"pattern": "unsplash.com/.*w=(\\d{4,})",
|
||||
"message": "Evite imagens muito grandes (max 1200px)"
|
||||
},
|
||||
{
|
||||
"id": "memo-check",
|
||||
"pattern": "React.memo\\(",
|
||||
"message": "Verifique se o uso de memo é necessário"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Estilo",
|
||||
"description": "Regras de estilo e formatação",
|
||||
"patterns": [
|
||||
{
|
||||
"id": "tailwind-classes",
|
||||
"pattern": "className=\"[^\"]{150,}\"",
|
||||
"message": "Considere extrair classes Tailwind longas para componentes"
|
||||
},
|
||||
{
|
||||
"id": "color-consistency",
|
||||
"pattern": "text-(purple|green|orange|blue|yellow)",
|
||||
"message": "Use cores consistentes com a paleta definida"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Conteúdo",
|
||||
"description": "Regras para conteúdo infantil",
|
||||
"patterns": [
|
||||
{
|
||||
"id": "child-friendly",
|
||||
"pattern": "(violência|morte|guerra|violento)",
|
||||
"message": "Evite conteúdo inadequado para crianças"
|
||||
},
|
||||
{
|
||||
"id": "educational-content",
|
||||
"pattern": "(educativo|educacional|aprendizado|ensino)",
|
||||
"message": "Priorize conteúdo educacional e construtivo"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"ignoreFiles": [
|
||||
"node_modules/**",
|
||||
"dist/**",
|
||||
"build/**",
|
||||
".git/**",
|
||||
"*.test.*",
|
||||
"*.spec.*"
|
||||
]
|
||||
}
|
||||
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
.env
|
||||
.env.local
|
||||
52
README.md
Normal file
52
README.md
Normal file
@ -0,0 +1,52 @@
|
||||
# Histórias Mágicas 🌟
|
||||
|
||||
Uma plataforma educacional interativa que oferece histórias personalizadas para crianças entre 6 e 12 anos, com foco na cultura brasileira e educação.
|
||||
|
||||
## 🎯 Sobre o Projeto
|
||||
|
||||
Histórias Mágicas é uma aplicação web desenvolvida em React que permite que crianças explorem histórias educativas de forma interativa e personalizada. O projeto tem como objetivo:
|
||||
|
||||
- Promover a educação através de narrativas envolventes
|
||||
- Valorizar a diversidade cultural brasileira
|
||||
- Incentivar a consciência ambiental
|
||||
- Oferecer uma experiência de aprendizado segura e divertida
|
||||
|
||||
## ✨ Funcionalidades
|
||||
|
||||
- 📚 Biblioteca de histórias interativas
|
||||
- 👤 Personalização de avatares (culturas baiana e amazônica)
|
||||
- 🎨 Temas educacionais diversos
|
||||
- 🔊 Narração de histórias
|
||||
- 📱 Design responsivo
|
||||
- 🔒 Ambiente seguro e protegido
|
||||
|
||||
## 🛠️ Tecnologias Utilizadas
|
||||
|
||||
- React 18
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Lucide React (ícones)
|
||||
- Vite
|
||||
|
||||
## 🚀 Como Executar
|
||||
|
||||
1. Clone o repositório:
|
||||
|
||||
## 🚀 Deploy
|
||||
|
||||
### Opções Recomendadas
|
||||
|
||||
#### 1. Vercel (Recomendação Principal)
|
||||
- Ideal para aplicações React/Next.js
|
||||
- Deploy automático integrado com GitHub
|
||||
- SSL gratuito
|
||||
- CDN global
|
||||
- Excelente performance
|
||||
- Plano gratuito generoso
|
||||
|
||||
#### 2. Netlify
|
||||
- Também oferece deploy automático
|
||||
- Funções serverless incluídas
|
||||
- SSL gratuito
|
||||
- CDN global
|
||||
- Interface amigável
|
||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
@ -0,0 +1,28 @@
|
||||
import js from '@eslint/js';
|
||||
import globals from 'globals';
|
||||
import reactHooks from 'eslint-plugin-react-hooks';
|
||||
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||
import tseslint from 'typescript-eslint';
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ['dist'] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
'react-hooks': reactHooks,
|
||||
'react-refresh': reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
);
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
4051
package-lock.json
generated
Normal file
4051
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "vite-react-typescript-starter",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.344.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.9.1",
|
||||
"@types/react": "^18.3.5",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"eslint": "^9.9.1",
|
||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.11",
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.35",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.3.0",
|
||||
"vite": "^5.4.2"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
105
src/App.tsx
Normal file
105
src/App.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import React, { useState } from 'react';
|
||||
import { WelcomePage } from './components/WelcomePage';
|
||||
import { LoginForm } from './components/auth/LoginForm';
|
||||
import { RegistrationForm } from './components/RegistrationForm';
|
||||
import { AvatarSelector } from './components/AvatarSelector';
|
||||
import { ThemeSelector } from './components/ThemeSelector';
|
||||
import { StoryViewer } from './components/StoryViewer';
|
||||
import { StoryLibrary } from './components/library/StoryLibrary';
|
||||
import { AuthUser, SavedStory } from './types/auth';
|
||||
import { User, Theme } from './types';
|
||||
import { AuthProvider } from './contexts/AuthContext'
|
||||
|
||||
type AppStep =
|
||||
| 'welcome'
|
||||
| 'login'
|
||||
| 'register'
|
||||
| 'avatar'
|
||||
| 'theme'
|
||||
| 'story'
|
||||
| 'library';
|
||||
|
||||
export function App() {
|
||||
const [step, setStep] = useState<AppStep>('welcome');
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [authUser, setAuthUser] = useState<AuthUser | null>(null);
|
||||
const [selectedTheme, setSelectedTheme] = useState<Theme | null>(null);
|
||||
const [savedStories] = useState<SavedStory[]>([
|
||||
{
|
||||
id: '1',
|
||||
title: 'A Aventura na Floresta Amazônica',
|
||||
theme: 'Natureza e Meio Ambiente',
|
||||
createdAt: '2024-03-15T10:00:00Z',
|
||||
lastReadPage: 2,
|
||||
},
|
||||
]);
|
||||
|
||||
const handleLogin = (email: string, password: string) => {
|
||||
// In production: Implement actual authentication
|
||||
setAuthUser({ id: '1', email, name: 'Usuário' });
|
||||
setStep('library');
|
||||
};
|
||||
|
||||
const handleRegistrationComplete = (userData: User) => {
|
||||
setUser(userData);
|
||||
setStep('avatar');
|
||||
};
|
||||
|
||||
const handleAvatarComplete = (avatarId: string) => {
|
||||
if (user) {
|
||||
setUser({ ...user, avatarId });
|
||||
setStep('theme');
|
||||
}
|
||||
};
|
||||
|
||||
const handleThemeSelect = (theme: Theme) => {
|
||||
setSelectedTheme(theme);
|
||||
setStep('story');
|
||||
};
|
||||
|
||||
const handleStorySelect = (storyId: string) => {
|
||||
// In production: Load the selected story
|
||||
const story = savedStories.find(s => s.id === storyId);
|
||||
if (story) {
|
||||
// Navigate to the story viewer
|
||||
setStep('story');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthProvider>
|
||||
<div className="min-h-screen bg-gradient-to-b from-purple-100 to-blue-100">
|
||||
{step === 'welcome' && (
|
||||
<WelcomePage
|
||||
onLoginClick={() => setStep('login')}
|
||||
onRegisterClick={() => setStep('register')}
|
||||
/>
|
||||
)}
|
||||
{step === 'login' && (
|
||||
<div className="min-h-screen flex items-center justify-center p-6">
|
||||
<LoginForm
|
||||
onLogin={handleLogin}
|
||||
onRegisterClick={() => setStep('register')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{step === 'register' && (
|
||||
<RegistrationForm onComplete={handleRegistrationComplete} />
|
||||
)}
|
||||
{step === 'avatar' && user && (
|
||||
<AvatarSelector user={user} onComplete={handleAvatarComplete} />
|
||||
)}
|
||||
{step === 'theme' && <ThemeSelector onSelect={handleThemeSelect} />}
|
||||
{step === 'story' && user && selectedTheme && (
|
||||
<StoryViewer theme={selectedTheme} user={user} />
|
||||
)}
|
||||
{step === 'library' && authUser && (
|
||||
<StoryLibrary
|
||||
stories={savedStories}
|
||||
onStorySelect={handleStorySelect}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
141
src/components/AvatarSelector.tsx
Normal file
141
src/components/AvatarSelector.tsx
Normal file
@ -0,0 +1,141 @@
|
||||
import React from 'react';
|
||||
import { User, Avatar } from '../types';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
const AVATARS: Avatar[] = [
|
||||
// Bahia Culture
|
||||
{
|
||||
id: 'capoeira',
|
||||
name: 'Capoeirista',
|
||||
category: 'bahia',
|
||||
description: 'Um jovem capoeirista cheio de energia',
|
||||
baseColor: '#FCD34D',
|
||||
},
|
||||
{
|
||||
id: 'baiana',
|
||||
name: 'Baiana',
|
||||
category: 'bahia',
|
||||
description: 'Uma alegre baiana do acarajé',
|
||||
baseColor: '#F87171',
|
||||
},
|
||||
{
|
||||
id: 'pescador',
|
||||
name: 'Pescador',
|
||||
category: 'bahia',
|
||||
description: 'Um pescador tradicional da Bahia',
|
||||
baseColor: '#60A5FA',
|
||||
},
|
||||
{
|
||||
id: 'sambista',
|
||||
name: 'Sambista',
|
||||
category: 'bahia',
|
||||
description: 'Um animado sambista',
|
||||
baseColor: '#34D399',
|
||||
},
|
||||
// Amazon Culture
|
||||
{
|
||||
id: 'indigenous',
|
||||
name: 'Indígena',
|
||||
category: 'amazon',
|
||||
description: 'Um guardião da floresta',
|
||||
baseColor: '#A78BFA',
|
||||
},
|
||||
{
|
||||
id: 'ribeirinho',
|
||||
name: 'Ribeirinho',
|
||||
category: 'amazon',
|
||||
description: 'Um conhecedor dos rios',
|
||||
baseColor: '#4ADE80',
|
||||
},
|
||||
{
|
||||
id: 'seringueira',
|
||||
name: 'Seringueira',
|
||||
category: 'amazon',
|
||||
description: 'Uma protetora da floresta',
|
||||
baseColor: '#F472B6',
|
||||
},
|
||||
{
|
||||
id: 'artesao',
|
||||
name: 'Artesão',
|
||||
category: 'amazon',
|
||||
description: 'Um artesão da Amazônia',
|
||||
baseColor: '#FB923C',
|
||||
},
|
||||
];
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
onComplete: (avatarId: string) => void;
|
||||
}
|
||||
|
||||
export function AvatarSelector({ user, onComplete }: Props) {
|
||||
const [selectedAvatar, setSelectedAvatar] = React.useState(AVATARS[0]);
|
||||
const [category, setCategory] = React.useState<'bahia' | 'amazon'>('bahia');
|
||||
|
||||
const filteredAvatars = AVATARS.filter((avatar) => avatar.category === category);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-green-100 to-blue-100 p-6">
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8">
|
||||
<h1 className="text-3xl font-bold text-center text-green-600 mb-8">
|
||||
Escolha seu Personagem, {user.name}!
|
||||
</h1>
|
||||
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
<button
|
||||
onClick={() => setCategory('bahia')}
|
||||
className={`px-6 py-3 rounded-full text-lg font-medium transition ${
|
||||
category === 'bahia'
|
||||
? 'bg-green-600 text-white'
|
||||
: 'bg-green-100 text-green-600 hover:bg-green-200'
|
||||
}`}
|
||||
>
|
||||
Cultura Baiana
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCategory('amazon')}
|
||||
className={`px-6 py-3 rounded-full text-lg font-medium transition ${
|
||||
category === 'amazon'
|
||||
? 'bg-green-600 text-white'
|
||||
: 'bg-green-100 text-green-600 hover:bg-green-200'
|
||||
}`}
|
||||
>
|
||||
Cultura Amazônica
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{filteredAvatars.map((avatar) => (
|
||||
<button
|
||||
key={avatar.id}
|
||||
onClick={() => setSelectedAvatar(avatar)}
|
||||
className={`p-4 rounded-xl transition ${
|
||||
selectedAvatar.id === avatar.id
|
||||
? 'bg-green-100 border-2 border-green-500'
|
||||
: 'bg-gray-50 border-2 border-transparent hover:bg-green-50'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="w-32 h-32 mx-auto rounded-full mb-4"
|
||||
style={{ backgroundColor: avatar.baseColor }}
|
||||
/>
|
||||
<h3 className="text-lg font-semibold text-gray-800">
|
||||
{avatar.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">{avatar.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-center">
|
||||
<button
|
||||
onClick={() => onComplete(selectedAvatar.id)}
|
||||
className="px-8 py-3 text-lg font-semibold text-white bg-green-600 rounded-xl hover:bg-green-700 transition"
|
||||
>
|
||||
Continuar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
src/components/RegistrationForm.tsx
Normal file
130
src/components/RegistrationForm.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import React, { useState } from 'react';
|
||||
import { User } from '../types';
|
||||
import { Heart, User2, Info } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
onComplete: (user: User) => void;
|
||||
}
|
||||
|
||||
export function RegistrationForm({ onComplete }: Props) {
|
||||
const [name, setName] = useState('');
|
||||
const [age, setAge] = useState(8);
|
||||
const [gender, setGender] = useState<'boy' | 'girl' | 'other'>('other');
|
||||
const [showPrivacy, setShowPrivacy] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (name.trim()) {
|
||||
onComplete({
|
||||
name: name.trim(),
|
||||
age,
|
||||
gender,
|
||||
avatarId: '',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-blue-100 to-purple-100 p-6">
|
||||
<div className="max-w-md mx-auto bg-white rounded-2xl shadow-xl p-8">
|
||||
<h1 className="text-3xl font-bold text-center text-purple-600 mb-8">
|
||||
Bem-vindo à Aventura!
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-lg font-medium text-gray-700 mb-2">
|
||||
Como você se chama?
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border-2 border-purple-200 focus:border-purple-500 focus:ring focus:ring-purple-200 transition"
|
||||
required
|
||||
maxLength={20}
|
||||
placeholder="Seu primeiro nome"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-lg font-medium text-gray-700 mb-2">
|
||||
Quantos anos você tem?
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="6"
|
||||
max="12"
|
||||
value={age}
|
||||
onChange={(e) => setAge(Number(e.target.value))}
|
||||
className="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
<div className="text-center text-2xl font-bold text-purple-600 mt-2">
|
||||
{age} anos
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-lg font-medium text-gray-700 mb-4">
|
||||
Como você se identifica?
|
||||
</label>
|
||||
<div className="flex justify-center gap-4">
|
||||
{[
|
||||
{ value: 'boy', label: 'Menino', icon: User2 },
|
||||
{ value: 'girl', label: 'Menina', icon: Heart },
|
||||
{ value: 'other', label: 'Outro', icon: User2 },
|
||||
].map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setGender(option.value as any)}
|
||||
className={`flex flex-col items-center p-4 rounded-xl transition ${
|
||||
gender === option.value
|
||||
? 'bg-purple-100 border-2 border-purple-500'
|
||||
: 'bg-gray-50 border-2 border-transparent hover:bg-purple-50'
|
||||
}`}
|
||||
>
|
||||
<option.icon
|
||||
className={`w-8 h-8 ${
|
||||
gender === option.value ? 'text-purple-600' : 'text-gray-600'
|
||||
}`}
|
||||
/>
|
||||
<span className="mt-2 text-sm font-medium">{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPrivacy(!showPrivacy)}
|
||||
className="flex items-center text-sm text-purple-600 hover:text-purple-700"
|
||||
>
|
||||
<Info className="w-4 h-4 mr-1" />
|
||||
Política de Privacidade
|
||||
</button>
|
||||
{showPrivacy && (
|
||||
<div className="mt-2 p-4 bg-purple-50 rounded-lg text-sm">
|
||||
<p>
|
||||
Olá! Nós guardamos apenas seu primeiro nome para tornar suas
|
||||
histórias mais divertidas. Não compartilhamos suas informações
|
||||
com ninguém. Seus pais podem solicitar a exclusão dos dados a
|
||||
qualquer momento.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim()}
|
||||
className="w-full py-3 px-6 text-lg font-semibold text-white bg-purple-600 rounded-xl hover:bg-purple-700 transition disabled:opacity-50"
|
||||
>
|
||||
Começar Aventura!
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/components/StoryViewer.tsx
Normal file
61
src/components/StoryViewer.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Theme, User } from '../types';
|
||||
import { StoryContent } from './story/StoryContent';
|
||||
import { StoryImage } from './story/StoryImage';
|
||||
import { StoryControls } from './story/StoryControls';
|
||||
|
||||
interface Props {
|
||||
theme: Theme;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export function StoryViewer({ theme, user }: Props) {
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
|
||||
const story = {
|
||||
title: `${user.name} e a Aventura ${theme.title}`,
|
||||
pages: [
|
||||
{
|
||||
text: `Era uma vez, em um lugar muito especial do Brasil, vivia ${user.name}, uma criança muito curiosa de ${user.age} anos. Um dia, enquanto explorava ${theme.category === 'environment' ? 'a natureza' : 'sua cultura'}, algo mágico aconteceu...`,
|
||||
image: `https://images.unsplash.com/photo-1472162072942-cd5147eb3902?auto=format&fit=crop&q=80&w=800&h=600`,
|
||||
},
|
||||
{
|
||||
text: "A jornada estava apenas começando, e muitas descobertas incríveis aguardavam...",
|
||||
image: `https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&q=80&w=800&h=600`,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const toggleAudio = () => {
|
||||
setIsPlaying(!isPlaying);
|
||||
// In production: implement actual audio playback
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-indigo-100 to-purple-100 p-6">
|
||||
<div className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<div className="p-6 bg-indigo-600 text-white">
|
||||
<h1 className="text-3xl font-bold text-center">{story.title}</h1>
|
||||
</div>
|
||||
|
||||
<StoryImage
|
||||
src={story.pages[currentPage].image}
|
||||
onNext={() => setCurrentPage(currentPage + 1)}
|
||||
onPrev={() => setCurrentPage(currentPage - 1)}
|
||||
hasNext={currentPage < story.pages.length - 1}
|
||||
hasPrev={currentPage > 0}
|
||||
/>
|
||||
|
||||
<div className="p-8">
|
||||
<StoryContent page={story.pages[currentPage]} />
|
||||
<StoryControls
|
||||
isPlaying={isPlaying}
|
||||
onToggleAudio={toggleAudio}
|
||||
title={story.title}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
152
src/components/ThemeSelector.tsx
Normal file
152
src/components/ThemeSelector.tsx
Normal file
@ -0,0 +1,152 @@
|
||||
import React from 'react';
|
||||
import { Theme } from '../types';
|
||||
import {
|
||||
Leaf,
|
||||
Users,
|
||||
PartyPopper,
|
||||
History,
|
||||
Droplets,
|
||||
Dog,
|
||||
Recycle,
|
||||
} from 'lucide-react';
|
||||
|
||||
const THEMES: Theme[] = [
|
||||
{
|
||||
id: 'nature',
|
||||
title: 'Natureza e Meio Ambiente',
|
||||
description: 'Explore as maravilhas do nosso planeta',
|
||||
icon: 'Leaf',
|
||||
sdsGoal: 13,
|
||||
category: 'environment',
|
||||
},
|
||||
{
|
||||
id: 'indigenous',
|
||||
title: 'Povos Originários do Brasil',
|
||||
description: 'Conheça as culturas indígenas',
|
||||
icon: 'Users',
|
||||
sdsGoal: 10,
|
||||
category: 'culture',
|
||||
},
|
||||
{
|
||||
id: 'traditions',
|
||||
title: 'Festas e Tradições Brasileiras',
|
||||
description: 'Celebre nossa cultura',
|
||||
icon: 'PartyPopper',
|
||||
sdsGoal: 11,
|
||||
category: 'culture',
|
||||
},
|
||||
{
|
||||
id: 'quilombola',
|
||||
title: 'Histórias Quilombolas',
|
||||
description: 'Descubra nossa história',
|
||||
icon: 'History',
|
||||
sdsGoal: 10,
|
||||
category: 'culture',
|
||||
},
|
||||
{
|
||||
id: 'water',
|
||||
title: 'Água é Vida',
|
||||
description: 'Aprenda sobre esse recurso precioso',
|
||||
icon: 'Droplets',
|
||||
sdsGoal: 6,
|
||||
category: 'environment',
|
||||
},
|
||||
{
|
||||
id: 'animals',
|
||||
title: 'Animais Brasileiros',
|
||||
description: 'Conheça nossa fauna',
|
||||
icon: 'Dog',
|
||||
sdsGoal: 15,
|
||||
category: 'nature',
|
||||
},
|
||||
{
|
||||
id: 'sustainable',
|
||||
title: 'Vivendo Sustentável',
|
||||
description: 'Cuide do nosso futuro',
|
||||
icon: 'Recycle',
|
||||
sdsGoal: 12,
|
||||
category: 'environment',
|
||||
},
|
||||
];
|
||||
|
||||
const IconMap = {
|
||||
Leaf,
|
||||
Users,
|
||||
PartyPopper,
|
||||
History,
|
||||
Droplets,
|
||||
Dog,
|
||||
Recycle,
|
||||
};
|
||||
|
||||
interface Props {
|
||||
onSelect: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
export function ThemeSelector({ onSelect }: Props) {
|
||||
const [selectedCategory, setSelectedCategory] = React.useState('all');
|
||||
|
||||
const filteredThemes =
|
||||
selectedCategory === 'all'
|
||||
? THEMES
|
||||
: THEMES.filter((theme) => theme.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-yellow-100 to-orange-100 p-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-4xl font-bold text-center text-orange-600 mb-8">
|
||||
Escolha sua Aventura!
|
||||
</h1>
|
||||
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
{[
|
||||
{ id: 'all', label: 'Todos' },
|
||||
{ id: 'environment', label: 'Meio Ambiente' },
|
||||
{ id: 'culture', label: 'Cultura' },
|
||||
{ id: 'nature', label: 'Natureza' },
|
||||
].map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setSelectedCategory(category.id)}
|
||||
className={`px-6 py-3 rounded-full text-lg font-medium transition ${
|
||||
selectedCategory === category.id
|
||||
? 'bg-orange-600 text-white'
|
||||
: 'bg-orange-100 text-orange-600 hover:bg-orange-200'
|
||||
}`}
|
||||
>
|
||||
{category.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredThemes.map((theme) => {
|
||||
const Icon = IconMap[theme.icon as keyof typeof IconMap];
|
||||
return (
|
||||
<button
|
||||
key={theme.id}
|
||||
onClick={() => onSelect(theme)}
|
||||
className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition group"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="p-3 rounded-full bg-orange-100 group-hover:bg-orange-200 transition">
|
||||
<Icon className="w-8 h-8 text-orange-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-gray-800">
|
||||
{theme.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">{theme.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-orange-600 font-medium">
|
||||
ODS {theme.sdsGoal}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
src/components/WelcomePage.tsx
Normal file
65
src/components/WelcomePage.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import { Book, Sparkles, Shield } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
onLoginClick: () => void;
|
||||
onRegisterClick: () => void;
|
||||
}
|
||||
|
||||
export function WelcomePage({ onLoginClick, onRegisterClick }: Props) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-purple-100 to-blue-100">
|
||||
<div className="max-w-6xl mx-auto px-6 py-16">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-5xl font-bold text-purple-600 mb-4">
|
||||
Histórias Mágicas
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Embarque em uma jornada de aprendizado e diversão!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
<div className="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<Book className="w-12 h-12 text-purple-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">Histórias Educativas</h2>
|
||||
<p className="text-gray-600">
|
||||
Aprenda sobre cultura, meio ambiente e muito mais
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<Sparkles className="w-12 h-12 text-purple-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">Personalize sua Jornada</h2>
|
||||
<p className="text-gray-600">
|
||||
Crie seu próprio personagem e escolha suas aventuras
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl shadow-lg text-center">
|
||||
<Shield className="w-12 h-12 text-purple-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">Ambiente Seguro</h2>
|
||||
<p className="text-gray-600">
|
||||
Conteúdo adequado e proteção de dados
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
onClick={onLoginClick}
|
||||
className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
|
||||
>
|
||||
Entrar
|
||||
</button>
|
||||
<button
|
||||
onClick={onRegisterClick}
|
||||
className="px-8 py-3 bg-white text-purple-600 rounded-lg hover:bg-purple-50 transition"
|
||||
>
|
||||
Criar Conta
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
98
src/components/auth/LoginForm.tsx
Normal file
98
src/components/auth/LoginForm.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useState } from 'react';
|
||||
import { LogIn } from 'lucide-react';
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
|
||||
interface Props {
|
||||
onLogin: (email: string, password: string) => void;
|
||||
onRegisterClick: () => void;
|
||||
}
|
||||
|
||||
export function LoginForm({ onLogin, onRegisterClick }: Props) {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const { signIn } = useAuth();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const { user } = await signIn(email, password);
|
||||
if (user) {
|
||||
onLogin(email, password);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Erro ao fazer login. Verifique suas credenciais.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-center text-purple-600">
|
||||
Bem-vindo de volta!
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-gray-600">
|
||||
Continue sua jornada de histórias mágicas
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
||||
Senha
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent rounded-lg shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
|
||||
>
|
||||
<LogIn className="w-5 h-5" />
|
||||
Entrar
|
||||
</button>
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRegisterClick}
|
||||
className="text-purple-600 hover:text-purple-500"
|
||||
>
|
||||
Criar uma nova conta
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
src/components/library/StoryLibrary.tsx
Normal file
48
src/components/library/StoryLibrary.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { Book, Clock } from 'lucide-react';
|
||||
import { SavedStory } from '../../types/auth';
|
||||
|
||||
interface Props {
|
||||
stories: SavedStory[];
|
||||
onStorySelect: (storyId: string) => void;
|
||||
}
|
||||
|
||||
export function StoryLibrary({ stories, onStorySelect }: Props) {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6">
|
||||
<h1 className="text-3xl font-bold text-purple-600 mb-8">
|
||||
Minha Biblioteca de Histórias
|
||||
</h1>
|
||||
|
||||
{stories.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Book className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-600">
|
||||
Você ainda não tem histórias salvas.
|
||||
<br />
|
||||
Comece uma nova aventura agora!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{stories.map((story) => (
|
||||
<button
|
||||
key={story.id}
|
||||
onClick={() => onStorySelect(story.id)}
|
||||
className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition text-left"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-2">
|
||||
{story.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">Tema: {story.theme}</p>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
{new Date(story.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
src/components/story/StoryContent.tsx
Normal file
14
src/components/story/StoryContent.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { StoryPage } from '../../types';
|
||||
|
||||
interface Props {
|
||||
page: StoryPage;
|
||||
}
|
||||
|
||||
export function StoryContent({ page }: Props) {
|
||||
return (
|
||||
<p className="text-xl leading-relaxed text-gray-700 mb-8">
|
||||
{page.text}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
55
src/components/story/StoryControls.tsx
Normal file
55
src/components/story/StoryControls.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { Share2, Download, Volume2, VolumeX } from 'lucide-react';
|
||||
import { useShare } from '../../hooks/useShare';
|
||||
|
||||
interface Props {
|
||||
isPlaying: boolean;
|
||||
onToggleAudio: () => void;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export function StoryControls({ isPlaying, onToggleAudio, title }: Props) {
|
||||
const { share, isShareSupported } = useShare();
|
||||
|
||||
const handleShare = async () => {
|
||||
await share({
|
||||
title,
|
||||
text: 'Confira esta história incrível!',
|
||||
url: window.location.href,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
onClick={onToggleAudio}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-100 text-indigo-600 rounded-full hover:bg-indigo-200 transition"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<VolumeX className="w-5 h-5" />
|
||||
) : (
|
||||
<Volume2 className="w-5 h-5" />
|
||||
)}
|
||||
{isPlaying ? 'Pausar Áudio' : 'Ouvir História'}
|
||||
</button>
|
||||
|
||||
{isShareSupported && (
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-100 text-indigo-600 rounded-full hover:bg-indigo-200 transition"
|
||||
>
|
||||
<Share2 className="w-5 h-5" />
|
||||
Compartilhar
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => {/* Implement PDF download */}}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-indigo-100 text-indigo-600 rounded-full hover:bg-indigo-200 transition"
|
||||
>
|
||||
<Download className="w-5 h-5" />
|
||||
Salvar PDF
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/components/story/StoryImage.tsx
Normal file
40
src/components/story/StoryImage.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
src: string;
|
||||
onNext: () => void;
|
||||
onPrev: () => void;
|
||||
hasNext: boolean;
|
||||
hasPrev: boolean;
|
||||
}
|
||||
|
||||
export function StoryImage({ src, onNext, onPrev, hasNext, hasPrev }: Props) {
|
||||
return (
|
||||
<div className="relative aspect-video">
|
||||
<img
|
||||
src={src}
|
||||
alt="Ilustração da história"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{hasPrev && (
|
||||
<button
|
||||
onClick={onPrev}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 p-2 bg-white/80 rounded-full hover:bg-white transition"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6 text-indigo-600" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{hasNext && (
|
||||
<button
|
||||
onClick={onNext}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 bg-white/80 rounded-full hover:bg-white transition"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6 text-indigo-600" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
24
src/contexts/AuthContext.tsx
Normal file
24
src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { createContext, useContext, ReactNode } from 'react'
|
||||
import { useAuth } from '../hooks/useAuth'
|
||||
|
||||
type AuthContextType = ReturnType<typeof useAuth>
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined)
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const auth = useAuth()
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={auth}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useAuthContext() {
|
||||
const context = useContext(AuthContext)
|
||||
if (context === undefined) {
|
||||
throw new Error('useAuthContext deve ser usado dentro de um AuthProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
74
src/hooks/useAuth.ts
Normal file
74
src/hooks/useAuth.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { supabase } from '../lib/supabase'
|
||||
import { User } from '@supabase/supabase-js'
|
||||
|
||||
export function useAuth() {
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar sessão atual
|
||||
supabase.auth.getSession().then(({ data: { session } }) => {
|
||||
setUser(session?.user ?? null)
|
||||
setLoading(false)
|
||||
})
|
||||
|
||||
// Escutar mudanças de autenticação
|
||||
const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
|
||||
setUser(session?.user ?? null)
|
||||
})
|
||||
|
||||
return () => subscription.unsubscribe()
|
||||
}, [])
|
||||
|
||||
const signIn = async (email: string, password: string) => {
|
||||
try {
|
||||
const { data, error } = await supabase.auth.signInWithPassword({
|
||||
email,
|
||||
password
|
||||
})
|
||||
|
||||
if (error) throw error
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error('Erro ao fazer login:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const signUp = async (email: string, password: string) => {
|
||||
try {
|
||||
const { data, error } = await supabase.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
options: {
|
||||
emailRedirectTo: `${window.location.origin}/auth/callback`
|
||||
}
|
||||
})
|
||||
|
||||
if (error) throw error
|
||||
return data
|
||||
} catch (error) {
|
||||
console.error('Erro ao criar conta:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const signOut = async () => {
|
||||
try {
|
||||
const { error } = await supabase.auth.signOut()
|
||||
if (error) throw error
|
||||
} catch (error) {
|
||||
console.error('Erro ao fazer logout:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
loading,
|
||||
signIn,
|
||||
signUp,
|
||||
signOut
|
||||
}
|
||||
}
|
||||
207
src/hooks/useDatabase.ts
Normal file
207
src/hooks/useDatabase.ts
Normal file
@ -0,0 +1,207 @@
|
||||
import { useState } from 'react';
|
||||
import { supabase } from '../lib/supabase';
|
||||
import { School, Teacher, Class, Student, TeacherClass, Story, StoryPage } from '../types/database';
|
||||
|
||||
export function useDatabase() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Funções para escolas
|
||||
const getSchools = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('schools')
|
||||
.select('*');
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao buscar escolas');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Funções para professores
|
||||
const getTeachersBySchool = async (schoolId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('teachers')
|
||||
.select('*')
|
||||
.eq('school_id', schoolId);
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao buscar professores');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Funções para turmas
|
||||
const getClassesBySchool = async (schoolId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('classes')
|
||||
.select(`
|
||||
*,
|
||||
students (*)
|
||||
`)
|
||||
.eq('school_id', schoolId);
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao buscar turmas');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Funções para alunos
|
||||
const getStudentsByClass = async (classId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('students')
|
||||
.select('*')
|
||||
.eq('class_id', classId);
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao buscar alunos');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Funções para histórias
|
||||
const getStoriesByStudent = async (studentId: string) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('stories')
|
||||
.select('*')
|
||||
.eq('student_id', studentId)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao buscar histórias');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createStory = async (studentId: string, story: Omit<Story, 'id' | 'created_at' | 'updated_at'>) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('stories')
|
||||
.insert([
|
||||
{
|
||||
student_id: studentId,
|
||||
title: story.title,
|
||||
theme: story.theme,
|
||||
content: story.content,
|
||||
status: story.status
|
||||
}
|
||||
])
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao criar história');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateStory = async (storyId: string, updates: Partial<Story>) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from('stories')
|
||||
.update(updates)
|
||||
.eq('id', storyId)
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao atualizar história');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const addPageToStory = async (storyId: string, page: StoryPage) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data: story, error: fetchError } = await supabase
|
||||
.from('stories')
|
||||
.select('content')
|
||||
.eq('id', storyId)
|
||||
.single();
|
||||
|
||||
if (fetchError) throw fetchError;
|
||||
|
||||
const updatedContent = {
|
||||
...story.content,
|
||||
pages: [...story.content.pages, page]
|
||||
};
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('stories')
|
||||
.update({ content: updatedContent })
|
||||
.eq('id', storyId)
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
return data;
|
||||
} catch (err) {
|
||||
setError('Erro ao adicionar página');
|
||||
console.error(err);
|
||||
return null;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
loading,
|
||||
error,
|
||||
getSchools,
|
||||
getTeachersBySchool,
|
||||
getClassesBySchool,
|
||||
getStudentsByClass,
|
||||
getStoriesByStudent,
|
||||
createStory,
|
||||
updateStory,
|
||||
addPageToStory
|
||||
};
|
||||
}
|
||||
25
src/hooks/useShare.ts
Normal file
25
src/hooks/useShare.ts
Normal file
@ -0,0 +1,25 @@
|
||||
interface ShareData {
|
||||
title: string;
|
||||
text: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export function useShare() {
|
||||
const isShareSupported = typeof navigator !== 'undefined' && !!navigator.share;
|
||||
|
||||
const share = async (data: ShareData) => {
|
||||
if (!isShareSupported) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.share(data);
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.name !== 'AbortError') {
|
||||
console.error('Error sharing:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return { share, isShareSupported };
|
||||
}
|
||||
3
src/index.css
Normal file
3
src/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
6
src/lib/supabase.ts
Normal file
6
src/lib/supabase.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabaseUrl = 'https://bsjlbnyslxzsdwxvkaap.supabase.co'
|
||||
const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJzamxibnlzbHh6c2R3eHZrYWFwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ2MzUzNzYsImV4cCI6MjA1MDIxMTM3Nn0.ygEUrAu2ZnCkfgS4-k4Puvk7ywkn3U7Bnzh7BSOQWFo'
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
13
src/types/auth.ts
Normal file
13
src/types/auth.ts
Normal file
@ -0,0 +1,13 @@
|
||||
export interface AuthUser {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface SavedStory {
|
||||
id: string;
|
||||
title: string;
|
||||
theme: string;
|
||||
createdAt: string;
|
||||
lastReadPage: number;
|
||||
}
|
||||
106
src/types/database.ts
Normal file
106
src/types/database.ts
Normal file
@ -0,0 +1,106 @@
|
||||
export interface School {
|
||||
id: string;
|
||||
name: string;
|
||||
address?: string;
|
||||
phone?: string;
|
||||
email?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Teacher {
|
||||
id: string;
|
||||
school_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
subject?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Class {
|
||||
id: string;
|
||||
school_id: string;
|
||||
name: string;
|
||||
grade: string;
|
||||
year: number;
|
||||
period?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Student {
|
||||
id: string;
|
||||
class_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
birth_date?: string;
|
||||
guardian_name?: string;
|
||||
guardian_phone?: string;
|
||||
guardian_email?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface TeacherClass {
|
||||
id: string;
|
||||
teacher_id: string;
|
||||
class_id: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
// Tipos para relacionamentos
|
||||
export interface ClassWithTeachers extends Class {
|
||||
teachers: Teacher[];
|
||||
}
|
||||
|
||||
export interface TeacherWithClasses extends Teacher {
|
||||
classes: Class[];
|
||||
}
|
||||
|
||||
export interface ClassWithStudents extends Class {
|
||||
students: Student[];
|
||||
}
|
||||
|
||||
export interface SchoolWithRelations extends School {
|
||||
teachers: Teacher[];
|
||||
classes: ClassWithStudents[];
|
||||
}
|
||||
|
||||
export interface StoryPage {
|
||||
text: string;
|
||||
image?: string;
|
||||
audio?: string;
|
||||
}
|
||||
|
||||
export interface Story {
|
||||
id: string;
|
||||
student_id: string;
|
||||
title: string;
|
||||
theme: string;
|
||||
content: {
|
||||
pages: StoryPage[];
|
||||
currentPage?: number;
|
||||
lastModified?: string;
|
||||
};
|
||||
status: 'draft' | 'published' | 'archived';
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// Atualizando a interface Student para incluir histórias
|
||||
export interface StudentWithStories extends Student {
|
||||
stories: Story[];
|
||||
}
|
||||
|
||||
// Atualizando ClassWithStudents para incluir histórias dos alunos
|
||||
export interface ClassWithStudentsAndStories extends Class {
|
||||
students: StudentWithStories[];
|
||||
}
|
||||
|
||||
// Atualizando SchoolWithRelations
|
||||
export interface SchoolWithRelations extends School {
|
||||
teachers: Teacher[];
|
||||
classes: ClassWithStudentsAndStories[];
|
||||
}
|
||||
28
src/types/index.ts
Normal file
28
src/types/index.ts
Normal file
@ -0,0 +1,28 @@
|
||||
export interface User {
|
||||
name: string;
|
||||
age: number;
|
||||
gender: 'boy' | 'girl' | 'other';
|
||||
avatarId: string;
|
||||
}
|
||||
|
||||
export interface Avatar {
|
||||
id: string;
|
||||
name: string;
|
||||
category: 'bahia' | 'amazon';
|
||||
description: string;
|
||||
baseColor: string;
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
sdsGoal: number;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export interface StoryPage {
|
||||
text: string;
|
||||
image: string;
|
||||
}
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
24
tsconfig.app.json
Normal file
24
tsconfig.app.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
22
tsconfig.node.json
Normal file
22
tsconfig.node.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
optimizeDeps: {
|
||||
exclude: ['lucide-react'],
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user