Bonnie Peng
2 years ago
committed by
Adi Thakral
parent
08fc9eb3ab
commit
ab544fc759
@ -1,7 +0,0 @@ |
||||
import React from "react"; |
||||
|
||||
const Link: React.FC = () => { |
||||
return <div />; |
||||
}; |
||||
|
||||
export default Link; |
||||
@ -0,0 +1,43 @@ |
||||
import React from "react"; |
||||
|
||||
const styles = { |
||||
fontFamily: "Karla", |
||||
}; |
||||
|
||||
interface Link { |
||||
name: string; |
||||
url: string; |
||||
} |
||||
interface LinkProps { |
||||
links: Link[]; |
||||
} |
||||
|
||||
const Links: React.FC<LinkProps> = ({ links }) => { |
||||
return ( |
||||
<div |
||||
className="text-s flex flex-col items-center w-full absolute top-6" |
||||
style={styles} |
||||
> |
||||
<img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" /> |
||||
<h1 className="font-bold">@uwcsclub</h1> |
||||
<ul className="flex flex-col my-6 w-full"> |
||||
{links.map(({ name, url }) => ( |
||||
<li key={name + url} className="w-full contents"> |
||||
<a |
||||
className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5 |
||||
hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out |
||||
w-11/12 sm:w-4/12" |
||||
href={url} |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
> |
||||
{name} |
||||
</a> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Links; |
||||
@ -1,3 +1,3 @@ |
||||
export { default as Link } from "./Link"; |
||||
export { default as Links } from "./Links"; |
||||
export { default as EditLink } from "./EditLink"; |
||||
export { default as Preview } from "./Preview"; |
||||
|
||||
@ -1,9 +1,19 @@ |
||||
import type { AppProps } from "next/app"; |
||||
import React from "react"; |
||||
import "styles/globals.css"; |
||||
import Head from "next/head"; |
||||
|
||||
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => ( |
||||
<Component {...pageProps} /> |
||||
<> |
||||
<Head> |
||||
<title>@uwcsclub | LinkList</title> |
||||
<link |
||||
rel="stylesheet" |
||||
href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;600;700&display=swap" |
||||
></link> |
||||
</Head> |
||||
<Component {...pageProps} /> |
||||
</> |
||||
); |
||||
|
||||
export default MyApp; |
||||
|
||||
@ -1,84 +1,23 @@ |
||||
import React from "react"; |
||||
import Head from "next/head"; |
||||
import { GetStaticProps } from "next"; |
||||
import styles from "styles/Home.module.css"; |
||||
import { Links } from "components"; |
||||
|
||||
// TODO: change
|
||||
const API = "https://api.thedogapi.com/v1/breeds?limit=10&page=0"; |
||||
|
||||
export const getStaticProps: GetStaticProps = async () => { |
||||
// TODO: Fetch links here
|
||||
// fetch data here
|
||||
const data = await fetch(API).then((res) => res.json()); |
||||
|
||||
return { |
||||
props: { links: [] }, // will be passed to the page component as props
|
||||
// Next.js will attempt to re-generate the page:
|
||||
// - When a request comes in
|
||||
// - At most once every second
|
||||
props: { links: data }, // will be passed to the page component as props
|
||||
revalidate: 1, |
||||
}; |
||||
}; |
||||
|
||||
const Home: React.FC = ({ links }: any) => { |
||||
console.log({ links }); |
||||
|
||||
// TODO: Remove starter code
|
||||
return ( |
||||
<div className={styles.container}> |
||||
<Head> |
||||
<title>Create Next App</title> |
||||
<link rel="icon" href="/favicon.ico" /> |
||||
</Head> |
||||
|
||||
<main className={styles.main}> |
||||
<h1 className={styles.title}> |
||||
Welcome to <a href="https://nextjs.org">Next.js!</a> |
||||
</h1> |
||||
|
||||
<p className={styles.description}> |
||||
Get started by editing{" "} |
||||
<code className={styles.code}>pages/index.js</code> |
||||
</p> |
||||
|
||||
<div className={styles.grid}> |
||||
<a href="https://nextjs.org/docs" className={styles.card}> |
||||
<h3>Documentation →</h3> |
||||
<p>Find in-depth information about Next.js features and API.</p> |
||||
</a> |
||||
|
||||
<a href="https://nextjs.org/learn" className={styles.card}> |
||||
<h3>Learn →</h3> |
||||
<p>Learn about Next.js in an interactive course with quizzes!</p> |
||||
</a> |
||||
|
||||
<a |
||||
href="https://github.com/vercel/next.js/tree/master/examples" |
||||
className={styles.card} |
||||
> |
||||
<h3>Examples →</h3> |
||||
<p>Discover and deploy boilerplate example Next.js projects.</p> |
||||
</a> |
||||
|
||||
<a |
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
||||
className={styles.card} |
||||
> |
||||
<h3>Deploy →</h3> |
||||
<p> |
||||
Instantly deploy your Next.js site to a public URL with Vercel. |
||||
</p> |
||||
</a> |
||||
</div> |
||||
</main> |
||||
|
||||
<footer className={styles.footer}> |
||||
<a |
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
Powered by{" "} |
||||
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} /> |
||||
</a> |
||||
</footer> |
||||
</div> |
||||
); |
||||
return <Links links={links} />; |
||||
}; |
||||
|
||||
export default Home; |
||||
|
||||
|
After Width: | Height: | Size: 96 KiB |
Loading…
Reference in new issue