fix: not-found handling, contact page, lint error, bug cannot build, unused component and css, etc
This commit is contained in:
parent
56c2571329
commit
fe3292f659
@ -38,11 +38,10 @@ export default async function ContactPage() {
|
||||
</section>
|
||||
|
||||
<section className="page-section scrollSpysection" id="contact">
|
||||
<Contact>
|
||||
<Contact />
|
||||
<Suspense fallback={<></>}>
|
||||
<ContactForm />
|
||||
</Suspense>
|
||||
</Contact>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
// "use client";
|
||||
import Hero6 from "@/components/Hero";
|
||||
import Hero from "@/components/Hero";
|
||||
|
||||
// const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
|
||||
// ssr: false,
|
||||
// });
|
||||
|
||||
export default function Home1BGVideoMultiPage() {
|
||||
export default function HomeBgVideo() {
|
||||
return (
|
||||
<>
|
||||
<div className="theme-main">
|
||||
<div className="page" id="top">
|
||||
<main id="main">
|
||||
<div className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 bg-[url(/assets/images/full-width-images/section-bg-13.jpeg)]">
|
||||
<Hero6 />
|
||||
<Hero />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
39
src/app/(main)/not-found.tsx
Normal file
39
src/app/(main)/not-found.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<section
|
||||
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5"
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
|
||||
}}
|
||||
id="home"
|
||||
>
|
||||
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
|
||||
{/* Home Section Content */}
|
||||
<div className="home-content">
|
||||
<div className="row">
|
||||
<div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<div className="hs-wrap">
|
||||
<div className="wow fadeInUp" data-wow-delay=".1s">
|
||||
<h1 className="hs-title-12 mb-40 mb-sm-30">404</h1>
|
||||
</div>
|
||||
<div className="mb-40 mb-sm-30 wow fadeInUp" data-wow-delay=".2s">
|
||||
<h2 className="section-descr mb-20">The page you were looking for could not be found.</h2>
|
||||
</div>
|
||||
<div className="local-scroll wow fadeInUp" data-wow-delay=".3s">
|
||||
<Link href={`/`} className="btn btn-mod btn-w btn-round btn-medium btn-hover-anim">
|
||||
<i className="mi-arrow-left align-center mr-5" />
|
||||
<span>Back To Home Page</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Home Section Content */}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
"use client";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { init_wow } from "@/utils/initWow";
|
||||
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
|
||||
import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
|
||||
import "@/app/globals.css";
|
||||
import "swiper/css";
|
||||
import "jarallax/dist/jarallax.min.css";
|
||||
import "swiper/css/effect-fade";
|
||||
import "react-modal-video/css/modal-video.css";
|
||||
import "photoswipe/dist/photoswipe.css";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import "@public/assets/css/styles.css";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const path = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
init_wow();
|
||||
parallaxMouseMovement();
|
||||
const mainNav = document.querySelector(".main-nav");
|
||||
if (mainNav?.classList.contains("transparent")) {
|
||||
mainNav.classList.add("js-transparent");
|
||||
} else if (!mainNav?.classList?.contains("dark")) {
|
||||
mainNav?.classList.add("js-no-transparent-white");
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", headerChangeOnScroll);
|
||||
parallaxScroll();
|
||||
return () => {
|
||||
window.removeEventListener("scroll", headerChangeOnScroll);
|
||||
};
|
||||
}, [path]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
// Import the script only on the client side
|
||||
// @ts-ignore
|
||||
import("bootstrap/dist/js/bootstrap.esm").then(() => {
|
||||
// Module is imported, you can access any exported functionality if
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
"use client";
|
||||
import Header from "@/components/Header";
|
||||
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
|
||||
import { navMenuData } from "@/data/menu";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="theme-slick">
|
||||
<div className="page" id="top">
|
||||
<nav className="main-nav dark transparent stick-fixed wow-menubar wch-unset">
|
||||
<Header links={navMenuData} />
|
||||
</nav>
|
||||
<main id="main">
|
||||
<div className="theme-main">
|
||||
<div className="page" id="top">
|
||||
<>
|
||||
{/* End Navigation Panel */}
|
||||
<main id="main">
|
||||
{/* Home Section */}
|
||||
<section
|
||||
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5"
|
||||
style={{
|
||||
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
|
||||
}}
|
||||
id="home"
|
||||
>
|
||||
<div className="container min-height-100vh d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
|
||||
{/* Home Section Content */}
|
||||
<div className="home-content">
|
||||
<div className="row">
|
||||
<div className="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<div className="hs-wrap">
|
||||
<div className="wow fadeInUp" data-wow-delay=".1s">
|
||||
<h1 className="hs-title-12 mb-40 mb-sm-30">404</h1>
|
||||
</div>
|
||||
<div className="mb-40 mb-sm-30 wow fadeInUp" data-wow-delay=".2s">
|
||||
<h2 className="section-descr mb-20">
|
||||
The page you were looking for could not be found.
|
||||
</h2>
|
||||
</div>
|
||||
<div className="local-scroll wow fadeInUp" data-wow-delay=".3s">
|
||||
<Link href={`/`} className="btn btn-mod btn-w btn-round btn-medium btn-hover-anim">
|
||||
<i className="mi-arrow-left align-center mr-5" />
|
||||
<span>Back To Home Page</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Home Section Content */}
|
||||
</div>
|
||||
</section>
|
||||
{/* End Home Section */}
|
||||
</main>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
<BeforeFooterBlock showLinier={false} />
|
||||
</main>
|
||||
{/* <footer className="page-section dark footer bg-dark-2 light-content position-relative overflow-hidden pb-30">
|
||||
<div className="bg-shape-4 opacity-003">
|
||||
<Image src="/assets/images/demo-slick/bg-shape-4.svg" width={1600} height={268} alt="" />
|
||||
</div> */}
|
||||
<Footer />
|
||||
{/* </footer> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
@use '../shared.scss';
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
margin-bottom: var(--base);
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reactSelect {
|
||||
display: flex;
|
||||
|
||||
:global {
|
||||
div.rs__control {
|
||||
@include shared.formInput;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rs__input-container {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__value-container {
|
||||
padding: 0;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rs__single-value {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__indicators {
|
||||
position: absolute;
|
||||
top: calc(var(--base) * 0.9);
|
||||
right: calc(var(--base) * 0.9);
|
||||
.arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator {
|
||||
padding: 0px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rs__menu {
|
||||
color: var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
z-index: 2;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
|
||||
}
|
||||
|
||||
.rs__menu-list {
|
||||
padding: calc(var(--base) / 4) 0;
|
||||
}
|
||||
|
||||
.rs__group-heading {
|
||||
margin-bottom: calc(var(--base) / 2);
|
||||
}
|
||||
|
||||
.rs__option {
|
||||
font-size: 1rem;
|
||||
padding: calc(var(--base) / 2) var(--base);
|
||||
|
||||
&--is-focused {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
&--is-selected {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__multi-value {
|
||||
padding: 0;
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.rs__multi-value__label {
|
||||
max-width: 150px;
|
||||
color: var(--color-black);
|
||||
padding: calc(var(--base) / 8) calc(var(--base) / 4);
|
||||
}
|
||||
|
||||
.rs__multi-value__remove {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-black);
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__clear-indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import type { CountryField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
import { Controller } from "react-hook-form";
|
||||
import ReactSelect from "react-select";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
import { countryOptions } from "./options";
|
||||
|
||||
export const Country: React.FC<
|
||||
{
|
||||
control: Control<FieldValues, any>;
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
} & CountryField
|
||||
> = ({ name, control, errors, label, required, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className={classes.select}>
|
||||
<label className={classes.label} htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name={name}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<ReactSelect
|
||||
className={classes.reactSelect}
|
||||
classNamePrefix="rs"
|
||||
inputId={name}
|
||||
instanceId={name}
|
||||
onChange={(val) => onChange(val ? val.value : "")}
|
||||
options={countryOptions}
|
||||
value={countryOptions.find((c) => c.value === value)}
|
||||
/>
|
||||
)}
|
||||
rules={{ required }}
|
||||
/>
|
||||
{required && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
@ -1,982 +0,0 @@
|
||||
export const countryOptions = [
|
||||
{
|
||||
label: 'Afghanistan',
|
||||
value: 'AF',
|
||||
},
|
||||
{
|
||||
label: 'Åland Islands',
|
||||
value: 'AX',
|
||||
},
|
||||
{
|
||||
label: 'Albania',
|
||||
value: 'AL',
|
||||
},
|
||||
{
|
||||
label: 'Algeria',
|
||||
value: 'DZ',
|
||||
},
|
||||
{
|
||||
label: 'American Samoa',
|
||||
value: 'AS',
|
||||
},
|
||||
{
|
||||
label: 'Andorra',
|
||||
value: 'AD',
|
||||
},
|
||||
{
|
||||
label: 'Angola',
|
||||
value: 'AO',
|
||||
},
|
||||
{
|
||||
label: 'Anguilla',
|
||||
value: 'AI',
|
||||
},
|
||||
{
|
||||
label: 'Antarctica',
|
||||
value: 'AQ',
|
||||
},
|
||||
{
|
||||
label: 'Antigua and Barbuda',
|
||||
value: 'AG',
|
||||
},
|
||||
{
|
||||
label: 'Argentina',
|
||||
value: 'AR',
|
||||
},
|
||||
{
|
||||
label: 'Armenia',
|
||||
value: 'AM',
|
||||
},
|
||||
{
|
||||
label: 'Aruba',
|
||||
value: 'AW',
|
||||
},
|
||||
{
|
||||
label: 'Australia',
|
||||
value: 'AU',
|
||||
},
|
||||
{
|
||||
label: 'Austria',
|
||||
value: 'AT',
|
||||
},
|
||||
{
|
||||
label: 'Azerbaijan',
|
||||
value: 'AZ',
|
||||
},
|
||||
{
|
||||
label: 'Bahamas',
|
||||
value: 'BS',
|
||||
},
|
||||
{
|
||||
label: 'Bahrain',
|
||||
value: 'BH',
|
||||
},
|
||||
{
|
||||
label: 'Bangladesh',
|
||||
value: 'BD',
|
||||
},
|
||||
{
|
||||
label: 'Barbados',
|
||||
value: 'BB',
|
||||
},
|
||||
{
|
||||
label: 'Belarus',
|
||||
value: 'BY',
|
||||
},
|
||||
{
|
||||
label: 'Belgium',
|
||||
value: 'BE',
|
||||
},
|
||||
{
|
||||
label: 'Belize',
|
||||
value: 'BZ',
|
||||
},
|
||||
{
|
||||
label: 'Benin',
|
||||
value: 'BJ',
|
||||
},
|
||||
{
|
||||
label: 'Bermuda',
|
||||
value: 'BM',
|
||||
},
|
||||
{
|
||||
label: 'Bhutan',
|
||||
value: 'BT',
|
||||
},
|
||||
{
|
||||
label: 'Bolivia',
|
||||
value: 'BO',
|
||||
},
|
||||
{
|
||||
label: 'Bosnia and Herzegovina',
|
||||
value: 'BA',
|
||||
},
|
||||
{
|
||||
label: 'Botswana',
|
||||
value: 'BW',
|
||||
},
|
||||
{
|
||||
label: 'Bouvet Island',
|
||||
value: 'BV',
|
||||
},
|
||||
{
|
||||
label: 'Brazil',
|
||||
value: 'BR',
|
||||
},
|
||||
{
|
||||
label: 'British Indian Ocean Territory',
|
||||
value: 'IO',
|
||||
},
|
||||
{
|
||||
label: 'Brunei Darussalam',
|
||||
value: 'BN',
|
||||
},
|
||||
{
|
||||
label: 'Bulgaria',
|
||||
value: 'BG',
|
||||
},
|
||||
{
|
||||
label: 'Burkina Faso',
|
||||
value: 'BF',
|
||||
},
|
||||
{
|
||||
label: 'Burundi',
|
||||
value: 'BI',
|
||||
},
|
||||
{
|
||||
label: 'Cambodia',
|
||||
value: 'KH',
|
||||
},
|
||||
{
|
||||
label: 'Cameroon',
|
||||
value: 'CM',
|
||||
},
|
||||
{
|
||||
label: 'Canada',
|
||||
value: 'CA',
|
||||
},
|
||||
{
|
||||
label: 'Cape Verde',
|
||||
value: 'CV',
|
||||
},
|
||||
{
|
||||
label: 'Cayman Islands',
|
||||
value: 'KY',
|
||||
},
|
||||
{
|
||||
label: 'Central African Republic',
|
||||
value: 'CF',
|
||||
},
|
||||
{
|
||||
label: 'Chad',
|
||||
value: 'TD',
|
||||
},
|
||||
{
|
||||
label: 'Chile',
|
||||
value: 'CL',
|
||||
},
|
||||
{
|
||||
label: 'China',
|
||||
value: 'CN',
|
||||
},
|
||||
{
|
||||
label: 'Christmas Island',
|
||||
value: 'CX',
|
||||
},
|
||||
{
|
||||
label: 'Cocos (Keeling) Islands',
|
||||
value: 'CC',
|
||||
},
|
||||
{
|
||||
label: 'Colombia',
|
||||
value: 'CO',
|
||||
},
|
||||
{
|
||||
label: 'Comoros',
|
||||
value: 'KM',
|
||||
},
|
||||
{
|
||||
label: 'Congo',
|
||||
value: 'CG',
|
||||
},
|
||||
{
|
||||
label: 'Congo, The Democratic Republic of the',
|
||||
value: 'CD',
|
||||
},
|
||||
{
|
||||
label: 'Cook Islands',
|
||||
value: 'CK',
|
||||
},
|
||||
{
|
||||
label: 'Costa Rica',
|
||||
value: 'CR',
|
||||
},
|
||||
{
|
||||
label: "Cote D'Ivoire",
|
||||
value: 'CI',
|
||||
},
|
||||
{
|
||||
label: 'Croatia',
|
||||
value: 'HR',
|
||||
},
|
||||
{
|
||||
label: 'Cuba',
|
||||
value: 'CU',
|
||||
},
|
||||
{
|
||||
label: 'Cyprus',
|
||||
value: 'CY',
|
||||
},
|
||||
{
|
||||
label: 'Czech Republic',
|
||||
value: 'CZ',
|
||||
},
|
||||
{
|
||||
label: 'Denmark',
|
||||
value: 'DK',
|
||||
},
|
||||
{
|
||||
label: 'Djibouti',
|
||||
value: 'DJ',
|
||||
},
|
||||
{
|
||||
label: 'Dominica',
|
||||
value: 'DM',
|
||||
},
|
||||
{
|
||||
label: 'Dominican Republic',
|
||||
value: 'DO',
|
||||
},
|
||||
{
|
||||
label: 'Ecuador',
|
||||
value: 'EC',
|
||||
},
|
||||
{
|
||||
label: 'Egypt',
|
||||
value: 'EG',
|
||||
},
|
||||
{
|
||||
label: 'El Salvador',
|
||||
value: 'SV',
|
||||
},
|
||||
{
|
||||
label: 'Equatorial Guinea',
|
||||
value: 'GQ',
|
||||
},
|
||||
{
|
||||
label: 'Eritrea',
|
||||
value: 'ER',
|
||||
},
|
||||
{
|
||||
label: 'Estonia',
|
||||
value: 'EE',
|
||||
},
|
||||
{
|
||||
label: 'Ethiopia',
|
||||
value: 'ET',
|
||||
},
|
||||
{
|
||||
label: 'Falkland Islands (Malvinas)',
|
||||
value: 'FK',
|
||||
},
|
||||
{
|
||||
label: 'Faroe Islands',
|
||||
value: 'FO',
|
||||
},
|
||||
{
|
||||
label: 'Fiji',
|
||||
value: 'FJ',
|
||||
},
|
||||
{
|
||||
label: 'Finland',
|
||||
value: 'FI',
|
||||
},
|
||||
{
|
||||
label: 'France',
|
||||
value: 'FR',
|
||||
},
|
||||
{
|
||||
label: 'French Guiana',
|
||||
value: 'GF',
|
||||
},
|
||||
{
|
||||
label: 'French Polynesia',
|
||||
value: 'PF',
|
||||
},
|
||||
{
|
||||
label: 'French Southern Territories',
|
||||
value: 'TF',
|
||||
},
|
||||
{
|
||||
label: 'Gabon',
|
||||
value: 'GA',
|
||||
},
|
||||
{
|
||||
label: 'Gambia',
|
||||
value: 'GM',
|
||||
},
|
||||
{
|
||||
label: 'Georgia',
|
||||
value: 'GE',
|
||||
},
|
||||
{
|
||||
label: 'Germany',
|
||||
value: 'DE',
|
||||
},
|
||||
{
|
||||
label: 'Ghana',
|
||||
value: 'GH',
|
||||
},
|
||||
{
|
||||
label: 'Gibraltar',
|
||||
value: 'GI',
|
||||
},
|
||||
{
|
||||
label: 'Greece',
|
||||
value: 'GR',
|
||||
},
|
||||
{
|
||||
label: 'Greenland',
|
||||
value: 'GL',
|
||||
},
|
||||
{
|
||||
label: 'Grenada',
|
||||
value: 'GD',
|
||||
},
|
||||
{
|
||||
label: 'Guadeloupe',
|
||||
value: 'GP',
|
||||
},
|
||||
{
|
||||
label: 'Guam',
|
||||
value: 'GU',
|
||||
},
|
||||
{
|
||||
label: 'Guatemala',
|
||||
value: 'GT',
|
||||
},
|
||||
{
|
||||
label: 'Guernsey',
|
||||
value: 'GG',
|
||||
},
|
||||
{
|
||||
label: 'Guinea',
|
||||
value: 'GN',
|
||||
},
|
||||
{
|
||||
label: 'Guinea-Bissau',
|
||||
value: 'GW',
|
||||
},
|
||||
{
|
||||
label: 'Guyana',
|
||||
value: 'GY',
|
||||
},
|
||||
{
|
||||
label: 'Haiti',
|
||||
value: 'HT',
|
||||
},
|
||||
{
|
||||
label: 'Heard Island and Mcdonald Islands',
|
||||
value: 'HM',
|
||||
},
|
||||
{
|
||||
label: 'Holy See (Vatican City State)',
|
||||
value: 'VA',
|
||||
},
|
||||
{
|
||||
label: 'Honduras',
|
||||
value: 'HN',
|
||||
},
|
||||
{
|
||||
label: 'Hong Kong',
|
||||
value: 'HK',
|
||||
},
|
||||
{
|
||||
label: 'Hungary',
|
||||
value: 'HU',
|
||||
},
|
||||
{
|
||||
label: 'Iceland',
|
||||
value: 'IS',
|
||||
},
|
||||
{
|
||||
label: 'India',
|
||||
value: 'IN',
|
||||
},
|
||||
{
|
||||
label: 'Indonesia',
|
||||
value: 'ID',
|
||||
},
|
||||
{
|
||||
label: 'Iran, Islamic Republic Of',
|
||||
value: 'IR',
|
||||
},
|
||||
{
|
||||
label: 'Iraq',
|
||||
value: 'IQ',
|
||||
},
|
||||
{
|
||||
label: 'Ireland',
|
||||
value: 'IE',
|
||||
},
|
||||
{
|
||||
label: 'Isle of Man',
|
||||
value: 'IM',
|
||||
},
|
||||
{
|
||||
label: 'Israel',
|
||||
value: 'IL',
|
||||
},
|
||||
{
|
||||
label: 'Italy',
|
||||
value: 'IT',
|
||||
},
|
||||
{
|
||||
label: 'Jamaica',
|
||||
value: 'JM',
|
||||
},
|
||||
{
|
||||
label: 'Japan',
|
||||
value: 'JP',
|
||||
},
|
||||
{
|
||||
label: 'Jersey',
|
||||
value: 'JE',
|
||||
},
|
||||
{
|
||||
label: 'Jordan',
|
||||
value: 'JO',
|
||||
},
|
||||
{
|
||||
label: 'Kazakhstan',
|
||||
value: 'KZ',
|
||||
},
|
||||
{
|
||||
label: 'Kenya',
|
||||
value: 'KE',
|
||||
},
|
||||
{
|
||||
label: 'Kiribati',
|
||||
value: 'KI',
|
||||
},
|
||||
{
|
||||
label: "Democratic People's Republic of Korea",
|
||||
value: 'KP',
|
||||
},
|
||||
{
|
||||
label: 'Korea, Republic of',
|
||||
value: 'KR',
|
||||
},
|
||||
{
|
||||
label: 'Kosovo',
|
||||
value: 'XK',
|
||||
},
|
||||
{
|
||||
label: 'Kuwait',
|
||||
value: 'KW',
|
||||
},
|
||||
{
|
||||
label: 'Kyrgyzstan',
|
||||
value: 'KG',
|
||||
},
|
||||
{
|
||||
label: "Lao People's Democratic Republic",
|
||||
value: 'LA',
|
||||
},
|
||||
{
|
||||
label: 'Latvia',
|
||||
value: 'LV',
|
||||
},
|
||||
{
|
||||
label: 'Lebanon',
|
||||
value: 'LB',
|
||||
},
|
||||
{
|
||||
label: 'Lesotho',
|
||||
value: 'LS',
|
||||
},
|
||||
{
|
||||
label: 'Liberia',
|
||||
value: 'LR',
|
||||
},
|
||||
{
|
||||
label: 'Libyan Arab Jamahiriya',
|
||||
value: 'LY',
|
||||
},
|
||||
{
|
||||
label: 'Liechtenstein',
|
||||
value: 'LI',
|
||||
},
|
||||
{
|
||||
label: 'Lithuania',
|
||||
value: 'LT',
|
||||
},
|
||||
{
|
||||
label: 'Luxembourg',
|
||||
value: 'LU',
|
||||
},
|
||||
{
|
||||
label: 'Macao',
|
||||
value: 'MO',
|
||||
},
|
||||
{
|
||||
label: 'Macedonia, The Former Yugoslav Republic of',
|
||||
value: 'MK',
|
||||
},
|
||||
{
|
||||
label: 'Madagascar',
|
||||
value: 'MG',
|
||||
},
|
||||
{
|
||||
label: 'Malawi',
|
||||
value: 'MW',
|
||||
},
|
||||
{
|
||||
label: 'Malaysia',
|
||||
value: 'MY',
|
||||
},
|
||||
{
|
||||
label: 'Maldives',
|
||||
value: 'MV',
|
||||
},
|
||||
{
|
||||
label: 'Mali',
|
||||
value: 'ML',
|
||||
},
|
||||
{
|
||||
label: 'Malta',
|
||||
value: 'MT',
|
||||
},
|
||||
{
|
||||
label: 'Marshall Islands',
|
||||
value: 'MH',
|
||||
},
|
||||
{
|
||||
label: 'Martinique',
|
||||
value: 'MQ',
|
||||
},
|
||||
{
|
||||
label: 'Mauritania',
|
||||
value: 'MR',
|
||||
},
|
||||
{
|
||||
label: 'Mauritius',
|
||||
value: 'MU',
|
||||
},
|
||||
{
|
||||
label: 'Mayotte',
|
||||
value: 'YT',
|
||||
},
|
||||
{
|
||||
label: 'Mexico',
|
||||
value: 'MX',
|
||||
},
|
||||
{
|
||||
label: 'Micronesia, Federated States of',
|
||||
value: 'FM',
|
||||
},
|
||||
{
|
||||
label: 'Moldova, Republic of',
|
||||
value: 'MD',
|
||||
},
|
||||
{
|
||||
label: 'Monaco',
|
||||
value: 'MC',
|
||||
},
|
||||
{
|
||||
label: 'Mongolia',
|
||||
value: 'MN',
|
||||
},
|
||||
{
|
||||
label: 'Montenegro',
|
||||
value: 'ME',
|
||||
},
|
||||
{
|
||||
label: 'Montserrat',
|
||||
value: 'MS',
|
||||
},
|
||||
{
|
||||
label: 'Morocco',
|
||||
value: 'MA',
|
||||
},
|
||||
{
|
||||
label: 'Mozambique',
|
||||
value: 'MZ',
|
||||
},
|
||||
{
|
||||
label: 'Myanmar',
|
||||
value: 'MM',
|
||||
},
|
||||
{
|
||||
label: 'Namibia',
|
||||
value: 'NA',
|
||||
},
|
||||
{
|
||||
label: 'Nauru',
|
||||
value: 'NR',
|
||||
},
|
||||
{
|
||||
label: 'Nepal',
|
||||
value: 'NP',
|
||||
},
|
||||
{
|
||||
label: 'Netherlands',
|
||||
value: 'NL',
|
||||
},
|
||||
{
|
||||
label: 'Netherlands Antilles',
|
||||
value: 'AN',
|
||||
},
|
||||
{
|
||||
label: 'New Caledonia',
|
||||
value: 'NC',
|
||||
},
|
||||
{
|
||||
label: 'New Zealand',
|
||||
value: 'NZ',
|
||||
},
|
||||
{
|
||||
label: 'Nicaragua',
|
||||
value: 'NI',
|
||||
},
|
||||
{
|
||||
label: 'Niger',
|
||||
value: 'NE',
|
||||
},
|
||||
{
|
||||
label: 'Nigeria',
|
||||
value: 'NG',
|
||||
},
|
||||
{
|
||||
label: 'Niue',
|
||||
value: 'NU',
|
||||
},
|
||||
{
|
||||
label: 'Norfolk Island',
|
||||
value: 'NF',
|
||||
},
|
||||
{
|
||||
label: 'Northern Mariana Islands',
|
||||
value: 'MP',
|
||||
},
|
||||
{
|
||||
label: 'Norway',
|
||||
value: 'NO',
|
||||
},
|
||||
{
|
||||
label: 'Oman',
|
||||
value: 'OM',
|
||||
},
|
||||
{
|
||||
label: 'Pakistan',
|
||||
value: 'PK',
|
||||
},
|
||||
{
|
||||
label: 'Palau',
|
||||
value: 'PW',
|
||||
},
|
||||
{
|
||||
label: 'Palestinian Territory, Occupied',
|
||||
value: 'PS',
|
||||
},
|
||||
{
|
||||
label: 'Panama',
|
||||
value: 'PA',
|
||||
},
|
||||
{
|
||||
label: 'Papua New Guinea',
|
||||
value: 'PG',
|
||||
},
|
||||
{
|
||||
label: 'Paraguay',
|
||||
value: 'PY',
|
||||
},
|
||||
{
|
||||
label: 'Peru',
|
||||
value: 'PE',
|
||||
},
|
||||
{
|
||||
label: 'Philippines',
|
||||
value: 'PH',
|
||||
},
|
||||
{
|
||||
label: 'Pitcairn',
|
||||
value: 'PN',
|
||||
},
|
||||
{
|
||||
label: 'Poland',
|
||||
value: 'PL',
|
||||
},
|
||||
{
|
||||
label: 'Portugal',
|
||||
value: 'PT',
|
||||
},
|
||||
{
|
||||
label: 'Puerto Rico',
|
||||
value: 'PR',
|
||||
},
|
||||
{
|
||||
label: 'Qatar',
|
||||
value: 'QA',
|
||||
},
|
||||
{
|
||||
label: 'Reunion',
|
||||
value: 'RE',
|
||||
},
|
||||
{
|
||||
label: 'Romania',
|
||||
value: 'RO',
|
||||
},
|
||||
{
|
||||
label: 'Russian Federation',
|
||||
value: 'RU',
|
||||
},
|
||||
{
|
||||
label: 'Rwanda',
|
||||
value: 'RW',
|
||||
},
|
||||
{
|
||||
label: 'Saint Helena',
|
||||
value: 'SH',
|
||||
},
|
||||
{
|
||||
label: 'Saint Kitts and Nevis',
|
||||
value: 'KN',
|
||||
},
|
||||
{
|
||||
label: 'Saint Lucia',
|
||||
value: 'LC',
|
||||
},
|
||||
{
|
||||
label: 'Saint Pierre and Miquelon',
|
||||
value: 'PM',
|
||||
},
|
||||
{
|
||||
label: 'Saint Vincent and the Grenadines',
|
||||
value: 'VC',
|
||||
},
|
||||
{
|
||||
label: 'Samoa',
|
||||
value: 'WS',
|
||||
},
|
||||
{
|
||||
label: 'San Marino',
|
||||
value: 'SM',
|
||||
},
|
||||
{
|
||||
label: 'Sao Tome and Principe',
|
||||
value: 'ST',
|
||||
},
|
||||
{
|
||||
label: 'Saudi Arabia',
|
||||
value: 'SA',
|
||||
},
|
||||
{
|
||||
label: 'Senegal',
|
||||
value: 'SN',
|
||||
},
|
||||
{
|
||||
label: 'Serbia',
|
||||
value: 'RS',
|
||||
},
|
||||
{
|
||||
label: 'Seychelles',
|
||||
value: 'SC',
|
||||
},
|
||||
{
|
||||
label: 'Sierra Leone',
|
||||
value: 'SL',
|
||||
},
|
||||
{
|
||||
label: 'Singapore',
|
||||
value: 'SG',
|
||||
},
|
||||
{
|
||||
label: 'Slovakia',
|
||||
value: 'SK',
|
||||
},
|
||||
{
|
||||
label: 'Slovenia',
|
||||
value: 'SI',
|
||||
},
|
||||
{
|
||||
label: 'Solomon Islands',
|
||||
value: 'SB',
|
||||
},
|
||||
{
|
||||
label: 'Somalia',
|
||||
value: 'SO',
|
||||
},
|
||||
{
|
||||
label: 'South Africa',
|
||||
value: 'ZA',
|
||||
},
|
||||
{
|
||||
label: 'South Georgia and the South Sandwich Islands',
|
||||
value: 'GS',
|
||||
},
|
||||
{
|
||||
label: 'Spain',
|
||||
value: 'ES',
|
||||
},
|
||||
{
|
||||
label: 'Sri Lanka',
|
||||
value: 'LK',
|
||||
},
|
||||
{
|
||||
label: 'Sudan',
|
||||
value: 'SD',
|
||||
},
|
||||
{
|
||||
label: 'Suriname',
|
||||
value: 'SR',
|
||||
},
|
||||
{
|
||||
label: 'Svalbard and Jan Mayen',
|
||||
value: 'SJ',
|
||||
},
|
||||
{
|
||||
label: 'Swaziland',
|
||||
value: 'SZ',
|
||||
},
|
||||
{
|
||||
label: 'Sweden',
|
||||
value: 'SE',
|
||||
},
|
||||
{
|
||||
label: 'Switzerland',
|
||||
value: 'CH',
|
||||
},
|
||||
{
|
||||
label: 'Syrian Arab Republic',
|
||||
value: 'SY',
|
||||
},
|
||||
{
|
||||
label: 'Taiwan',
|
||||
value: 'TW',
|
||||
},
|
||||
{
|
||||
label: 'Tajikistan',
|
||||
value: 'TJ',
|
||||
},
|
||||
{
|
||||
label: 'Tanzania, United Republic of',
|
||||
value: 'TZ',
|
||||
},
|
||||
{
|
||||
label: 'Thailand',
|
||||
value: 'TH',
|
||||
},
|
||||
{
|
||||
label: 'Timor-Leste',
|
||||
value: 'TL',
|
||||
},
|
||||
{
|
||||
label: 'Togo',
|
||||
value: 'TG',
|
||||
},
|
||||
{
|
||||
label: 'Tokelau',
|
||||
value: 'TK',
|
||||
},
|
||||
{
|
||||
label: 'Tonga',
|
||||
value: 'TO',
|
||||
},
|
||||
{
|
||||
label: 'Trinidad and Tobago',
|
||||
value: 'TT',
|
||||
},
|
||||
{
|
||||
label: 'Tunisia',
|
||||
value: 'TN',
|
||||
},
|
||||
{
|
||||
label: 'Turkey',
|
||||
value: 'TR',
|
||||
},
|
||||
{
|
||||
label: 'Turkmenistan',
|
||||
value: 'TM',
|
||||
},
|
||||
{
|
||||
label: 'Turks and Caicos Islands',
|
||||
value: 'TC',
|
||||
},
|
||||
{
|
||||
label: 'Tuvalu',
|
||||
value: 'TV',
|
||||
},
|
||||
{
|
||||
label: 'Uganda',
|
||||
value: 'UG',
|
||||
},
|
||||
{
|
||||
label: 'Ukraine',
|
||||
value: 'UA',
|
||||
},
|
||||
{
|
||||
label: 'United Arab Emirates',
|
||||
value: 'AE',
|
||||
},
|
||||
{
|
||||
label: 'United Kingdom',
|
||||
value: 'GB',
|
||||
},
|
||||
{
|
||||
label: 'United States',
|
||||
value: 'US',
|
||||
},
|
||||
{
|
||||
label: 'United States Minor Outlying Islands',
|
||||
value: 'UM',
|
||||
},
|
||||
{
|
||||
label: 'Uruguay',
|
||||
value: 'UY',
|
||||
},
|
||||
{
|
||||
label: 'Uzbekistan',
|
||||
value: 'UZ',
|
||||
},
|
||||
{
|
||||
label: 'Vanuatu',
|
||||
value: 'VU',
|
||||
},
|
||||
{
|
||||
label: 'Venezuela',
|
||||
value: 'VE',
|
||||
},
|
||||
{
|
||||
label: 'Viet Nam',
|
||||
value: 'VN',
|
||||
},
|
||||
{
|
||||
label: 'Virgin Islands, British',
|
||||
value: 'VG',
|
||||
},
|
||||
{
|
||||
label: 'Virgin Islands, U.S.',
|
||||
value: 'VI',
|
||||
},
|
||||
{
|
||||
label: 'Wallis and Futuna',
|
||||
value: 'WF',
|
||||
},
|
||||
{
|
||||
label: 'Western Sahara',
|
||||
value: 'EH',
|
||||
},
|
||||
{
|
||||
label: 'Yemen',
|
||||
value: 'YE',
|
||||
},
|
||||
{
|
||||
label: 'Zambia',
|
||||
value: 'ZM',
|
||||
},
|
||||
{
|
||||
label: 'Zimbabwe',
|
||||
value: 'ZW',
|
||||
},
|
||||
]
|
||||
@ -1,7 +0,0 @@
|
||||
.gutterLeft {
|
||||
padding-left: var(--gutter-h);
|
||||
}
|
||||
|
||||
.gutterRight {
|
||||
padding-right: var(--gutter-h);
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import classes from "./index.scss";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
left?: boolean;
|
||||
ref?: React.Ref<HTMLDivElement>;
|
||||
right?: boolean;
|
||||
};
|
||||
|
||||
export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
|
||||
const { children, className, left = true, right = true, ref } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[left && classes.gutterLeft, right && classes.gutterRight, className].filter(Boolean).join(" ")}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
@use "../../css/queries.scss" as *;
|
||||
|
||||
.message {
|
||||
margin: var(--base) 0 var(--base) 0;
|
||||
|
||||
@include mid-break {
|
||||
margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import type { MessageField } from "@payloadcms/plugin-form-builder/types";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import RichText from "../RichText";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
|
||||
export const Message: React.FC<MessageField> = ({ message }) => {
|
||||
return (
|
||||
<Width width={100}>
|
||||
<RichText className={classes.message} content={message} />
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
@ -1,15 +0,0 @@
|
||||
@use '../shared.scss';
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
margin-bottom: var(--base);
|
||||
}
|
||||
|
||||
.input {
|
||||
@include shared.formInput;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
@ -5,7 +5,6 @@ import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
|
||||
export const Number: React.FC<
|
||||
{
|
||||
@ -19,11 +18,14 @@ export const Number: React.FC<
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className={classes.wrap}>
|
||||
<label className={classes.label} htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<input className={classes.input} id={name} type="number" {...register(name, { required: requiredFromProps })} />
|
||||
<div className="form-group pr-4">
|
||||
<label htmlFor={name}>{label}</label>
|
||||
<input
|
||||
type="number"
|
||||
id={name}
|
||||
className="input-lg input-circle form-control"
|
||||
{...register(name, { required: requiredFromProps })}
|
||||
/>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
@use '../shared.scss';
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
margin-bottom: var(--base);
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reactSelect {
|
||||
display: flex;
|
||||
|
||||
:global {
|
||||
div.rs__control {
|
||||
@include shared.formInput;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rs__input-container {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__value-container {
|
||||
padding: 0;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rs__single-value {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.rs__indicators {
|
||||
position: absolute;
|
||||
top: calc(var(--base) * 0.9);
|
||||
right: calc(var(--base) * 0.9);
|
||||
.arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator {
|
||||
padding: 0px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg path {
|
||||
fill: var(--color-dark-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rs__indicator-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rs__menu {
|
||||
color: var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
z-index: 2;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
|
||||
}
|
||||
|
||||
.rs__menu-list {
|
||||
padding: calc(var(--base) / 4) 0;
|
||||
}
|
||||
|
||||
.rs__group-heading {
|
||||
margin-bottom: calc(var(--base) / 2);
|
||||
}
|
||||
|
||||
.rs__option {
|
||||
font-size: 1rem;
|
||||
padding: calc(var(--base) / 2) var(--base);
|
||||
|
||||
&--is-focused {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
&--is-selected {
|
||||
background-color: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__multi-value {
|
||||
padding: 0;
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.rs__multi-value__label {
|
||||
max-width: 150px;
|
||||
color: var(--color-black);
|
||||
padding: calc(var(--base) / 8) calc(var(--base) / 4);
|
||||
}
|
||||
|
||||
.rs__multi-value__remove {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-black);
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.rs__clear-indicator {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import type { StateField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
import { Controller } from "react-hook-form";
|
||||
import ReactSelect from "react-select";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
import classes from "./index.scss";
|
||||
import { stateOptions } from "./options";
|
||||
|
||||
export const State: React.FC<
|
||||
{
|
||||
control: Control<FieldValues, any>;
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
} & StateField
|
||||
> = ({ name, control, errors, label, required, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className={classes.select}>
|
||||
<label className={classes.label} htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name={name}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<ReactSelect
|
||||
className={classes.reactSelect}
|
||||
classNamePrefix="rs"
|
||||
id={name}
|
||||
instanceId={name}
|
||||
onChange={(val) => onChange(val ? val.value : "")}
|
||||
options={stateOptions}
|
||||
value={stateOptions.find((t) => t.value === value)}
|
||||
/>
|
||||
)}
|
||||
rules={{ required }}
|
||||
/>
|
||||
{required && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
export const stateOptions = [
|
||||
{ label: 'Alabama', value: 'AL' },
|
||||
{ label: 'Alaska', value: 'AK' },
|
||||
{ label: 'Arizona', value: 'AZ' },
|
||||
{ label: 'Arkansas', value: 'AR' },
|
||||
{ label: 'California', value: 'CA' },
|
||||
{ label: 'Colorado', value: 'CO' },
|
||||
{ label: 'Connecticut', value: 'CT' },
|
||||
{ label: 'Delaware', value: 'DE' },
|
||||
{ label: 'Florida', value: 'FL' },
|
||||
{ label: 'Georgia', value: 'GA' },
|
||||
{ label: 'Hawaii', value: 'HI' },
|
||||
{ label: 'Idaho', value: 'ID' },
|
||||
{ label: 'Illinois', value: 'IL' },
|
||||
{ label: 'Indiana', value: 'IN' },
|
||||
{ label: 'Iowa', value: 'IA' },
|
||||
{ label: 'Kansas', value: 'KS' },
|
||||
{ label: 'Kentucky', value: 'KY' },
|
||||
{ label: 'Louisiana', value: 'LA' },
|
||||
{ label: 'Maine', value: 'ME' },
|
||||
{ label: 'Maryland', value: 'MD' },
|
||||
{ label: 'Massachusetts', value: 'MA' },
|
||||
{ label: 'Michigan', value: 'MI' },
|
||||
{ label: 'Minnesota', value: 'MN' },
|
||||
{ label: 'Mississippi', value: 'MS' },
|
||||
{ label: 'Missouri', value: 'MO' },
|
||||
{ label: 'Montana', value: 'MT' },
|
||||
{ label: 'Nebraska', value: 'NE' },
|
||||
{ label: 'Nevada', value: 'NV' },
|
||||
{ label: 'New Hampshire', value: 'NH' },
|
||||
{ label: 'New Jersey', value: 'NJ' },
|
||||
{ label: 'New Mexico', value: 'NM' },
|
||||
{ label: 'New York', value: 'NY' },
|
||||
{ label: 'North Carolina', value: 'NC' },
|
||||
{ label: 'North Dakota', value: 'ND' },
|
||||
{ label: 'Ohio', value: 'OH' },
|
||||
{ label: 'Oklahoma', value: 'OK' },
|
||||
{ label: 'Oregon', value: 'OR' },
|
||||
{ label: 'Pennsylvania', value: 'PA' },
|
||||
{ label: 'Rhode Island', value: 'RI' },
|
||||
{ label: 'South Carolina', value: 'SC' },
|
||||
{ label: 'South Dakota', value: 'SD' },
|
||||
{ label: 'Tennessee', value: 'TN' },
|
||||
{ label: 'Texas', value: 'TX' },
|
||||
{ label: 'Utah', value: 'UT' },
|
||||
{ label: 'Vermont', value: 'VT' },
|
||||
{ label: 'Virginia', value: 'VA' },
|
||||
{ label: 'Washington', value: 'WA' },
|
||||
{ label: 'West Virginia', value: 'WV' },
|
||||
{ label: 'Wisconsin', value: 'WI' },
|
||||
{ label: 'Wyoming', value: 'WY' },
|
||||
]
|
||||
@ -1,23 +0,0 @@
|
||||
.top-large {
|
||||
padding-top: var(--block-padding);
|
||||
}
|
||||
|
||||
.top-medium {
|
||||
padding-top: calc(var(--block-padding) / 2);
|
||||
}
|
||||
|
||||
.top-small {
|
||||
padding-top: calc(var(--block-padding) / 3);
|
||||
}
|
||||
|
||||
.bottom-large {
|
||||
padding-bottom: var(--block-padding);
|
||||
}
|
||||
|
||||
.bottom-medium {
|
||||
padding-bottom: calc(var(--block-padding) / 2);
|
||||
}
|
||||
|
||||
.bottom-small {
|
||||
padding-bottom: calc(var(--block-padding) / 3);
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import classes from "./index.scss";
|
||||
|
||||
export type VerticalPaddingOptions = "large" | "medium" | "none" | "small";
|
||||
|
||||
type Props = {
|
||||
bottom?: VerticalPaddingOptions;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
top?: VerticalPaddingOptions;
|
||||
};
|
||||
|
||||
export const VerticalPadding: React.FC<Props> = ({ bottom = "medium", children, className, top = "medium" }) => {
|
||||
return (
|
||||
<div className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]].filter(Boolean).join(" ")}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
@use "../../css/queries.scss" as *;
|
||||
|
||||
.width {
|
||||
padding-left: calc(var(--base) * 0.5);
|
||||
padding-right: calc(var(--base) * 0.5);
|
||||
|
||||
@include mid-break {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,8 @@
|
||||
import * as React from "react";
|
||||
|
||||
import classes from "./index.scss";
|
||||
|
||||
export const Width: React.FC<{
|
||||
children: React.ReactNode;
|
||||
width?: number;
|
||||
}> = ({ children, width }) => {
|
||||
return (
|
||||
<div className={classes.width} style={{ width: width ? `${width}%` : undefined }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return <div style={{ width: width ? `${width}%` : undefined }}>{children}</div>;
|
||||
};
|
||||
|
||||
@ -1,21 +1,15 @@
|
||||
import { Checkbox } from './Checkbox'
|
||||
import { Country } from './Country'
|
||||
import { Email } from './Email'
|
||||
import { Message } from './Message'
|
||||
import { Number } from './Number'
|
||||
import { Select } from './Select'
|
||||
import { State } from './State'
|
||||
import { Text } from './Text'
|
||||
import { Textarea } from './Textarea'
|
||||
import { Checkbox } from "./Checkbox";
|
||||
import { Email } from "./Email";
|
||||
import { Number } from "./Number";
|
||||
import { Select } from "./Select";
|
||||
import { Text } from "./Text";
|
||||
import { Textarea } from "./Textarea";
|
||||
|
||||
export const fields = {
|
||||
checkbox: Checkbox,
|
||||
country: Country,
|
||||
email: Email,
|
||||
message: Message,
|
||||
number: Number,
|
||||
select: Select,
|
||||
state: State,
|
||||
text: Text,
|
||||
textarea: Textarea,
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,129 +0,0 @@
|
||||
@use './queries.scss' as *;
|
||||
@use './colors.scss' as *;
|
||||
@use './type.scss' as *;
|
||||
|
||||
:root {
|
||||
--breakpoint-xs-width: #{$breakpoint-xs-width};
|
||||
--breakpoint-s-width: #{$breakpoint-s-width};
|
||||
--breakpoint-m-width: #{$breakpoint-m-width};
|
||||
--breakpoint-l-width: #{$breakpoint-l-width};
|
||||
--scrollbar-width: 17px;
|
||||
|
||||
--base: 24px;
|
||||
--font-body: system-ui;
|
||||
--font-mono: 'Roboto Mono', monospace;
|
||||
|
||||
--gutter-h: 180px;
|
||||
--block-padding: 120px;
|
||||
|
||||
--header-z-index: 100;
|
||||
--modal-z-index: 90;
|
||||
|
||||
@include large-break {
|
||||
--gutter-h: 144px;
|
||||
--block-padding: 96px;
|
||||
}
|
||||
|
||||
@include mid-break {
|
||||
--gutter-h: 24px;
|
||||
--block-padding: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// GLOBAL STYLES
|
||||
/////////////////////////////
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
@extend %body;
|
||||
background: var(--color-white);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-black);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-green);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--color-green);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %h1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %h2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %h4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %h5;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: var(--base) 0;
|
||||
|
||||
@include mid-break {
|
||||
margin: calc(var(--base) * 0.75) 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--base);
|
||||
margin: 0 0 var(--base);
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
:root {
|
||||
--color-red: rgb(255, 0, 0);
|
||||
--color-green: rgb(178, 255, 214);
|
||||
--color-white: rgb(255, 255, 255);
|
||||
--color-dark-gray: rgb(51, 52, 52);
|
||||
--color-mid-gray: rgb(196, 196, 196);
|
||||
--color-gray: rgb(212, 212, 212);
|
||||
--color-light-gray: rgb(244, 244, 244);
|
||||
--color-black: rgb(0, 0, 0);
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
@forward './queries.scss';
|
||||
@forward './type.scss';
|
||||
@ -1,32 +0,0 @@
|
||||
$breakpoint-xs-width: 400px;
|
||||
$breakpoint-s-width: 768px;
|
||||
$breakpoint-m-width: 1024px;
|
||||
$breakpoint-l-width: 1440px;
|
||||
|
||||
////////////////////////////
|
||||
// MEDIA QUERIES
|
||||
/////////////////////////////
|
||||
|
||||
@mixin extra-small-break {
|
||||
@media (max-width: #{$breakpoint-xs-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-break {
|
||||
@media (max-width: #{$breakpoint-s-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mid-break {
|
||||
@media (max-width: #{$breakpoint-m-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin large-break {
|
||||
@media (max-width: #{$breakpoint-l-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -1,167 +0,0 @@
|
||||
@use 'queries' as *;
|
||||
|
||||
/////////////////////////////
|
||||
// HEADINGS
|
||||
/////////////////////////////
|
||||
|
||||
%h1,
|
||||
%h2,
|
||||
%h3,
|
||||
%h4,
|
||||
%h5,
|
||||
%h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
%h1 {
|
||||
margin: 50px 0;
|
||||
font-size: 84px;
|
||||
line-height: 1;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 24px 0;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
%h2 {
|
||||
margin: 32px 0;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
|
||||
@include mid-break {
|
||||
margin: 36px 0;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 24px 0;
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
%h3 {
|
||||
margin: 28px 0;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 24px 0;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
%h4 {
|
||||
margin: 24px 0;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 33px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%h5 {
|
||||
margin: 20px 0;
|
||||
font-size: 32px;
|
||||
line-height: 42px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 16px 0;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%h6 {
|
||||
margin: 20px 0;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
margin: 16px 0;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
// TYPE STYLES
|
||||
/////////////////////////////
|
||||
|
||||
%body {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%large-body {
|
||||
font-size: 25px;
|
||||
line-height: 32px;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
%label {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mid-break {
|
||||
font-size: 13px;
|
||||
letter-spacing: 2.75px;
|
||||
}
|
||||
|
||||
@include small-break {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 2.625px;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { fetchBlogDetail } from "@/services/payload/blog";
|
||||
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||
import { headers } from "next/headers";
|
||||
import Image from "next/image";
|
||||
import { notFound } from "next/navigation";
|
||||
import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
|
||||
|
||||
export interface BlogDetailProps {
|
||||
@ -19,7 +20,9 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
|
||||
twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
|
||||
};
|
||||
|
||||
if (!data) return <></>;
|
||||
if (!data) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function Hero6() {
|
||||
export default function Hero() {
|
||||
const videoRef = useRef<any | null>(null);
|
||||
|
||||
return (
|
||||
@ -25,7 +25,7 @@ export default function Hero6() {
|
||||
<h1 className="hs-title-9">Cochise Oncology</h1>
|
||||
<p>Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
|
||||
<a
|
||||
href="#about"
|
||||
href="/contact"
|
||||
className="btn btn-mod btn-border-w btn-large btn-round ms-1 me-1 mt-2 align-middle w-full md:w-1/4 hover:opacity-[0.5]"
|
||||
data-btn-animate="y"
|
||||
>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
|
||||
import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
|
||||
import BlogDetail from "@/components/Blogs/BlogDetail";
|
||||
import { fetchPageBySlug } from "@/services/payload/page";
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export interface PageProps {
|
||||
slug: string | undefined;
|
||||
@ -11,7 +12,12 @@ export default async function Page({ slug }: PageProps) {
|
||||
const page = await fetchPageBySlug({ slug });
|
||||
|
||||
if (!page) {
|
||||
redirect("/page/not-found");
|
||||
return (
|
||||
<>
|
||||
<BlogDetail slug={slug} />;
|
||||
<BeforeFooterBlock />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user