-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #211 from Bashamega/html-to-jsx
Html to jsx
- Loading branch information
Showing
11 changed files
with
496 additions
and
395 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,19 @@ | ||
| import posts from '@/db/posts.json' | ||
| import { NextResponse } from 'next/server'; | ||
|
|
||
| import posts from "@/db/posts.json"; | ||
| import { NextResponse } from "next/server"; | ||
|
|
||
| export async function GET(req) { | ||
| const { searchParams } = new URL(req.url); | ||
| let page = parseInt(searchParams.get('page')); | ||
| if(isNaN(page) || page < 1) { | ||
| page = 1; | ||
| } | ||
| const postsPerPage = 10; | ||
| const startIndex = (page - 1) * postsPerPage; | ||
| const { searchParams } = new URL(req.url); | ||
| let page = parseInt(searchParams.get("page")); | ||
| if (isNaN(page) || page < 1) { | ||
| page = 1; | ||
| } | ||
| const postsPerPage = 10; | ||
| const startIndex = (page - 1) * postsPerPage; | ||
|
|
||
| if (startIndex < 0 || startIndex >= posts.length) { | ||
| return NextResponse.json({ error: "Page not found" }, { status: 404 }); | ||
| } | ||
| if (startIndex < 0 || startIndex >= posts.length) { | ||
| return NextResponse.json({ error: "Page not found" }, { status: 404 }); | ||
| } | ||
|
|
||
| const paginatedPosts = posts.slice(startIndex, startIndex + postsPerPage); | ||
| return NextResponse.json(paginatedPosts, { status: 200 }); | ||
| } | ||
| const paginatedPosts = posts.slice(startIndex, startIndex + postsPerPage); | ||
| return NextResponse.json(paginatedPosts, { status: 200 }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,11 @@ | ||
| import users from '@/db/users.json' | ||
| import { NextResponse } from 'next/server'; | ||
| import users from "@/db/users.json"; | ||
| import { NextResponse } from "next/server"; | ||
|
|
||
|
|
||
| export async function GET(req, {params}) { | ||
| const userId = parseInt(params.userId); | ||
| const user = users.find(user => user.userId === userId); | ||
| if (!user) { | ||
| return NextResponse.json({error: 'user not found'}, { status: 404 }); | ||
| } | ||
| return NextResponse.json(user, { status: 200 }); | ||
| } | ||
| export async function GET(req, { params }) { | ||
| const userId = parseInt(params.userId); | ||
| const user = users.find((user) => user.userId === userId); | ||
| if (!user) { | ||
| return NextResponse.json({ error: "user not found" }, { status: 404 }); | ||
| } | ||
| return NextResponse.json(user, { status: 200 }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,19 @@ | ||
| import users from '@/db/users.json' | ||
| import { NextResponse } from 'next/server'; | ||
|
|
||
| import users from "@/db/users.json"; | ||
| import { NextResponse } from "next/server"; | ||
|
|
||
| export async function GET(req) { | ||
| const { searchParams } = new URL(req.url); | ||
| let page = parseInt(searchParams.get('page')); | ||
| if(isNaN(page) || page < 1) { | ||
| page = 1; | ||
| } | ||
| const usersPerPage = 10; | ||
| const startIndex = (page - 1) * usersPerPage; | ||
| const { searchParams } = new URL(req.url); | ||
| let page = parseInt(searchParams.get("page")); | ||
| if (isNaN(page) || page < 1) { | ||
| page = 1; | ||
| } | ||
| const usersPerPage = 10; | ||
| const startIndex = (page - 1) * usersPerPage; | ||
|
|
||
| if (startIndex < 0 || startIndex >= users.length) { | ||
| return NextResponse.json({ error: "Page not found" }, { status: 404 }); | ||
| } | ||
| if (startIndex < 0 || startIndex >= users.length) { | ||
| return NextResponse.json({ error: "Page not found" }, { status: 404 }); | ||
| } | ||
|
|
||
| const paginatedUsers = users.slice(startIndex, startIndex + usersPerPage); | ||
| return NextResponse.json(paginatedUsers, { status: 200 }); | ||
| } | ||
| const paginatedUsers = users.slice(startIndex, startIndex + usersPerPage); | ||
| return NextResponse.json(paginatedUsers, { status: 200 }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Editor } from "@monaco-editor/react"; | ||
|
|
||
| export default function CodeEditor({ language, theme, value, onChange }) { | ||
| return ( | ||
| <Editor | ||
| height="100vh" | ||
| width="50vw" | ||
| language={language} | ||
| theme={theme} | ||
| value={value} | ||
| onChange={onChange} | ||
| className=" sticky" | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { NavBar } from "@/app/components/navbar"; | ||
| import CodeEditor from "./components/editor"; | ||
| import { htmlToJsx } from "html-to-jsx-transform"; | ||
|
|
||
| export default function HTML_JSX() { | ||
| const [isDarkMode, setIsDarkMode] = useState(false); | ||
| const [value, setValue] = useState(""); | ||
| const handleChange = (val) => { | ||
| setValue(val); | ||
| }; | ||
| const toggleTheme = () => { | ||
| const newTheme = !isDarkMode; | ||
| setIsDarkMode(newTheme); | ||
| localStorage.setItem("theme", JSON.stringify(newTheme)); | ||
| }; | ||
| const generateJSX = () => { | ||
| const jsx = htmlToJsx(value); | ||
| return `function component(){ | ||
| return(${jsx}) | ||
| } | ||
| `; | ||
| }; | ||
| return ( | ||
| <main | ||
| className={`h-screen overflow-auto ${isDarkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`} | ||
| > | ||
| <NavBar | ||
| title={"HTML to JSX"} | ||
| toggleTheme={toggleTheme} | ||
| isDarkMode={isDarkMode} | ||
| /> | ||
| <div className="flex h-full"> | ||
| <div> | ||
| <h1 className="text-center p-2">HTML</h1> | ||
| <CodeEditor | ||
| theme={isDarkMode ? "vs-dark" : "vs-light"} | ||
| value={value} | ||
| language={"html"} | ||
| onChange={handleChange} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <h1 className="text-center p-2">JSX</h1> | ||
| <CodeEditor | ||
| theme={isDarkMode ? "vs-dark" : "vs-light"} | ||
| language={"javascript"} | ||
| value={generateJSX()} | ||
| onChange={() => {}} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.