guilhermewerner/image-caption-api
1
0
Fork 0
mirror of https://github.com/guilhermewerner/image-caption-api synced 2025-06-15 22:54:17 +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>

30
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,8 +60,9 @@ export default function Home() {
<Head> <Head>
<title>Image Caption</title> <title>Image Caption</title>
</Head> </Head>
<div className='wrapper'>
<header> <header>
<Navbar expand="lg" className="shadow-sm"> <Navbar expand="lg" className="main-nav shadow-sm">
<Container> <Container>
<Navbar.Brand href="/">Image Caption</Navbar.Brand> <Navbar.Brand href="/">Image Caption</Navbar.Brand>
</Container> </Container>
@ -67,30 +70,43 @@ export default function Home() {
</header> </header>
<main className='mt-3'> <main className='mt-3'>
<Container> <Container>
<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 justify-content-center align-items-center flex-grow-1'>
<div <div
className='d-flex' className='d-flex'
style={{ width: '480px', height: 'auto' }} style={{ width: '720px', height: '100%' }}
> >
<Ratio className='d-flex' aspectRatio="16x9"> <Ratio className='d-flex' aspectRatio="16x9">
<Image src={imageUrl} /> <Image src={imageUrl} />
</Ratio> </Ratio>
</div> </div>
</div> </div>
<Form className='my-3'> </Form.Group>
<Form.Group className="mb-3" controlId="formBasicEmail"> <Form.Group className="mb-3" controlId="formUpload">
<Form.Label>Image</Form.Label> <Form.Label>Enviar imagem</Form.Label>
<Form.Control type="file" onChange={handleImageChange} /> <Form.Control type="file" onChange={handleImageChange} />
</Form.Group> </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'> <div className='text-end'>
<Button variant="primary" onClick={handleSubmit}> <Button variant="primary" onClick={handleSubmit}>
Submit Enviar
</Button> </Button>
</div> </div>
</Form> </Form>
<p className='my-3 text-center'>{caption}</p>
</Container> </Container>
</main> </main>
<footer>
<Container className="mb-2 pb-2">
<span className="text-muted">Feito por</span>
</Container>
</footer>
</div>
</> </>
) )
} }

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;
}