109 lines
2.5 KiB
TypeScript
109 lines
2.5 KiB
TypeScript
import { Col, Row } from "antd";
|
|
import ProText from "components/ProText";
|
|
import { useTranslation } from "react-i18next";
|
|
import { colors } from "ThemeConstants";
|
|
|
|
export default function Stepper() {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Row
|
|
align={"middle"}
|
|
style={{
|
|
width: 330,
|
|
position: "relative",
|
|
padding: "12px",
|
|
}}
|
|
>
|
|
<Col>
|
|
<div
|
|
style={{
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: "50%",
|
|
backgroundColor: colors.primary,
|
|
}}
|
|
></div>
|
|
</Col>
|
|
<Col flex={"auto"}>
|
|
<div
|
|
style={{
|
|
height: 1.5,
|
|
backgroundColor: colors.primary,
|
|
margin: "0 8px",
|
|
}}
|
|
></div>
|
|
</Col>
|
|
<Col>
|
|
<div
|
|
style={{
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: "50%",
|
|
backgroundColor: colors.primary,
|
|
}}
|
|
></div>
|
|
</Col>
|
|
<Col flex={"auto"}>
|
|
<div
|
|
style={{
|
|
height: 1.5,
|
|
backgroundColor: colors.primary,
|
|
margin: "0 8px",
|
|
}}
|
|
></div>
|
|
</Col>
|
|
<Col>
|
|
{" "}
|
|
<div
|
|
style={{
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: "50%",
|
|
backgroundColor: "#FFF",
|
|
border: `2px solid #BDBDBD`,
|
|
}}
|
|
></div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{" "}
|
|
<Row
|
|
align={"middle"}
|
|
style={{
|
|
width: 330,
|
|
position: "relative",
|
|
padding: "12px",
|
|
}}
|
|
>
|
|
<Col>
|
|
<ProText>{t("order.reserved")}</ProText>
|
|
</Col>
|
|
<Col flex={"auto"}></Col>
|
|
<Col>
|
|
<ProText>{t("order.prepare")}</ProText>
|
|
</Col>
|
|
<Col flex={"auto"}></Col>
|
|
<Col>
|
|
<ProText type="secondary">{t("order.ready")}</ProText>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|