From beba3fb9d9724af9d4c145da0953df1427fa215b Mon Sep 17 00:00:00 2001 From: alexbaumgertner Date: Mon, 8 Jan 2024 23:31:08 +0300 Subject: [PATCH] Start working on resources --- README.md | 29 +++------------ _templates/_page.tsx | 9 +++++ src/app/books/page.tsx | 9 +++++ src/app/companies/page.tsx | 35 +++++++++++++++++++ src/app/free-universities/page.tsx | 9 +++++ src/app/layout.tsx | 8 ++++- src/app/news/page.tsx | 9 +++++ src/app/page.tsx | 2 +- src/app/systems/page.tsx | 27 ++++++++++++++ .../CompaniesList/CompaniesList.tsx | 30 ++++++++++++++++ src/components/CompaniesList/index.ts | 2 ++ .../GlobalMenu/GlobalMenu.module.css | 3 ++ src/components/GlobalMenu/GlobalMenu.tsx | 15 ++++++++ src/components/GlobalMenu/index.ts | 1 + .../SystemsList/SystemsList.module.css | 3 ++ src/components/SystemsList/SystemsList.tsx | 23 ++++++++++++ src/components/SystemsList/index.ts | 1 + src/components/index.ts | 6 ++++ 18 files changed, 194 insertions(+), 27 deletions(-) create mode 100644 _templates/_page.tsx create mode 100644 src/app/books/page.tsx create mode 100644 src/app/companies/page.tsx create mode 100644 src/app/free-universities/page.tsx create mode 100644 src/app/news/page.tsx create mode 100644 src/app/systems/page.tsx create mode 100644 src/components/CompaniesList/CompaniesList.tsx create mode 100644 src/components/CompaniesList/index.ts create mode 100644 src/components/GlobalMenu/GlobalMenu.module.css create mode 100644 src/components/GlobalMenu/GlobalMenu.tsx create mode 100644 src/components/GlobalMenu/index.ts create mode 100644 src/components/SystemsList/SystemsList.module.css create mode 100644 src/components/SystemsList/SystemsList.tsx create mode 100644 src/components/SystemsList/index.ts create mode 100644 src/components/index.ts diff --git a/README.md b/README.md index 75fc343..a6d8adb 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,13 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Education technologies, news, books, courses, videos, articles, podcasts, and more + -## Getting Started +## Run locally +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). First, run the development server: ```bash npm run dev -# or -yarn dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/page.tsx`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/_templates/_page.tsx b/_templates/_page.tsx new file mode 100644 index 0000000..b53d36d --- /dev/null +++ b/_templates/_page.tsx @@ -0,0 +1,9 @@ +import type { NextPage } from 'next' + +const SomePage: NextPage = () => { + return ( +
SomePage
+ ) +} + +export default SomePage diff --git a/src/app/books/page.tsx b/src/app/books/page.tsx new file mode 100644 index 0000000..547a608 --- /dev/null +++ b/src/app/books/page.tsx @@ -0,0 +1,9 @@ +import type { NextPage } from 'next' + +const BooksPage: NextPage = () => { + return ( +
BooksPage
+ ) +} + +export default BooksPage diff --git a/src/app/companies/page.tsx b/src/app/companies/page.tsx new file mode 100644 index 0000000..c94d284 --- /dev/null +++ b/src/app/companies/page.tsx @@ -0,0 +1,35 @@ +import type { NextPage } from 'next' + +import { CompaniesList } from '@/components' + +const companies = [ + { + id: '1', + name: 'Khan Academy', + url: 'https://www.khanacademy.org/', + wiki: 'https://en.wikipedia.org/wiki/Khan_Academy', + launched: '2006', + logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/440px-Khan_Academy_logo_%282018%29.svg.png', + description: 'Khan Academy is a nonprofit with the mission of providing a free, world-class education for anyone, anywhere.' + }, + { + id: '2', + name: 'Coursera', + url: 'https://www.coursera.org/', + wiki: 'https://en.wikipedia.org/wiki/Coursera', + launched: '2012', + logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Coursera_logo_%282020%29.svg/440px-Coursera_logo_%282020%29.svg.png', + description: 'Choose from hundreds of free courses or pay to earn a Course or Specialization Certificate. Explore our catalog of online degrees, certificates, Specializations, & MOOCs in data science, computer science, business, health, and dozens of other topics.' + } +]; + +const CompaniesPage: NextPage = () => { + return ( +
+

Companies

+ +
+ ) +} + +export default CompaniesPage diff --git a/src/app/free-universities/page.tsx b/src/app/free-universities/page.tsx new file mode 100644 index 0000000..aca0a90 --- /dev/null +++ b/src/app/free-universities/page.tsx @@ -0,0 +1,9 @@ +import type { NextPage } from 'next' + +const FreeUniversitiesPage: NextPage = () => { + return ( +
FreeUniversitiesPage
+ ) +} + +export default FreeUniversitiesPage diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b9c294c..5f9f259 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,9 @@ import type { ReactNode } from 'react' -import { Metadata } from 'next' +import type { Metadata } from 'next' import Script from 'next/script' + +import { GlobalMenu } from '@/components' + import '@/styles/global.css' export const metadata: Metadata = { @@ -16,6 +19,9 @@ export default function RootLayout ({ return ( +
+ +
{children}
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx new file mode 100644 index 0000000..61c49cf --- /dev/null +++ b/src/app/news/page.tsx @@ -0,0 +1,9 @@ +import type { NextPage } from 'next' + +const NewsPage: NextPage = () => { + return ( +
NewsPage
+ ) +} + +export default NewsPage diff --git a/src/app/page.tsx b/src/app/page.tsx index fc15724..2b54f59 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,4 @@ -import { NextPage } from 'next' +import type { NextPage } from 'next' import Link from 'next/link' const IndexPage: NextPage = () => { diff --git a/src/app/systems/page.tsx b/src/app/systems/page.tsx new file mode 100644 index 0000000..ac11e07 --- /dev/null +++ b/src/app/systems/page.tsx @@ -0,0 +1,27 @@ +import type { NextPage } from 'next' + +import { SystemsList } from '@/components' + +const systems = [ + { + name: 'Flipped classroom', + description: 'Flipped classroom is an instructional strategy and a type of blended learning that reverses the traditional learning environment by delivering instructional content, often online, outside of the classroom. It moves activities, including those that may have traditionally been considered homework, into the classroom. In a flipped classroom, students watch online lectures, collaborate in online discussions, or carry out research at home and engage in concepts in the classroom with the guidance of a mentor.', + wiki: 'https://en.wikipedia.org/wiki/Flipped_classroom', + }, + { + name: 'Personalized learning', + description: 'Personalized learning, individualized instruction, personal learning environment and direct instruction all refer to efforts to tailor education to meet the different needs of students. In addition, various terms are used to describe what personalized learning looks like, including differentiated instruction, individualized instruction and adaptive learning.', + wiki: 'https://en.wikipedia.org/wiki/Personalized_learning', + }, +] + +const SystemsPage: NextPage = () => { + return ( +
+

SystemsPage

+ +
+ ) +} + +export default SystemsPage diff --git a/src/components/CompaniesList/CompaniesList.tsx b/src/components/CompaniesList/CompaniesList.tsx new file mode 100644 index 0000000..7696e57 --- /dev/null +++ b/src/components/CompaniesList/CompaniesList.tsx @@ -0,0 +1,30 @@ +'use client' + +type Company = { + id: string + name: string + url: string + logo: string + description: string +} + +export type CompaniesListProps = { + list: Company[] +} + +export const CompaniesList = ({ list }: CompaniesListProps) => { + return ( +
+

CompaniesList

+ {list.length > 0 && } +
+ ) +} diff --git a/src/components/CompaniesList/index.ts b/src/components/CompaniesList/index.ts new file mode 100644 index 0000000..94c37b5 --- /dev/null +++ b/src/components/CompaniesList/index.ts @@ -0,0 +1,2 @@ +export { CompaniesList } from './CompaniesList' +export type { CompaniesListProps } from './CompaniesList' diff --git a/src/components/GlobalMenu/GlobalMenu.module.css b/src/components/GlobalMenu/GlobalMenu.module.css new file mode 100644 index 0000000..b844be8 --- /dev/null +++ b/src/components/GlobalMenu/GlobalMenu.module.css @@ -0,0 +1,3 @@ +.component { + display: flex; +} diff --git a/src/components/GlobalMenu/GlobalMenu.tsx b/src/components/GlobalMenu/GlobalMenu.tsx new file mode 100644 index 0000000..397bf03 --- /dev/null +++ b/src/components/GlobalMenu/GlobalMenu.tsx @@ -0,0 +1,15 @@ +import Link from 'next/link' + +import classes from './GlobalMenu.module.css' + +export const GlobalMenu = () => { + return ( + +
  • edu news
    • +
  • free universities programs
    • +
  • EduTech companies
    • +
  • systems
    • +
  • books
    • +     + ) +} diff --git a/src/components/GlobalMenu/index.ts b/src/components/GlobalMenu/index.ts new file mode 100644 index 0000000..ace1727 --- /dev/null +++ b/src/components/GlobalMenu/index.ts @@ -0,0 +1 @@ +export { GlobalMenu } from './GlobalMenu' diff --git a/src/components/SystemsList/SystemsList.module.css b/src/components/SystemsList/SystemsList.module.css new file mode 100644 index 0000000..b844be8 --- /dev/null +++ b/src/components/SystemsList/SystemsList.module.css @@ -0,0 +1,3 @@ +.component { + display: flex; +} diff --git a/src/components/SystemsList/SystemsList.tsx b/src/components/SystemsList/SystemsList.tsx new file mode 100644 index 0000000..f030d5e --- /dev/null +++ b/src/components/SystemsList/SystemsList.tsx @@ -0,0 +1,23 @@ +import classes from './SystemsList.module.css' + +export type SystemsList = { + systems: { + name: string + description: string + wiki: string + }[] +} + +const SystemsList = ({ systems }: SystemsList) => { + console.log("systems: ", systems); // eslint-disable-line + + return ( +
    + SystemsList +
    + ) +} + +export { + SystemsList, +} diff --git a/src/components/SystemsList/index.ts b/src/components/SystemsList/index.ts new file mode 100644 index 0000000..5342891 --- /dev/null +++ b/src/components/SystemsList/index.ts @@ -0,0 +1 @@ +export { SystemsList } from './SystemsList' diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..1f23091 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,6 @@ +export { GlobalMenu } from './GlobalMenu' + +export { CompaniesList } from './CompaniesList' +export type { CompaniesListProps } from './CompaniesList' + +export { SystemsList } from './SystemsList'