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 { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
|
import { getDefaultMetadata } from "@/utils/metadata";
|
||||||
|
import Header from "@/components/layouts/Header";
|
||||||
|
import Footer from "@/components/layouts/Footer";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
@ -13,10 +16,10 @@ const geistMono = Geist_Mono({
|
|||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
title: "Create Next App",
|
const metadata = await getDefaultMetadata();
|
||||||
description: "Generated by create next app",
|
return metadata;
|
||||||
};
|
}
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@ -41,7 +44,37 @@ export default function RootLayout({
|
|||||||
<link rel="stylesheet" href="css/fonts.css" />
|
<link rel="stylesheet" href="css/fonts.css" />
|
||||||
</head>
|
</head>
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
<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 />
|
<InitialScript />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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