guilhermewerner/image-caption-api
1
0
Fork 0
mirror of https://github.com/guilhermewerner/image-caption-api synced 2025-06-15 14:35:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update styles

Browse Source
This commit is contained in:
Guilherme Werner
2023-10-10 21:04:41 -03:00
parent 38d059f008
commit 32be4782f7
3 changed files with 65 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/_document.tsx
View File

@ -8,7 +8,7 @@ export default function Document() {
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<body> <body data-bs-theme="dark">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

78
src/pages/index.tsx
View File

@ -10,6 +10,8 @@ import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form'; import Form from 'react-bootstrap/Form';
import Image from 'react-bootstrap/Image'; import Image from 'react-bootstrap/Image';
import Ratio from 'react-bootstrap/Ratio'; import Ratio from 'react-bootstrap/Ratio';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { useState } from 'react'; import { useState } from 'react';
export default function Home() { export default function Home() {
@ -58,39 +60,53 @@ export default function Home() {
<Head> <Head>
<title>Image Caption</title> <title>Image Caption</title>
</Head> </Head>
<header> <div className='wrapper'>
<Navbar expand="lg" className="shadow-sm"> <header>
<Navbar expand="lg" className="main-nav shadow-sm">
<Container>
<Navbar.Brand href="/">Image Caption</Navbar.Brand>
</Container>
</Navbar>
</header>
<main className='mt-3'>
<Container> <Container>
<Navbar.Brand href="/">Image Caption</Navbar.Brand> <p className="mb-2">Envie uma imagem para obter sua descrição.</p>
<Form className='my-3'>
<Form.Group className="mb-3">
<Form.Label>Imagem</Form.Label>
<div className='d-flex justify-content-center align-items-center flex-grow-1'>
<div
className='d-flex'
style={{ width: '720px', height: '100%' }}
>
<Ratio className='d-flex' aspectRatio="16x9">
<Image src={imageUrl} />
</Ratio>
</div>
</div>
</Form.Group>
<Form.Group className="mb-3" controlId="formUpload">
<Form.Label>Enviar imagem</Form.Label>
<Form.Control type="file" onChange={handleImageChange} />
</Form.Group>
<Form.Group className="mb-3" controlId="formCaption">
<Form.Label>Descrição</Form.Label>
<Form.Control type="text" disabled value={caption ? caption : ""} />
</Form.Group>
<div className='text-end'>
<Button variant="primary" onClick={handleSubmit}>
Enviar
</Button>
</div>
</Form>
</Container> </Container>
</Navbar> </main>
</header> <footer>
<main className='mt-3'> <Container className="mb-2 pb-2">
<Container> <span className="text-muted">Feito por</span>
<div className='d-flex justify-content-center align-items-center flex-grow-1'> </Container>
<div </footer>
className='d-flex' </div>
style={{ width: '480px', height: 'auto' }}
>
<Ratio className='d-flex' aspectRatio="16x9">
<Image src={imageUrl} />
</Ratio>
</div>
</div>
<Form className='my-3'>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Image</Form.Label>
<Form.Control type="file" onChange={handleImageChange} />
</Form.Group>
<div className='text-end'>
<Button variant="primary" onClick={handleSubmit}>
Submit
</Button>
</div>
</Form>
<p className='my-3 text-center'>{caption}</p>
</Container>
</main>
</> </>
) )
} }

17
src/styles/globals.scss
View File

@ -7,5 +7,22 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap");
body { body {
background-color: #1b1f22;
font-family: "Roboto", var(--bs-font-sans-serif); font-family: "Roboto", var(--bs-font-sans-serif);
} }
.main-nav {
background-color: #212529;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
display: flex;
flex-direction: column;
flex-grow: 1;
}