feat: split layout sections into components
This commit is contained in:
parent
a04f33d10c
commit
da3b65f5aa
@ -1,7 +1,10 @@
|
||||
import InitialScript from "@/components/InitialScript";
|
||||
import InitialScript from "@/components/layouts/InitialScript";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Metadata } from "next";
|
||||
import { getDefaultMetadata } from "@/utils/metadata";
|
||||
import Header from "@/components/layouts/Header";
|
||||
import Footer from "@/components/layouts/Footer";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@ -13,10 +16,10 @@ const geistMono = Geist_Mono({
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const metadata = await getDefaultMetadata();
|
||||
return metadata;
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@ -41,7 +44,37 @@ export default function RootLayout({
|
||||
<link rel="stylesheet" href="css/fonts.css" />
|
||||
</head>
|
||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||
{children}
|
||||
<div className="ie-panel">
|
||||
<a href="http://windows.microsoft.com/en-US/internet-explorer/">
|
||||
<img
|
||||
src="images/ie8-panel/warning_bar_0000_us.jpg"
|
||||
height="42"
|
||||
width="820"
|
||||
alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="preloader">
|
||||
<div className="banter-loader">
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
<div className="banter-loader__box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page">
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<div className="snackbars" id="form-output-global"></div>
|
||||
<InitialScript />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2976
src/app/page.tsx
2976
src/app/page.tsx
File diff suppressed because it is too large
Load Diff
25
src/components/layouts/Footer.tsx
Normal file
25
src/components/layouts/Footer.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="section footer-classic context-dark bg-gray-21">
|
||||
<div className="container">
|
||||
<div className="row row-10 justify-content-sm-between">
|
||||
<div className="col-sm-6">
|
||||
<p className="rights">
|
||||
<span>MyHome</span> <span>© </span>
|
||||
<span className="copyright-year"></span>
|
||||
<span> </span>
|
||||
<a href="privacy-policy.html">Privacy Policy</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-sm-6 text-sm-right">
|
||||
<div className="right-1">
|
||||
<a href="#">
|
||||
<span className="icon mdi mdi-plus"></span>Submit Property
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
410
src/components/layouts/Header.tsx
Normal file
410
src/components/layouts/Header.tsx
Normal file
@ -0,0 +1,410 @@
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="section page-header">
|
||||
<div className="rd-navbar-wrap">
|
||||
<nav
|
||||
className="rd-navbar rd-navbar-classic"
|
||||
data-layout="rd-navbar-fixed"
|
||||
data-sm-layout="rd-navbar-fixed"
|
||||
data-md-layout="rd-navbar-fixed"
|
||||
data-md-device-layout="rd-navbar-fixed"
|
||||
data-lg-layout="rd-navbar-static"
|
||||
data-lg-device-layout="rd-navbar-fixed"
|
||||
data-xl-layout="rd-navbar-static"
|
||||
data-xl-device-layout="rd-navbar-static"
|
||||
data-lg-stick-up-offset="46px"
|
||||
data-xl-stick-up-offset="46px"
|
||||
data-xxl-stick-up-offset="46px"
|
||||
data-lg-stick-up="true"
|
||||
data-xl-stick-up="true"
|
||||
data-xxl-stick-up="true"
|
||||
>
|
||||
<div className="rd-navbar-aside-outer">
|
||||
<div className="rd-navbar-aside">
|
||||
<div
|
||||
className="rd-navbar-collapse-toggle rd-navbar-fixed-element-1"
|
||||
data-rd-navbar-toggle=".rd-navbar-collapse"
|
||||
>
|
||||
<span></span>
|
||||
</div>
|
||||
<ul className="rd-navbar-aside-list rd-navbar-collapse">
|
||||
<li>
|
||||
<div className="block-inline unit unit-spacing-xs align-items-center">
|
||||
<div className="unit-left">
|
||||
<span className="icon text-middle mdi mdi-phone"></span>
|
||||
</div>
|
||||
<div className="unit-body">
|
||||
<a href="tel:#">1-800-1234-567</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="block-inline unit unit-spacing-xs align-items-center">
|
||||
<div className="unit-left">
|
||||
<span className="icon text-middle mdi mdi-email-outline"></span>
|
||||
</div>
|
||||
<div className="unit-body">
|
||||
<a href="mailto:#">info@demolink.org</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="rd-navbar-aside-item">
|
||||
<div className="block-inline">
|
||||
<button
|
||||
className="unit unit-spacing-xs align-items-center"
|
||||
data-rd-navbar-toggle="#navbar-login-register"
|
||||
>
|
||||
<span className="unit-left">
|
||||
<span className="icon text-middle mdi mdi-login"></span>
|
||||
</span>
|
||||
<span className="unit-body">
|
||||
<span>Login/Register</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="rd-navbar-popup bg-gray-12" id="navbar-login-register">
|
||||
<div className="tabs-custom tabs-horizontal tabs-line" id="navbar-tabs">
|
||||
<ul className="nav nav-tabs">
|
||||
<li className="nav-item" role="presentation">
|
||||
<a className="nav-link active" href="#navbar-tabs-1" data-toggle="tab">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item" role="presentation">
|
||||
<a className="nav-link" href="#navbar-tabs-2" data-toggle="tab">
|
||||
Register
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane fade show active" id="navbar-tabs-1">
|
||||
<form className="rd-form form-1">
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="navbar-login-email"
|
||||
type="email"
|
||||
name="email"
|
||||
data-constraints="@Email @Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="navbar-login-email">
|
||||
E-mail
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="navbar-login-password"
|
||||
type="password"
|
||||
name="password"
|
||||
data-constraints="@Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="navbar-login-password">
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<button className="button button-sm button-primary button-block" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="tab-pane fade" id="navbar-tabs-2">
|
||||
<form className="rd-form form-1">
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="register-name"
|
||||
type="text"
|
||||
name="username"
|
||||
data-constraints="@Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="register-name">
|
||||
Username
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="register-email"
|
||||
type="email"
|
||||
name="email"
|
||||
data-constraints="@Email @Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="register-email">
|
||||
E-mail
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="register-password"
|
||||
type="password"
|
||||
name="password"
|
||||
data-constraints="@Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="register-password">
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
className="form-input"
|
||||
id="register-password-confirm"
|
||||
type="password"
|
||||
name="password"
|
||||
data-constraints="@Required"
|
||||
/>
|
||||
<label className="form-label" htmlFor="register-password-confirm">
|
||||
Confirm Password
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<button className="button button-sm button-primary button-block" type="submit">
|
||||
Create an Account
|
||||
</button>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<div className="text-decoration-lines">
|
||||
<span className="text-decoration-lines-content">or enter with</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-wrap">
|
||||
<div className="button-group">
|
||||
<a
|
||||
className="button button-facebook button-icon button-icon-only"
|
||||
href="#"
|
||||
aria-label="Facebook"
|
||||
>
|
||||
<span className="icon mdi mdi mdi-facebook"></span>
|
||||
</a>
|
||||
<a
|
||||
className="button button-twitter button-icon button-icon-only"
|
||||
href="#"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<span className="icon mdi mdi-twitter"></span>
|
||||
</a>
|
||||
<a
|
||||
className="button button-google button-icon button-icon-only"
|
||||
href="#"
|
||||
aria-label="Google+"
|
||||
>
|
||||
<span className="icon mdi mdi-google"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rd-navbar-main-outer">
|
||||
<div className="rd-navbar-main">
|
||||
<div className="rd-navbar-panel">
|
||||
<button className="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div className="rd-navbar-brand">
|
||||
<a className="brand" href="index.html">
|
||||
<img
|
||||
className="brand-logo-dark"
|
||||
src="images/logo-default-142x41.png"
|
||||
alt=""
|
||||
width="142"
|
||||
height="41"
|
||||
srcSet="images/logo-default-284x82.png 2x"
|
||||
/>
|
||||
<img
|
||||
className="brand-logo-light"
|
||||
src="images/logo-inverse-121x61.png"
|
||||
alt=""
|
||||
width="121"
|
||||
height="61"
|
||||
srcSet="images/logo-inverse-284x82.png 2x"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rd-navbar-nav-wrap">
|
||||
<ul className="rd-navbar-nav">
|
||||
<li className="rd-nav-item active">
|
||||
<a className="rd-nav-link" href="index.html">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="#">
|
||||
Properties
|
||||
</a>
|
||||
|
||||
<ul className="rd-menu rd-navbar-dropdown">
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="properties-grid.html">
|
||||
Properties Grid
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="properties-grid-2.html">
|
||||
Properties Grid 2
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="properties-list.html">
|
||||
Properties List
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="submit-property.html">
|
||||
Submit property
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="single-property.html">
|
||||
Single Property
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="about-us.html">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="blog.html">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
<ul className="rd-menu rd-navbar-dropdown">
|
||||
<li className="rd-dropdown-item">
|
||||
<a className="rd-dropdown-link" href="blog-post.html">
|
||||
Blog post
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="#">
|
||||
Pages
|
||||
</a>
|
||||
|
||||
<ul className="rd-menu rd-navbar-megamenu">
|
||||
<li className="rd-megamenu-item">
|
||||
<h6 className="rd-megamenu-title">Pages 1</h6>
|
||||
<ul className="rd-megamenu-list">
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="agents.html">
|
||||
Agents
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="agent-single-page.html">
|
||||
Agent Single Page
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="careers.html">
|
||||
Careers
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="gallery.html">
|
||||
Gallery
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-megamenu-item">
|
||||
<h6 className="rd-megamenu-title">Pages 2</h6>
|
||||
<ul className="rd-megamenu-list">
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="search-results.html">
|
||||
Search results
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="coming-soon.html">
|
||||
Coming Soon
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="404.html">
|
||||
404
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="privacy-policy.html">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-megamenu-item">
|
||||
<h6 className="rd-megamenu-title">Elements</h6>
|
||||
<ul className="rd-megamenu-list">
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="tabs-and-accordions.html">
|
||||
Tabs and accordions
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="progress-bars.html">
|
||||
Progress bars
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-megamenu-list-item">
|
||||
<a className="rd-megamenu-list-link" href="grid-system.html">
|
||||
Grid System
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="contact-us.html">
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="rd-navbar-main-item">
|
||||
<a className="button button-sm button-primary" href="#">
|
||||
Submit property
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
36
src/utils/metadata.ts
Normal file
36
src/utils/metadata.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { Metadata } from "next";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
export async function getDefaultMetadata(): Promise<Metadata> {
|
||||
const headersList = await headers();
|
||||
const mainUrl = headersList.get("x-main-url") ?? "";
|
||||
const fullUrl = headersList.get("x-full-url") ?? "";
|
||||
const siteName = headersList.get("x-site-name") ?? "";
|
||||
const metaDesc = headersList.get("x-meta-desc") ?? "";
|
||||
|
||||
return {
|
||||
metadataBase: new URL(mainUrl),
|
||||
title: siteName,
|
||||
description: metaDesc,
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
"max-image-preview": "large",
|
||||
"max-snippet": -1,
|
||||
"max-video-preview": -1,
|
||||
},
|
||||
openGraph: {
|
||||
siteName,
|
||||
description: metaDesc,
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
url: fullUrl,
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
},
|
||||
alternates: {
|
||||
canonical: "./",
|
||||
},
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user