add new friend page

fix other page layout
This commit is contained in:
DefectingCat
2023-11-10 13:58:08 +08:00
parent 00d469c450
commit 8650373e78
9 changed files with 123 additions and 75 deletions

View File

@ -8,7 +8,7 @@ export const metadata: Metadata = {
export default function PageLayout({ children }: { children: ReactNode }) {
return (
<main className="w-full max-w-4xl mx-auto">
<main className="flex-1 w-full max-w-4xl mx-auto">
<h1
className={clsx(
'text-5xl font-bold text-center font-Barlow',
@ -17,7 +17,6 @@ export default function PageLayout({ children }: { children: ReactNode }) {
>
Blog posts
</h1>
<div className="px-4 lg:px-0">{children}</div>
</main>
);

27
app/friends/layout.tsx Normal file
View File

@ -0,0 +1,27 @@
import clsx from 'clsx';
import { Metadata } from 'next';
import { ReactNode } from 'react';
export const metadata: Metadata = {
title: 'RUA - Friends',
};
const Layout = ({ children }: { children: ReactNode }) => {
return (
<>
<main className="flex-1 w-full max-w-4xl mx-auto">
<h1
className={clsx(
'text-5xl font-bold text-center font-Barlow',
'mt-8 mb-20 text-gray-800 dark:text-gray-200',
)}
>
Friends
</h1>
<div className="px-4 lg:px-0">{children}</div>
</main>
</>
);
};
export default Layout;

5
app/friends/page.tsx Normal file
View File

@ -0,0 +1,5 @@
const Page = () => {
return <>test</>;
};
export default Page;

View File

@ -62,7 +62,7 @@ const Page = async ({
id="article"
className={clsx(
'relative max-w-4xl px-4 mx-auto my-10',
'lg:w-[56rem] w-full',
'lg:w-[56rem] w-full flex-1',
)}
>
<h1>{mdxSource.frontmatter?.title}</h1>

19
app/projects/layout.tsx Normal file
View File

@ -0,0 +1,19 @@
import clsx from 'clsx';
import { ReactNode } from 'react';
const Layout = ({ children }: { children: ReactNode }) => {
return (
<>
<main
className={clsx(
'flex-1 max-w-4xl px-8 py-8 mx-auto',
'lg:px-0 w-full flex-1',
)}
>
{children}
</main>
</>
);
};
export default Layout;

View File

@ -10,40 +10,38 @@ export const metadata: Metadata = {
const Loading = () => {
return (
<>
<main className="max-w-4xl px-8 py-8 mx-auto lg:px-0">
<div>
{/* Git projects */}
<div>
{/* Git projects */}
<div>
<h1 className="mb-4 text-2xl">Projects</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
<h1 className="mb-4 text-2xl">Projects</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
</div>
<div className="mt-6">
<div>
<h1 className="mb-4 text-2xl">Seft Hosts</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
<div className="mt-6">
<div>
<h1 className="mb-4 text-2xl">Seft Hosts</h1>
</div>
</main>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((_, i) => (
<PojectCardSkeleton key={i} />
))}
</div>
</div>
</>
);
};

View File

@ -14,50 +14,46 @@ export const metadata: Metadata = {
export default function Page() {
return (
<>
<main
className={clsx('flex-1 max-w-4xl px-8 py-8 mx-auto', 'lg:px-0 w-full')}
>
<div>
{/* Git projects */}
<div>
{/* Git projects */}
<div>
<h1 className="mb-4 text-2xl">Projects</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
<h1 className="mb-4 text-2xl">Projects</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{projects.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
</div>
<div className="mt-6">
<div>
<h1 className="mb-4 text-2xl">Seft Hosts</h1>
</div>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
<div className="mt-6">
<div>
<h1 className="mb-4 text-2xl">Seft Hosts</h1>
</div>
</main>
<div
className={clsx(
'grid grid-cols-1 lg:grid-cols-3',
'md:grid-cols-2 gap-5',
)}
>
{selfHosts.map((item, i) => (
<ProjectCard
key={i}
icon={iconMap[item.icon ?? 'github']}
project={item}
/>
))}
</div>
</div>
</>
);
}

View File

@ -30,6 +30,11 @@ const txtMenu = [
},
{
id: 4,
name: 'Friends',
path: '/friends',
},
{
id: 5,
name: 'About',
path: '/about',
},

View File

@ -143,10 +143,9 @@ code {
}
pre {
padding: 1em;
@apply p-4 rounded-lg;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
@apply bg-white dark:bg-rua-gray-800;
/* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
monospace; */