119 lines
3.7 KiB
JavaScript
119 lines
3.7 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import { useMediaQuery } from "react-responsive";
|
|
import { Form, Input, Button, Card, Flex } from "antd";
|
|
import { FilePdfOutlined, CloudDownloadOutlined } from "@ant-design/icons";
|
|
|
|
const CVView = ({ setCurrentView }) => {
|
|
const onFinish = (values) => {
|
|
console.log("Form values:", values);
|
|
};
|
|
const isMobile = useMediaQuery({ maxWidth: 600 });
|
|
|
|
return (
|
|
<div className="tbview">
|
|
<Card
|
|
className={"tbcard"}
|
|
title="CV"
|
|
style={{
|
|
width: isMobile ? "100%" : "70%",
|
|
height: isMobile ? "100%" : "70%",
|
|
}}
|
|
actions={[
|
|
<Button
|
|
className={"tbbutton"}
|
|
key="back"
|
|
onClick={() => setCurrentView("index")}
|
|
icon={
|
|
<img
|
|
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
|
|
alt="Back"
|
|
style={{ height: "14px", marginBottom: "1px" }}
|
|
/>
|
|
}
|
|
>
|
|
Back
|
|
</Button>,
|
|
]}
|
|
>
|
|
<Flex style={{ margin: isMobile ? "0px 0px" : "0px 10%" }} vertical>
|
|
<Flex
|
|
gap="middle"
|
|
style={{ borderBottom: "1px solid #ffffff", padding: "10px 0px" }}
|
|
>
|
|
<FilePdfOutlined style={{ fontSize: "64px" }} />
|
|
<div style={{ width: "100%" }}>
|
|
<h3 style={{ marginBottom: "0px" }}>Curriculum Vitae 2025</h3>
|
|
<p style={{ marginBottom: "2px" }}>
|
|
Enter your email address to download:
|
|
</p>
|
|
<Form
|
|
layout="vertical"
|
|
onFinish={onFinish}
|
|
style={{ paddingBottom: "5px" }}
|
|
>
|
|
<Form.Item
|
|
name="email"
|
|
rules={[
|
|
{ required: true, message: "Please enter your email" },
|
|
]}
|
|
style={{ marginBottom: "0" }}
|
|
>
|
|
<Flex gap="small">
|
|
<Input
|
|
type="email"
|
|
placeholder="example@example.com"
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<Button type="primary" htmlType="submit">
|
|
<CloudDownloadOutlined />
|
|
</Button>
|
|
</Flex>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</Flex>
|
|
<Flex gap="middle" style={{ padding: "10px 0px" }}>
|
|
<FilePdfOutlined style={{ fontSize: "64px" }} />
|
|
<div style={{ width: "100%" }}>
|
|
<h3 style={{ marginBottom: "0px" }}>Curriculum Vitae 2024</h3>
|
|
<p style={{ marginBottom: "2px" }}>
|
|
Enter your email address to download:
|
|
</p>
|
|
<Form
|
|
layout="vertical"
|
|
onFinish={onFinish}
|
|
style={{ paddingBottom: "5px" }}
|
|
>
|
|
<Form.Item
|
|
name="email"
|
|
rules={[
|
|
{ required: true, message: "Please enter your email" },
|
|
]}
|
|
style={{ marginBottom: "0" }}
|
|
>
|
|
<Flex gap="small">
|
|
<Input
|
|
type="email"
|
|
placeholder="example@example.com"
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<Button type="primary" htmlType="submit">
|
|
<CloudDownloadOutlined />
|
|
</Button>
|
|
</Flex>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
CVView.propTypes = {
|
|
setCurrentView: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default CVView;
|