Implemented skeleton
This commit is contained in:
parent
52fbdbc184
commit
3cb85e6273
8
src/app/components/bingo.module.css
Normal file
8
src/app/components/bingo.module.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.table{
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td{
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
16
src/app/components/bingo.tsx
Normal file
16
src/app/components/bingo.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import styles from './bingo.module.css'
|
||||||
|
import BingoRow from './bingorow.tsx'
|
||||||
|
|
||||||
|
export default function Bingo(){
|
||||||
|
return(
|
||||||
|
<table className={styles.table}>
|
||||||
|
<tbody>
|
||||||
|
<BingoRow/>
|
||||||
|
<BingoRow/>
|
||||||
|
<BingoRow/>
|
||||||
|
<BingoRow/>
|
||||||
|
<BingoRow/>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
);
|
||||||
|
}
|
7
src/app/components/bingoitem.tsx
Normal file
7
src/app/components/bingoitem.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import styles from './bingo.module.css'
|
||||||
|
|
||||||
|
export default function BingoItem(){
|
||||||
|
return(
|
||||||
|
<td className={styles.td}>Item</td>
|
||||||
|
);
|
||||||
|
}
|
13
src/app/components/bingorow.tsx
Normal file
13
src/app/components/bingorow.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import BingoItem from './bingoitem.tsx'
|
||||||
|
|
||||||
|
export default function BingoRow(){
|
||||||
|
return(
|
||||||
|
<tr>
|
||||||
|
<BingoItem/>
|
||||||
|
<BingoItem/>
|
||||||
|
<BingoItem/>
|
||||||
|
<BingoItem/>
|
||||||
|
<BingoItem/>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
@ -5,8 +5,8 @@ import './globals.css'
|
|||||||
const inter = Inter({ subsets: ['latin'] })
|
const inter = Inter({ subsets: ['latin'] })
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Create Next App',
|
title: 'Buzzword Bingo',
|
||||||
description: 'Generated by create next app',
|
description: 'by data.lore',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
|
@ -1,8 +1,4 @@
|
|||||||
.main {
|
.main {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6rem;
|
padding: 6rem;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
@ -1,95 +1,11 @@
|
|||||||
import Image from 'next/image'
|
|
||||||
import styles from './page.module.css'
|
import styles from './page.module.css'
|
||||||
|
import Bingo from './components/bingo.tsx'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home(){
|
||||||
return (
|
return(
|
||||||
<main className={styles.main}>
|
<main className={styles.main}>
|
||||||
<div className={styles.description}>
|
<h1 align="center">Buzzword Bingo</h1>
|
||||||
<p>
|
<Bingo/>
|
||||||
Get started by editing
|
|
||||||
<code className={styles.code}>src/app/page.tsx</code>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
By{' '}
|
|
||||||
<Image
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel Logo"
|
|
||||||
className={styles.vercelLogo}
|
|
||||||
width={100}
|
|
||||||
height={24}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.center}>
|
|
||||||
<Image
|
|
||||||
className={styles.logo}
|
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js Logo"
|
|
||||||
width={180}
|
|
||||||
height={37}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.grid}>
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Docs <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Learn <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Templates <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>Explore the Next.js 13 playground.</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
||||||
className={styles.card}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<h2>
|
|
||||||
Deploy <span>-></span>
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user