lucasrcsantana/story-generator
1
0
Fork 0
mirror of https://github.com/lucasrcsantana/story-generator.git synced 2025-12-18 14:27:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Ajustando páigna de leitura

Browse Source
This commit is contained in:
Lucas Santana 2025-01-29 14:15:59 -03:00
parent d949587c44
commit 4790d9788b
1 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/student-dashboard/StoryPage.tsx
View File

@ -394,7 +394,7 @@ export function StoryPage() {
const { session } = useSession(); const { session } = useSession();
const { isUpperCase, toggleUppercase, isLoading } = useUppercasePreference(session?.user?.id); const { isUpperCase, toggleUppercase, isLoading } = useUppercasePreference(session?.user?.id);
const { isHighlighted: isSyllablesEnabled, toggleHighlight: toggleSyllables } = useSyllables(); const { isHighlighted: isSyllablesEnabled, toggleHighlight: toggleSyllables } = useSyllables();
const [fontSize, setFontSize] = useState(18); const [fontSize, setFontSize] = useState(24);
const [readingSpeed, setReadingSpeed] = useState(60); // 60 palavras por minuto const [readingSpeed, setReadingSpeed] = useState(60); // 60 palavras por minuto
const [letterSpacing, setLetterSpacing] = useState(0); const [letterSpacing, setLetterSpacing] = useState(0);
const [wordSpacing, setWordSpacing] = useState(0); const [wordSpacing, setWordSpacing] = useState(0);
@ -854,19 +854,39 @@ export function StoryPage() {
<h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1> <h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1>
</div> </div>
{/* 3. Texto da História */} {/* Container de duas colunas */}
<div className="border-b border-gray-200 pb-6"> <div className="grid grid-cols-10 gap-6 border-b border-gray-200 pb-6">
<div {/* 3. Texto da História - Coluna Esquerda (40%) */}
className="prose max-w-none overflow-hidden" <div className="col-span-4">
style={{ <div
fontSize: `${fontSize}px`, className="prose max-w-none overflow-hidden"
letterSpacing: `${letterSpacing}px`, style={{
wordSpacing: `${wordSpacing}px`, fontSize: `${fontSize}px`,
lineHeight: lineHeight letterSpacing: `${letterSpacing}px`,
}} wordSpacing: `${wordSpacing}px`,
> lineHeight: lineHeight
{renderHighlightedText(story?.content?.pages?.[currentPage]?.text || '')} }}
>
{renderHighlightedText(story?.content?.pages?.[currentPage]?.text || '')}
</div>
</div> </div>
{/* 5. Imagem da História - Coluna Direita (60%) */}
{!focusMode.isActive && (
<div className="col-span-6">
{story?.content?.pages?.[currentPage]?.image ? (
<ImageWithLoading
src={story.content.pages[currentPage].image}
alt={`Ilustração da página ${currentPage + 1}`}
className="w-full rounded-lg"
/>
) : (
<div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
<p className="text-gray-500">Sem imagem para esta página</p>
</div>
)}
</div>
)}
</div> </div>
{/* 4. Controles de Navegação */} {/* 4. Controles de Navegação */}
@ -896,22 +916,7 @@ export function StoryPage() {
</div> </div>
</div> </div>
{/* 5. Imagem da História - Agora com controle de visibilidade */}
{!focusMode.isActive && (
<div className="border-b border-gray-200 pb-6">
{story?.content?.pages?.[currentPage]?.image ? (
<ImageWithLoading
src={story.content.pages[currentPage].image}
alt={`Ilustração da página ${currentPage + 1}`}
className="w-full rounded-lg"
/>
) : (
<div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
<p className="text-gray-500">Sem imagem para esta página</p>
</div>
)}
</div>
)}
{/* 6. Controle de Gravação */} {/* 6. Controle de Gravação */}
{/* {/*