rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rankrunners-dev:04c48ccfb4e7305d6a7fab4ec7b9d4378a8d1f68
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev
..
compare: rankrunners-dev:ae9ec009465cd33fe2147b64a99bff424c55865b
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev

No commits in common. "04c48ccfb4e7305d6a7fab4ec7b9d4378a8d1f68" and "ae9ec009465cd33fe2147b64a99bff424c55865b" have entirely different histories.
04c48ccfb4 ... ae9ec00946

14 changed files with 65 additions and 353 deletions
Show Stats Expand all files Collapse all files

56
src/app/(main)/layout.tsx
View File

@ -1,29 +1,59 @@
import "@/app/globals.css";
import Footer, { FooterSkeleton } from "@/components/Footer";
"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 Header from "@/components/Header";
import InitialScript from "@/components/InitialScript";
import Footer from "@/components/Footer";
import { navMenuData } from "@/data/menu";
import "@public/assets/css/styles.css";
import "jarallax/dist/jarallax.min.css";
import { Roboto } from "next/font/google";
import "photoswipe/dist/photoswipe.css";
import { Suspense } from "react";
import "react-modal-video/css/modal-video.css";
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";
import { Roboto } from "next/font/google";
const roboto = Roboto({ subsets: ["latin"] });
export default function MainLayout({
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" className={`no-mobile no-touch ${roboto.className}`}>
<InitialScript />
<body className="appear-animate body">
<div className="theme-slick">
<div className="page" id="top">
@ -31,9 +61,7 @@ export default function MainLayout({
<Header links={navMenuData} />
</nav>
<main id="main">{children}</main>
<Suspense fallback={<FooterSkeleton />}>
<Footer />
</Suspense>
</div>
</div>
</body>

1
src/collections/Media.ts
View File

@ -15,6 +15,5 @@ export const Media: CollectionConfig = {
upload: true,
admin: {
hideAPIURL: true,
group: "General",
},
};

4
src/collections/Pages.ts
View File

@ -72,8 +72,4 @@ export const Pages: CollectionConfig = {
],
},
],
admin: {
hideAPIURL: true,
group: "General",
},
};

1
src/collections/Teams.ts
View File

@ -30,6 +30,5 @@ export const Teams: CollectionConfig = {
admin: {
hideAPIURL: true,
useAsTitle: "name",
group: "General",
},
};

1
src/collections/Users.ts
View File

@ -5,7 +5,6 @@ export const Users: CollectionConfig = {
admin: {
useAsTitle: "email",
hideAPIURL: true,
group: "Users",
},
auth: true,
fields: [

119
src/components/Footer.tsx
View File

@ -1,10 +1,13 @@
"use client";
import React from "react";
import Image from "next/image";
import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
import ScrollToTop from "./ScrollToTop";
import { fetchContact } from "@/services/payload/contact";
import { FaPhone, FaFax, FaFacebook, FaMapMarkerAlt, FaClock } from "react-icons/fa";
export default async function Footer() {
const contact = await fetchContact();
export default function Footer() {
const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
<div
@ -30,43 +33,29 @@ export default async function Footer() {
<FaMapMarkerAlt className="text-2xl text-gray-300" />
<div className="leading-tight">
<a
href={contact?.location?.href ?? ""}
href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
{contact?.location?.street ?? ""}
5151 E HIGHWAY 90
</a>
<br />
<span className="text-sm text-gray-300">{contact?.fullLocation ?? ""}</span>
<span className="text-sm text-gray-300">Sierra Vista, Arizona 85635</span>
</div>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaPhone className="text-2xl text-gray-300" />
<a
href={`tel:${contact?.phone ?? ""}`}
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
{contact?.phone ?? ""}
</a>
<span className="text-lg">(520) 803-6644</span>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaFax className="text-2xl text-gray-300" />
<a
href={`tel:${contact?.fax ?? ""}`}
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
Fax: {contact?.fax ?? ""}
</a>
<span className="text-lg">Fax: (520) 459-3193</span>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<li className="flex items-center space-x-4">
<FaFacebook className="text-2xl text-gray-300" />
<a
href={contact?.facebook ?? ""}
href="https://www.facebook.com/p/Cochise-Oncology-61556262839823"
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
@ -74,91 +63,21 @@ export default async function Footer() {
Facebook
</a>
</li>
<li className="flex items-center space-x-4">
<FaLinkedin className="text-2xl text-gray-300" />
<a
href={contact?.linkedin ?? ""}
target="_blank"
rel="noopener noreferrer"
className="text-lg text-white"
>
Linkedin
</a>
</li>
</ul>
</div>
<div className="w-full md:w-1/4">
<h3 className="text-lg font-semibold mb-4">Business Hours</h3>
{contact?.hours?.map?.((hour) => (
<div key={hour.id} className="flex items-center space-x-2">
<div className="flex items-center space-x-2">
<FaClock className="text-xl" />
<span className="text-base font-medium">{hour?.hour ?? ""}</span>
<span className="text-base font-medium">Monday - Friday: 8am - 5pm</span>
</div>
)) ?? []}
</div>
</div>
<div className="text-center mt-6">
<ScrollToTop />
</div>
</div>
);
}
export function FooterSkeleton() {
return (
<div
className="relative text-white py-10"
style={{
backgroundColor: "transparent",
backgroundImage: "linear-gradient(172deg, #798D90 0%, #C48853 100%)",
}}
>
<div className="container mx-auto flex flex-wrap justify-between items-start px-6">
<div className="w-full md:w-1/4 mb-6 md:mb-0 flex flex-col items-start">
<Image src="/assets/images/demo-slick/logo-dark.webp" alt="Cochise Oncology Logo" width={363} height={138} />
<p className="text-sm mt-3">© {new Date().getFullYear()} All Rights Reserved</p>
</div>
<div className="w-full md:w-1/3 mb-6 md:mb-0 animate-pulse">
<h3 className="text-lg font-semibold mb-4">Contact Us</h3>
<ul className="space-y-4 border-gray-400 pl-0">
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaMapMarkerAlt className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaPhone className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
<FaFax className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4">
<FaFacebook className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
<li className="flex items-center space-x-4">
<FaLinkedin className="text-2xl text-gray-300" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</li>
</ul>
</div>
<div className="w-full md:w-1/4 animate-pulse">
<h3 className="text-lg font-semibold mb-4">Business Hours</h3>
<div className="flex items-center space-x-2">
<FaClock className="text-xl" />
<div className="h-2 bg-gray-300 rounded flex-1"></div>
<div className="h-2 bg-gray-300 rounded flex-1"></div>
</div>
<div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top">
Back to Top ↑
</div>
</div>
</div>

2
src/components/Header.tsx
View File

@ -1,5 +1,3 @@
"use client";
import HeaderNav from "@/components/HeaderNav";
import { navMenuData } from "@/data/menu";
import { toggleMobileMenu } from "@/utils/toggleMobileMenu";

40
src/components/InitialScript.tsx
View File

@ -1,40 +0,0 @@
"use client";
import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
import { init_wow } from "@/utils/initWow";
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
export default function InitialScript() {
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 <></>;
}

14
src/components/ScrollToTop.tsx
View File

@ -1,14 +0,0 @@
"use client";
export default function ScrollToTop() {
const scrollToTop = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.preventDefault();
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
<div onClick={scrollToTop} className="cursor-pointer text-white font-semibold" aria-label="Scroll to top">
Back to Top ↑
</div>
);
}

79
src/globals/Contacts.ts
View File

@ -1,79 +0,0 @@
import type { GlobalConfig } from "payload";
export const Contacts: GlobalConfig = {
slug: "contacts",
fields: [
{
name: "location",
type: "group",
fields: [
{
name: "street",
label: "Street",
type: "text",
},
{
name: "city",
label: "City",
type: "text",
},
{
name: "state",
label: "State",
type: "text",
},
{
name: "postcode",
label: "Postcode",
type: "text",
},
{
name: "href",
label: "Google Map Link",
type: "text",
},
{
name: "iframeSrc",
label: "Google Map Iframe Source",
type: "text",
},
],
},
{
name: "phone",
label: "Phone Number",
type: "text",
},
{
name: "fax",
label: "Fax",
type: "text",
},
{
name: "facebook",
label: "Facebook Link",
type: "text",
},
{
name: "linkedin",
label: "Linkedin Link",
type: "text",
},
{
name: "hours",
label: "Business Hours",
type: "array",
minRows: 1,
fields: [
{
name: "hour",
type: "text",
},
],
},
],
admin: {
hideAPIURL: true,
group: "General",
},
};

1
src/globals/GoogleReviews.ts
View File

@ -38,6 +38,5 @@ export const GoogleReviews: GlobalConfig = {
],
admin: {
hideAPIURL: true,
group: "General",
},
};

58
src/payload-types.ts
View File

@ -44,11 +44,9 @@ export interface Config {
};
globals: {
'google-reviews': GoogleReview;
contacts: Contact;
};
globalsSelect: {
'google-reviews': GoogleReviewsSelect<false> | GoogleReviewsSelect<true>;
contacts: ContactsSelect<false> | ContactsSelect<true>;
};
locale: null;
user: User & {
@ -928,33 +926,6 @@ export interface GoogleReview {
updatedAt?: string | null;
createdAt?: string | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "contacts".
*/
export interface Contact {
id: number;
location?: {
street?: string | null;
city?: string | null;
state?: string | null;
postcode?: string | null;
href?: string | null;
iframeSrc?: string | null;
};
phone?: string | null;
fax?: string | null;
facebook?: string | null;
linkedin?: string | null;
hours?:
| {
hour?: string | null;
id?: string | null;
}[]
| null;
updatedAt?: string | null;
createdAt?: string | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "google-reviews_select".
@ -973,35 +944,6 @@ export interface GoogleReviewsSelect<T extends boolean = true> {
createdAt?: T;
globalType?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "contacts_select".
*/
export interface ContactsSelect<T extends boolean = true> {
location?:
| T
| {
street?: T;
city?: T;
state?: T;
postcode?: T;
href?: T;
iframeSrc?: T;
};
phone?: T;
fax?: T;
facebook?: T;
linkedin?: T;
hours?:
| T
| {
hour?: T;
id?: T;
};
updatedAt?: T;
createdAt?: T;
globalType?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "auth".

11
src/payload.config.ts
View File

@ -25,7 +25,6 @@ import {
LinkFeature,
} from "@payloadcms/richtext-lexical";
import { GoogleReviews } from "@/globals/GoogleReviews";
import { Contacts } from "./globals/Contacts";
const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);
@ -52,7 +51,7 @@ export default buildConfig({
theme: "dark",
},
collections: [Users, Media, Blogs, Pages, Teams, BlogCategories, BlogTags],
globals: [GoogleReviews, Contacts],
globals: [GoogleReviews],
secret: process.env.PAYLOAD_SECRET || "",
typescript: {
outputFile: path.resolve(dirname, "payload-types.ts"),
@ -112,14 +111,6 @@ export default buildConfig({
},
formOverrides: {
fields: undefined,
admin: {
group: "General",
},
},
formSubmissionOverrides: {
admin: {
group: "General",
},
},
}),
],

25
src/services/payload/contact.ts
View File

@ -1,25 +0,0 @@
import payloadConfig from "@/payload.config";
import { getPayload } from "payload";
export async function fetchContact() {
const payload = await getPayload({ config: payloadConfig });
const dataQuery = await payload.findGlobal({ slug: "contacts" });
const fullLocationArr: string[] = [];
if (!!dataQuery?.location?.city) {
fullLocationArr.push(dataQuery.location.city);
}
if (!!dataQuery?.location?.state) {
fullLocationArr.push(dataQuery.location.state);
}
if (!!dataQuery?.location?.postcode) {
fullLocationArr.push(dataQuery.location.postcode);
}
return !!dataQuery
? {
...dataQuery,
fullLocation: fullLocationArr.join(","),
}
: null;
}