Commit a1c19a74 authored by chaiwat's avatar chaiwat

add vanta, link, getstart

parent 088c9723
This diff is collapsed.
......@@ -16,6 +16,7 @@
"react-google-maps": "^9.4.5",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"vanta": "^0.5.21",
"web-vitals": "^1.0.1"
},
"scripts": {
......
......@@ -12,6 +12,12 @@
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<!-- import vanta -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<title>Repair Center</title>
<style>
.da-contact-card .ant-table-tbody>tr>td:first-child {
......
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"display": "standalone"
}
import Routers from './router/Routers';
import './assets/less/theme.less';
function App() {
return <Routers />
......
export default function FullLayout({ children }) {
return <>{children}</>;
}
import React from 'react'
import { Layout } from 'antd'
import HeaderTap from "./tabHeader";
import MenuList from "./menulist";
//import
// import Login from "../view/Login";
// import RegistionPage from "../view/Registion";
const { Content, Footer } = Layout
export default function VerticalLayout(props) {
const { children } = props
return (
<>
<HeaderTap
className="site-layout-background"
style={{
padding: 0,
position: "fixed",
zIndex: 1,
width: "100%",
}}
/>
<Layout
style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
>
<MenuList />
<Layout className="site-layout">
<Content style={{ margin: "1vh 1vh" }}>
<div
className="site-layout-background"
style={{ mixHeight: 360, overflowY: "scroll" }}
>
{children}
</div>
</Content>
<Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Layout>
</Layout>
</>
);
}
\ No newline at end of file
......@@ -10,11 +10,13 @@ import {
CommentOutlined,
} from "@ant-design/icons";
import { Link } from "react-router-dom";
const { Sider } = Layout;
const { SubMenu } = Menu;
export default function App() {
const [collapsed, setCollapsed] = useState(false);
const [collapsed, setCollapsed] = useState(true);
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
......@@ -23,38 +25,35 @@ export default function App() {
return (
<>
<Sider
theme="light"
theme="dark"
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
>
<div className="logo" />
<Menu
theme="light"
theme="dark"
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
// defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
เริ่มต้นใช้งาน
<Link to={"/"}>เริ่มต้นใช้งาน</Link>
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
ลงทะเบียนร้านซ่อม
<Link to={"/registion"}>ลงทะเบียนร้านซ่อม</Link>
</Menu.Item>
<SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
<Menu.Item key="8" icon={<SearchOutlined />}>
ค้นหาร้านซ่อม
<Link to={"/search"}>ค้นหาร้านซ่อม</Link>
</Menu.Item>
<Menu.Item key="6" icon={<FileSearchOutlined />}>
เช็คสถานะการซ่อม
</Menu.Item>
<Menu.Item key="7" icon={<CommentOutlined />}>
แจ้งปัญหาการใช้งาน
<Link to={"/status"}>เช็คสถานะการซ่อม</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<CommentOutlined />}>
แจ้งปัญหาการใช้งาน
</Menu.Item>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item>
</Menu>
</Sider>
</>
......
import React, { Suspense } from "react";
import { Route } from "react-router-dom";
// import Cookies from 'js-cookie'
const ProtectedRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) => (
<Suspense fallback={null}>
<Component {...props} />
</Suspense>
)}
/>
);
};
export default ProtectedRoute;
@import url('https://fonts.googleapis.com/css2?family=Mitr&display=swap');
body {
font-family: 'Mitr', sans-serif;
}
.header-home {
background-color: red;
color: aliceblue;
position: "fixed";
width: "100%";
font-size: 20px;
......
.logo {
float: left;
color: rgb(255, 255, 255);
font-size: 100 px;
font-weight: bold;
}
.site-layout .site-layout-background {
background: #fff;
}
\ No newline at end of file
float: left;
color: rgb(255, 255, 255);
font-size: 100 px;
font-weight: bold;
}
.site-layout .site-layout-background {
background: #fff;
}
.footer {
background-color: #001529;
color: aliceblue;
}
.footer p {
text-align: center;
}
.title {
text-align: center;
font-size: 25px;
font-weight: bold;
padding: 10px 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
font-weight: bold;
}
.map {
height: 300px;
height: 300px;
}
.div-time{
padding: 10px 15px;
}
\ No newline at end of file
.div-time {
padding: 10px 15px;
}
@import "Layouts/header.less";
@import "Home/index.less";
@import "Registion/index.less";
\ No newline at end of file
@import "Registion/index.less";
@import "pages/getstartes.less";
\ No newline at end of file
.getstart-box {
height: 75vh;
justify-content: center;
align-items: center;
}
.div-box-title {
animation: fadeIn linear 1.5s;
}
.getstart-box .div-box-title .box-button {
margin-top: 100px;
}
.bt-register {
border: 1px solid #333;
padding: 10px;
font-weight: bold;
}
.bt-register .text-register {
color: #333;
}
.bt-register:hover .text-register:hover {
color: rgb(211, 0, 0);
}
.bt-register:hover {
cursor: pointer;
}
.bt-login {
padding: 10px;
border: 1px solid #333;
background-color: red;
font-weight: bold;
}
.bt-login:hover {
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.bt-login .text-login {
color: rgb(204, 204, 204);
}
.bt-login:hover .text-login:hover {
color: rgb(17, 17, 17);
}
// Content css
.content-box {
height: auto;
padding: 10px;
}
.box-text-title {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn linear 3s;
}
.Col-content {
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.Col-content:hover {
animation: fadeIn2 linear 1s;
cursor: default;
}
// Footer
.footer-content {
padding: 10px;
margin-top: 10px;
height: 20%;
width: 100%;
background-color: #780650;
}
.box1 {
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
padding: 20px 30px 20px 30px;
}
.box2-button {
border: 3px solid rgb(255, 255, 255);
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.box2-button:hover {
cursor: pointer;
background-color: aliceblue;
}
.bt2-register {
color: rgb(189, 189, 189);
font-weight: bold;
}
.bt2-register:hover {
color: rgb(0, 14, 26);
}
// Animation
@keyframes fadeIn {
from {
transform: translateY(10%);
opacity: 0%;
}
to {
transform: translateY(0%);
opacity: 100%;
}
}
@keyframes fadeIn2 {
from {
transform: translateY(5%);
opacity: 50%;
}
to {
transform: translateY(0%);
opacity: 100%;
}
}
// Phone Screen
.h-100 {
height: 100%;
}
.h-auto {
height: auto;
}
......@@ -3,6 +3,8 @@ import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import './assets/less/theme.less';
import './assets/fonts/index.css'
ReactDOM.render(
<Suspense fallback="loading">
......
// Router
import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
// import Ecommerce from "../view/Dashboards/ecommerce";
import HeaderTap from "../Layouts/tabHeader";
import MenuList from "../Layouts/menulist";
// import HeaderTap from "../Layouts/tabHeader";
// import MenuList from "../Layouts/menulist";
//import
import Login from "../view/Login";
// import Home from "../view/Homes/index";
import Home from "../view/Homes/index";
import RegistionPage from "../view/Registion";
// import Login from "../view/Login";
// import RegistionPage from "../view/Registion";
import { Layout } from "antd";
// Routes
import { Routes } from "./routes";
const { Content, Footer } = Layout;
// Layouts
import VerticalLayout from "../Layouts/VerticalLayout";
import FullLayout from "../Layouts/FullLayout";
// Components
import ProtectedRoute from "../ProtectdRoute";
// import { Layout } from "antd";
// const { Content, Footer } = Layout;
export default function Routers() {
return (
<>
<HeaderTap
className="site-layout-background"
style={{ padding: 0, position: "fixed", zIndex: 1, width: "100%" }}
/>
<Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
<MenuList />
// Default Layout
const DefaultLayout = null; // FullLayout or VerticalLayout
<Layout className="site-layout">
<Content style={{ margin: "0 16px" }}>
<div
className="site-layout-background"
style={{ padding: 24, mixHeight: 360 }}
>
<AppRouter>
<Switch>
<Route
exact
path={"/login"}
render={() => {
return <Login />;
}}
/>
// All of the available layouts
const Layouts = { VerticalLayout, FullLayout };
<Route
exact
path={"/registion"}
render={() => {
return <RegistionPage />;
}}
/>
<Route
// Return Filtered Array of Routes & Paths
const LayoutRoutesAndPaths = (layout) => {
const LayoutRoutes = [];
const LayoutPaths = [];
if (Routes) {
// Checks if Route layout or Default layout matches current layout
Routes.filter(
(route) =>
(route.layout === layout || DefaultLayout === layout) &&
(LayoutRoutes.push(route), LayoutPaths.push(route.path))
);
}
return { LayoutRoutes, LayoutPaths };
};
// Return Route to Render
const ResolveRoutes = () => {
return Object.keys(Layouts).map((layout, index) => {
const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
const LayoutTag = Layouts[layout];
return (
<Route path={LayoutPaths} key={index}>
<LayoutTag>
<Switch>
{LayoutRoutes.map((route) => {
return (
<ProtectedRoute
key={route.path}
path={route.path}
exact
path={"/"}
render={() => {
return <Home />;
}}
component={route.component}
/>
</Switch>
</AppRouter>
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
</>
);
})}
</Switch>
</LayoutTag>
</Route>
);
});
};
return (
<AppRouter>
<Switch>{ResolveRoutes()}</Switch>
</AppRouter>
);
}
import { lazy } from 'react'
import { lazy } from "react";
const PagesRoutes = [
// Dashboard
{
path: '/Dashboard',
component: lazy(() => import('../../view/Dashboards/ecommerce')),
layout: 'VerticalLayout',
}
]
export default PagesRoutes
\ No newline at end of file
// Dashboard
// Get Start
{
path: "/",
component: lazy(() => import("../../view/Pages/GetStarted")),
layout: "VerticalLayout",
},
// Landing Register Page
{
path: "/registion",
component: lazy(() => import("../../view/Pages/Register")),
layout: "VerticalLayout",
},
// Register
{
path: "/register",
component: lazy(() => import("../../view/Registion/Registion")),
layout: "VerticalLayout",
},
// Login
{
path: "/login",
component: lazy(() => import("../../view/Login")),
layout: "VerticalLayout",
},
// Report
{
path: "/reported",
component: lazy(() => import("../../view/Pages/Report/index")),
layout: "VerticalLayout",
},
// Search Repair Shop
{
path: "/search",
component: lazy(() => import("../../view/Pages/CustomerService/RepairShop/index")),
layout: "VerticalLayout",
},
// Check Status
{
path: "/status",
component: lazy(() => import("../../view/Pages/CustomerService/RepairStatus/index")),
layout: "VerticalLayout",
},
// pages 404
{
path: '/pages/error-404',
component: lazy(() => import('../../view/Errors/404/index')),
layout: 'FullLayout',
},
];
export default PagesRoutes;
import React from 'react';
export default function App () {
return (
<>
error 404
</>
)
}
\ No newline at end of file
// import liff from "@line/liff";
import { React, Fragment } from "react";
import React, { useEffect, useState, useRef } from "react";
import { Form, Input, Button, Checkbox, Row, Col, Divider } from "antd";
import { Form, Input, Button, Row, Col, Divider } from "antd";
import { sendLogin } from '../../services'
import BIRDS from "vanta/dist/vanta.birds.min";
import { sendLogin } from "../../services";
function App() {
console.log(process.env.REACT_APP_SECRET_API);
const [vantaEffect, setVantaEffect] = useState(0);
const myRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
BIRDS({
el: myRef.current,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
const onFinish = (values) => {
const data = {
garageID : values.garageID,
password : values.password
}
console.log(data)
garageID: values.garageID,
password: values.password,
};
console.log(data);
sendLogin(data).then((response) => console.log('response', response))
sendLogin(data).then((response) => console.log("response", response));
};
return (
<Fragment>
<Row>
<div className="h-100" ref={myRef}>
<Row >
<Col
span={6}
span={4}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
......@@ -82,17 +103,6 @@ function App() {
<Input.Password />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
......@@ -100,7 +110,7 @@ function App() {
}}
>
<Button type="primary" htmlType="submit">
Submit
ยืนยัน
</Button>
</Form.Item>
</Form>
......@@ -113,7 +123,7 @@ function App() {
lg={{ order: 4 }}
></Col>
</Row>
</Fragment>
</div>
);
}
......
import React from 'react';
export default function App () {
return (
<>
Repairshop
</>
)
}
\ No newline at end of file
import React from 'react';
export default function App () {
return (
<>
Repair Status
</>
)
}
\ No newline at end of file
import React, { useState } from "react";
import { Row, Col, Typography, Image } from "antd";
// Import Images 264098267_614589809650713_7432399148669275975_n.png
import reportImg from "../../../../assets/images/Example/263773393_1270118020174602_2666156037006331548_n.png";
import userUseImg from "../../../../assets/images/Example/264098267_614589809650713_7432399148669275975_n.png";
import detailImg from "../../../../assets/images/Example/266805480_2127046747444617_6752024179146129762_n.png";
const { Title, Text } = Typography;
function App() {
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(false);
const [visible4, setVisible4] = useState(false);
return (
<Row gutter={[16, 16]} className="content-box">
<Col span={24} className="box-text-title">
<Title level={4}>รูปตัวอย่างการใช้งาน</Title>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 6, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
className="Col-content"
>
<div>
<div></div>
<Image
preview={{ visible1: false }}
width={200}
src={reportImg}
onClick={() => setVisible1(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible1, onVisibleChange: (vis) => setVisible1(vis) }}
>
<Image src={reportImg} />
</Image.PreviewGroup>
</div>
<Text>รูปการเพิ่มรายละเอียดของการซ่อม</Text>
</div>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 4, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
span={8}
className="Col-content"
>
<div>
<Image
preview={{ visible2: false }}
width={200}
src={detailImg}
onClick={() => setVisible2(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible2, onVisibleChange: (vis) => setVisible2(vis) }}
>
<Image src={detailImg} />
</Image.PreviewGroup>
</div>
<Text>รูปแสดงหน้าหลักของระบบ</Text>
</div>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 6, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
span={8}
className="Col-content"
>
<div>
<Image
preview={{ visible3: false }}
width={200}
src={reportImg}
onClick={() => setVisible3(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible3, onVisibleChange: (vis) => setVisible3(vis) }}
>
<Image src={reportImg} />
</Image.PreviewGroup>
</div>
<Text>รูปแสดงรายละเอียดของร้าน</Text>
</div>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 4, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
className="Col-content"
>
<div>
<Image
preview={{ visible4: false }}
width={200}
src={userUseImg}
onClick={() => setVisible4(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible4, onVisibleChange: (vis) => setVisible4(vis) }}
>
<Image src={userUseImg} />
</Image.PreviewGroup>
</div>
<Text>รูปหน้าบริการลูกค้า</Text>
</div>
</Col>
</Row>
);
}
export default App;
import React from "react";
import { Row, Col, Typography } from "antd";
// icon
import {
SearchOutlined,
CloudServerOutlined,
ControlOutlined,
ToolOutlined,
PieChartOutlined,
SmileOutlined,
LikeOutlined,
PushpinOutlined,
CommentOutlined,
} from "@ant-design/icons";
const { Title, Text } = Typography;
function App() {
return (
<Row gutter={[0, 16]} className="content-box">
<Col span={24} className="box-text-title">
<Title level={4}>คุณสมบัติของระบบ</Title>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<CloudServerOutlined style={{ fontSize: "250%" }} />
<Title level={5}> จัดเก็บข้อมูเข้าสู่ระบบส่วนกลาง </Title>
<Text>
การจัดเก็บข้อมูลเข้าส่วนกลางทำให้สามารถแชร์ฐานข้อมูลให้กับร้านค้าที่มีอยู่ในระบบ
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
span={8}
className="Col-content"
>
<div>
<SearchOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ติดตามสถานะการซ่อม </Title>
<Text>
การจัดเก็บข้อมูลเข้าส่วนกลางทำให้ลูกค้าสามารถรู้ถึงสถานะงานซ่อมแต่ละงานได้โดยไม่ต้องออกไปตามถึงหน้างาน
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
span={8}
className="Col-content"
>
<div>
<ControlOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ลดขั้นตอนในการทำงาน </Title>
<Text>
ช่วยลดขั้นตอนของการทำงานลงเมื่อต้องตรวจเช็คสภาพอย่างละเอียดอีกครั้ง
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<ToolOutlined style={{ fontSize: "250%" }} />
<Title level={5}> จัดการการซ่อม </Title>
<Text>
บันทึกข้อมูลของการซ่อมแต่ละครั้งเข้าระบบส่วนกลาง
เพื่อแชร์ฐานข้อมูลและง่ายต่อการซ่อมในครั้งถัดไป
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<PieChartOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ชุดรายงานที่ครอบคลุม </Title>
<Text>
มีชุดรายงานที่ครอบคลุมทุกด้าน จัดเป็นหมวดหมู่ แสดงผลสวยงาม
ตอบสนองทุกมุมมองของทางร้าน
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<CommentOutlined style={{ fontSize: "250%" }} />
<Title level={5}> แจ้งปัญหากับผู้ดูแลระบบ </Title>
<Text>
หากพบปัญหาการใช้งาน สามารถแจ้งปัญหากับผู้ดูแลระบบได้โดยตรง
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<PushpinOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ค้นหาร้านซ่อม </Title>
<Text>
ลูกค้าสามารถค้นหาร้านซ่อมที่อยู่ในระบบ
ทำให้ดึงดูดลูกค้าให้มาใช้บริการร้านของท่าน
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<LikeOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ง่ายต่อการใช้งาน </Title>
<Text>
รูปแบบของระบบมีความเรียบง่าย สามารถได้ง่ายและเรียนรู้การทำงานได้ไว
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<SmileOutlined style={{ fontSize: "250%" }} />
<Title level={5}> สามารถใช้งานได้ฟรี </Title>
<Text>
ผู้ใช้สามารถใช้งานระบบได้ฟรีโดยไม่มีค่าใช้จ่าย
และสามารถลงทะเบียนออนไลน์เริ่มใช้งานได้ทันที
</Text>
</div>
</Col>
</Row>
);
}
export default App;
import React from "react";
import { Link } from "react-router-dom";
import { Row, Col, Typography } from "antd";
const { Title, Text } = Typography;
function App() {
return (
<Row className="footer-content">
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 6, offset: 2 }}
className="Col-footer"
>
<div className="box1">
<Col span={24} className="box1-box-title">
<Title level={3} style={{ color: "rgb(189, 189, 189)" }}>
Repair Center
</Title>
<Text style={{ color: "rgb(189, 189, 189)" }}>
ระบบจัดการร้านซ่อมและศูนย์บริการ
</Text>
</Col>
</div>
</Col>
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 12, offset: 4 }}
className="Col-footer"
>
<div className="box2">
<Row className="box2-button">
<Col span={24} className="bt2-register">
<Link to={"/register"}>เริ่มใช้งานทันที</Link>
</Col>
</Row>
</div>
</Col>
</Row>
);
}
export default App;
import React, { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { Row, Col, Typography } from "antd";
import BIRDS from "vanta/dist/vanta.birds.min";
const { Title } = Typography;
function App() {
const [vantaEffect, setVantaEffect] = useState(0);
const myRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
BIRDS({
el: myRef.current,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
color1: 0x87,
color2: 0x0,
birdSize: 0.8,
quantity: 4.2,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
return (
<Row ref={myRef} className="getstart-box">
<div className="div-box-title">
<Col span={24} className="getstart-box-title">
<Title>Repair Center</Title>
<Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
<Title level={5}>
เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
</Title>
<Row className="box-button">
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 10, offset: 2 }}
className="bt-register"
>
<Link className="text-register" to={"/register"}>ลงทะเบียนใช้งานฟรี</Link>
</Col>
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 10, offset: 2 }}
className="bt-login"
>
<Link className="text-login" to={"/login"}>เข้าสู่ระบบ</Link>
</Col>
</Row>
</Col>
</div>
</Row>
);
}
export default App;
import React from "react";
import { Divider } from "antd";
// Import Component
import Titles from "./Title";
import Contents from "./Contents";
import ContentImage from "./ContentImage";
import Footers from './Footers'
export default function App(props) {
return (
<>
<Titles />
<Divider />
<Contents />
<Divider />
<ContentImage />
<Footers />
</>
);
}
import React from 'react';
export default function App () {
return (
<>
register
</>
)
}
\ No newline at end of file
import React from 'react';
export default function App () {
return (
<>
Reported
</>
)
}
\ No newline at end of file
This diff is collapsed.
......@@ -30,7 +30,7 @@ import {
return (
<Col md={24} span={24}>
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYQsoMGSxKVOe6vilIiEedgPhRDjcPbC8&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />}
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment