diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx new file mode 100644 index 0000000..960f7ab --- /dev/null +++ b/src/components/NavBar.tsx @@ -0,0 +1,24 @@ +import Image from 'next/image' +import { Inter } from 'next/font/google' + +const inter = Inter({ subsets: ['latin'] }) + +export default function Home() { + return ( +
+
+
+
+
+ Add School | + School List| + Add User | + User List + +
+
+
+
+
+ ) +} diff --git a/src/pages/add-school-form.tsx b/src/pages/add-school-form.tsx new file mode 100644 index 0000000..273b181 --- /dev/null +++ b/src/pages/add-school-form.tsx @@ -0,0 +1,138 @@ +import React, { useState } from 'react'; +import Image from 'next/image' +import NavBar from '../components/NavBar' +import { Inter } from 'next/font/google' + +const inter = Inter({ subsets: ['latin'] }) + + function Postformvalue(props) { + const [formvalue, setFormvalue]= useState({school:'', interakto:'', early_start_program:'', anual:'', toddlers:'', country:'', end_date:'', }); + + const handleInput =(e)=>{ + const { name, value}= e.target; + setFormvalue({...formvalue, [name]:value}); + console.log(formvalue); + } + const handleFormsubmit= async (e)=>{ + e.preventDefault(); + + await fetch('http://localhost/devopsdeveloper/ReactFormvalue/', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + name:formvalue.school, + anual: formvalue.anual, + toddlers: formvalue.toddlers, + start_date: formvalue.country, + early_start_program: formvalue.early_start_program, + interakto: formvalue.interakto, + + }) + }); + console.log("success"); + + } + + return ( +
+
+ +
+
+
+ school +

School Registration Form

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + {/* */} +
+
+
+
+
+
+ ) +} +export default Postformvalue; \ No newline at end of file diff --git a/src/pages/add-user-form.tsx b/src/pages/add-user-form.tsx new file mode 100644 index 0000000..f2cc127 --- /dev/null +++ b/src/pages/add-user-form.tsx @@ -0,0 +1,129 @@ +import React, { useState } from 'react'; +import Image from 'next/image' +import NavBar from '../components/NavBar' +import { Inter } from 'next/font/google' + +const inter = Inter({ subsets: ['latin'] }) + + function Postformvalue(props) { + const [formvalue, setFormvalue]= useState({name:'',school:'', plan:'', class:'', lang:'', start_month:'', start_date:'', end_date:'', }); + + const handleInput =(e)=>{ + const { name, value}= e.target; + setFormvalue({...formvalue, [name]:value}); + console.log(formvalue); + } + const handleFormsubmit= async (e)=>{ + e.preventDefault(); + + await fetch('http://localhost/devopsdeveloper/ReactFormvalue/', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + name:formvalue.name, + school: formvalue.school, + plan: formvalue.plan, + class: formvalue.class, + lang: formvalue.lang, + start_month: formvalue.start_month, + start_date: formvalue.start_date, + end_date: formvalue.end_date + + }) + }); + console.log("success"); + + } + + return ( +
+
+ +
+
+
+ +

User Registration Form

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + {/* */} +
+
+
+
+
+
+ ) +} +export default Postformvalue; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 57e2a8c..5110c01 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,118 +1,13 @@ import Image from 'next/image' +import NavBar from '../components/NavBar' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function Home() { return ( -
-
-

- Get started by editing  - src/pages/index.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Discover and deploy boilerplate example Next.js projects. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
+
+
) } diff --git a/src/pages/school-list.tsx b/src/pages/school-list.tsx new file mode 100644 index 0000000..22818c8 --- /dev/null +++ b/src/pages/school-list.tsx @@ -0,0 +1,64 @@ +import React, { useEffect, useState } from "react"; +import Image from 'next/image' +import { Inter } from 'next/font/google' +const inter = Inter({ subsets: ['latin'] }) +import NavBar from '../components/NavBar' +export default function Modal() { + const [school, setUser] = useState([]); +const fetchData = async () => { + const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published"); + const data = await response.json(); + return setUser(data.data); + } +// console.log(user) + + useEffect(() => { + fetchData(); + },[]) + + return ( +
+
+ +
+ +
+ + + + + + + + + + + + + + {school.map(data=> + + + + + + + + + + )} + +
School NameCountryAnualEarly Start ProgramToddlersInteraktoStatus
{data.name}{data.country}{data.anual}{data.early_start_program}{data.toddlers}{data.interakto}{data.status}
+
+
+
+
+ ) + +} + diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx new file mode 100644 index 0000000..2448afa --- /dev/null +++ b/src/pages/test/index.tsx @@ -0,0 +1,13 @@ +import Image from 'next/image' +import NavBar from '../../components/NavBar' +import { Inter } from 'next/font/google' + +const inter = Inter({ subsets: ['latin'] }) + +export default function Home() { + return ( +
+ +
+ ) +} diff --git a/src/pages/user-list.tsx b/src/pages/user-list.tsx new file mode 100644 index 0000000..3504831 --- /dev/null +++ b/src/pages/user-list.tsx @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from "react"; +import Image from 'next/image' +import { Inter } from 'next/font/google' +const inter = Inter({ subsets: ['latin'] }) +import NavBar from '../components/NavBar' +export default function Modal() { + const [user, setUser] = useState([]); +const fetchData = async () => { + const response = await fetch("https://management.beanstalkedu.com/items/enrolled_user?filter[status][_eq]=published"); + const data = await response.json(); + return setUser(data.data); + } +// console.log(user) + + useEffect(() => { + fetchData(); + },[]) + + return ( +
+
+ +
+ +
+ + + + + + + + + + {/* */} + + + + + + {user.map(data=> + + + + + + + + {/* */} + + + + )} + +
user NameSchool NameUser TypePlanClassLanguageYearStart DateEnd Date
{data.user}{data.school}{data.type}{data.plan}{data.class}{data.lang}{data.year}{data.start_date}{data.end_date}
+
+
+ +
+
+ ) + +} + diff --git a/src/styles/globals.css b/src/styles/globals.css index fd81e88..fdc226e 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -16,7 +16,7 @@ } } -body { +/* body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, @@ -24,4 +24,4 @@ body { rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); -} +} */