You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mvfront-react/pages/index.jsx

72 lines
2.1 KiB

import { useState } from "react";
import Head from "next/head";
import Link from "next/link";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import { useTranslation } from "next-i18next";
import { Container, Row, Col, Button, Input } from "reactstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRocket } from "@fortawesome/free-solid-svg-icons";
import config from "../next-i18next.config.js";
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, [], config)),
},
});
const Home = () => {
const [title, setTitle] = useState(null);
const { t } = useTranslation();
return (
<Container>
<form autoComplete="off">
<Row>
<img
src="logos/logo-line-white.svg"
alt="logo of Mieux Voter"
height="128"
className="d-block ml-auto mr-auto mb-4"
/>
</Row>
<Row>
<Col className="text-center">
<h3>{t("common.valueProp")}</h3>
</Col>
</Row>
<Row className="mt-2">
<Col xs="12" md="9" xl="6" className="offset-xl-2">
<Input
placeholder={t("resource.writeQuestion")}
autoFocus
required
className="mt-2"
name="title"
value={title ? title : ""}
onChange={(e) => setTitle(e.target.value)}
maxLength="250"
/>
</Col>
<Col xs="12" md="3" xl="2">
<Link href={{ pathname: "/new/", query: { title: title } }}>
<Button
type="submit"
className="btn btn-block btn-secondary mt-2"
>
<FontAwesomeIcon icon={faRocket} className="mr-2" />
{t("resource.start")}
</Button>
</Link>
</Col>
</Row>
<Row className="mt-4">
<Col className="text-center">
<p>{t("resource.noAds")}</p>
</Col>
</Row>
</form>
</Container>
);
};
export default Home;