Add CMS setup, update frontend pages and layouts, and modify json configs
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import ErrorPage from '@/src/components/pages/error';
|
||||
import ErrorPage from '@/components/pages/error';
|
||||
import React from 'react';
|
||||
|
||||
const NotFound = () => {
|
||||
|
||||
48
src/app/(frontend)/layout.tsx
Normal file
48
src/app/(frontend)/layout.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
// import React from 'react'
|
||||
// import './styles.css'
|
||||
|
||||
// export const metadata = {
|
||||
// description: 'A blank template using Payload in a Next.js app.',
|
||||
// title: 'Payload Blank Template',
|
||||
// }
|
||||
|
||||
// export default async function RootLayout(props: { children: React.ReactNode }) {
|
||||
// const { children } = props
|
||||
|
||||
// return (
|
||||
// <html lang="en">
|
||||
// <body>
|
||||
// <main>{children}</main>
|
||||
// </body>
|
||||
// </html>
|
||||
// )
|
||||
// }
|
||||
|
||||
|
||||
"use client"
|
||||
import { useEffect } from 'react';
|
||||
import "./globals.css";
|
||||
import SwitchTab from '@/components/pages/common/dark-light';
|
||||
//import SwitchTab from '../../pages/common/dark-light';
|
||||
//import SwitchTab from '@/src/components/pages/common/dark-light';
|
||||
|
||||
//import SwitchTab from '@/src/components/pages/common/dark-light';
|
||||
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
useEffect(() => {
|
||||
require('bootstrap/dist/js/bootstrap.min.js');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel='icon' type='image/png' href='../favicon.ico' />
|
||||
</head>
|
||||
<body>
|
||||
<SwitchTab addClass={undefined} />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
64
src/app/(frontend)/page.tsx
Normal file
64
src/app/(frontend)/page.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import { headers as getHeaders } from 'next/headers.js'
|
||||
import Image from 'next/image'
|
||||
import { getPayload } from 'payload'
|
||||
import React from 'react'
|
||||
import { fileURLToPath } from 'url'
|
||||
|
||||
import config from '@/payload.config'
|
||||
import './styles.css'
|
||||
|
||||
import HomeOne from "@/components/pages/homes/home";
|
||||
|
||||
export default async function HomePage() {
|
||||
const headers = await getHeaders()
|
||||
const payloadConfig = await config
|
||||
const payload = await getPayload({ config: payloadConfig })
|
||||
const { user } = await payload.auth({ headers })
|
||||
|
||||
const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
|
||||
|
||||
return (
|
||||
// <div className="home">
|
||||
// <div className="content">
|
||||
// <picture>
|
||||
// <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
|
||||
// <Image
|
||||
// alt="Payload Logo"
|
||||
// height={65}
|
||||
// src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
|
||||
// width={65}
|
||||
// />
|
||||
// </picture>
|
||||
// {!user && <h1>Welcome to your new project.</h1>}
|
||||
// {user && <h1>Welcome back, {user.email}</h1>}
|
||||
// <div className="links">
|
||||
// <a
|
||||
// className="admin"
|
||||
// href={payloadConfig.routes.admin}
|
||||
// rel="noopener noreferrer"
|
||||
// target="_blank"
|
||||
// >
|
||||
// Go to admin panel
|
||||
// </a>
|
||||
// <a
|
||||
// className="docs"
|
||||
// href="https://payloadcms.com/docs"
|
||||
// rel="noopener noreferrer"
|
||||
// target="_blank"
|
||||
// >
|
||||
// Documentation
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="footer">
|
||||
// <p>Update this page by editing</p>
|
||||
// <a className="codeLink" href={fileURL}>
|
||||
// <code>app/(frontend)/page.tsx</code>
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
<>
|
||||
<HomeOne />
|
||||
</>
|
||||
)
|
||||
}
|
||||
164
src/app/(frontend)/styles.css
Normal file
164
src/app/(frontend)/styles.css
Normal file
@ -0,0 +1,164 @@
|
||||
:root {
|
||||
--font-mono: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
||||
background: rgb(0, 0, 0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
|
||||
margin: 0;
|
||||
color: rgb(1000, 1000, 1000);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 40px 0;
|
||||
font-size: 64px;
|
||||
line-height: 70px;
|
||||
font-weight: bold;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 24px 0;
|
||||
font-size: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 24px 0;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: calc(var(--base) * 0.75) 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
padding: 45px;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.admin {
|
||||
color: rgb(0, 0, 0);
|
||||
background: rgb(1000, 1000, 1000);
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.docs {
|
||||
color: rgb(1000, 1000, 1000);
|
||||
background: rgb(0, 0, 0);
|
||||
border: 1px solid rgb(1000, 1000, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.codeLink {
|
||||
text-decoration: none;
|
||||
padding: 0 0.5rem;
|
||||
background: rgb(60, 60, 60);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user