-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
252 additions
and
137 deletions.
There are no files selected for viewing
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 @@ | ||
| NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk |
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,19 @@ | ||
| import ListenClick from "../components/event/ListenClick"; | ||
| import Link from "next/link"; | ||
| import StateHooks from "../components/event/StateHooks"; | ||
|
|
||
| export default function EventPage() { | ||
| return ( | ||
| <div> | ||
| <div className="flex justify-between"> | ||
| <h4 className="text-xl font-bold decoration-stone-600"> | ||
| This page is about event listener page | ||
| </h4> | ||
| <Link href="/">Back</Link> | ||
| </div> | ||
| <ListenClick /> | ||
| <p>This is about state, A component memory</p> | ||
| <StateHooks /> | ||
| </div> | ||
| ); | ||
| } |
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,23 @@ | ||
| import PropSend from "../components/properties/PropSend"; | ||
| import PropSendDestructuring from "../components/properties/PropSendes"; | ||
| import PropCondition from "../components/properties/PropCond"; | ||
| import PropTernary from "../components/properties/PropTernary"; | ||
| import { title } from "../utils/const"; | ||
| import Link from "next/link"; | ||
|
|
||
| export default function PropPage() { | ||
| return ( | ||
| <div> | ||
| <div className="flex justify-between"> | ||
| <h1 className="text-xl font-bold decoration-stone-600"> | ||
| This page about how to send property to other component | ||
| </h1> | ||
| <Link href="/">Back</Link> | ||
| </div> | ||
| <PropSend title={title.person} /> | ||
| <PropSendDestructuring title={title.person} /> | ||
| <PropCondition testprop="testasdf" /> | ||
| <PropTernary testprops="" /> | ||
| </div> | ||
| ); | ||
| } |
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,13 @@ | ||
| export default function ListenClick() { | ||
| function handleClick() { | ||
| console.log("increment like count"); | ||
| } | ||
| return ( | ||
| <button | ||
| onClick={handleClick} | ||
| className="bg-red-500 border border-gray-300 shadow-lg rounded-lg px-4 py-2" | ||
| > | ||
| Like | ||
| </button> | ||
| ); | ||
| } |
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,30 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| export default function StateHooks() { | ||
| const [count, setCount] = useState(0); | ||
| function handleClick() { | ||
| console.log("increment like count"); | ||
| setCount(count + 1); | ||
| } | ||
| function handleReset() { | ||
| console.log("reset count"); | ||
| setCount(0); | ||
| // setCount((count) => (count = 0)); // can use function to setCount like this | ||
| } | ||
| return ( | ||
| <> | ||
| <button | ||
| onClick={handleClick} | ||
| className="bg-red-500 border border-gray-300 shadow-lg rounded-lg px-4 py-2" | ||
| > | ||
| Like ({count}) | ||
| </button> | ||
| <button | ||
| onClick={handleReset} | ||
| className="bg-red-500 border border-gray-300 shadow-lg rounded-lg px-4 py-2" | ||
| > | ||
| reset | ||
| </button> | ||
| </> | ||
| ); | ||
| } |
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,18 @@ | ||
| function createTitle(testprop: string) { | ||
| if (testprop) { | ||
| return testprop; | ||
| } else { | ||
| return "Default testprop"; | ||
| } | ||
| } | ||
|
|
||
| export default function PropCondition({ testprop }: { testprop: string }) { | ||
| return ( | ||
| <> | ||
| <h4 className="text-lg font-bold decoration-stone-600"> | ||
| Condition redering | ||
| </h4> | ||
| <div>This is Prop with condition: {createTitle(testprop)}</div> | ||
| </> | ||
| ); | ||
| } |
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,28 @@ | ||
| import { Person, Title } from "../../utils/helper"; | ||
|
|
||
| export default function PropSend(props: { title: Person[] }) { | ||
| console.log("this data from prop:", props); | ||
| console.log("Prop type is:", typeof props); | ||
| console.log("this data in prop:", props.title); | ||
| console.log("Title in Prop type is:", typeof props.title); | ||
| // console.log( | ||
| // "this data in title:", | ||
| // props.title.id, | ||
| // props.title.name, | ||
| // props.title.description | ||
| // ); | ||
| return ( | ||
| <div> | ||
| <h4 className="text-lg font-bold decoration-stone-600">Passing props to a component</h4> | ||
| <ul> | ||
| {props.title.map((person, index) => ( | ||
| <li key={index}> | ||
| <div>id: {person.id}</div> | ||
| <div>name: {person.name}</div> | ||
| <div>description: {person.description}</div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
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,19 @@ | ||
| import { Person } from "../../utils/helper"; | ||
| export default function PropSendDestructuring({ title }: { title: Person[] }) { | ||
| return ( | ||
| <div className="mt-4"> | ||
| <h4 className="text-lg font-bold decoration-stone-600"> | ||
| Passing props to a component,When use destructuring | ||
| </h4> | ||
| <ul> | ||
| {title.map((person, index) => ( | ||
| <li key={index}> | ||
| <div>id: {person.id}</div> | ||
| <div>name: {person.name}</div> | ||
| <div>description: {person.description}</div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
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,12 @@ | ||
| export default function PropTernary({ testprops }: { testprops: string }) { | ||
| return ( | ||
| <> | ||
| <h4 className="text-lg font-bold decoration-stone-600"> | ||
| Condeition Redering,but use Ternary condition | ||
| </h4> | ||
| <div> | ||
| This is Prop with Ternary: {testprops ? testprops : "default value"} | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { NextResponse } from 'next/server' | ||
| import type { NextRequest } from 'next/server' | ||
|
|
||
| // This function can be marked `async` if using `await` inside | ||
| export function middleware(request: NextRequest) { | ||
| return NextResponse.redirect(new URL('/home', request.url)) | ||
| } | ||
|
|
||
| // See "Matching Paths" below to learn more | ||
| export const config = { | ||
| matcher: '/about/:path*', | ||
| } |
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,27 @@ | ||
| import { Title } from "./helper"; | ||
|
|
||
| export const title: Title = { | ||
| response: "ok", | ||
| person: [ | ||
| { | ||
| id: 1, | ||
| name: "offy", | ||
| description: "lorem offy asdf", | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "bam", | ||
| description: "lorem bam asdf", | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "nan", | ||
| description: "lorem nan fdas", | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: "edith", | ||
| description: "lorem edith fdaf", | ||
| }, | ||
| ], | ||
| }; |
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,11 @@ | ||
| export interface Title { | ||
| response:string, | ||
| person: Person[] | ||
| } | ||
|
|
||
|
|
||
| export interface Person { | ||
| id: number; | ||
| name: string; | ||
| description: string; | ||
| } |
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,25 @@ | ||
| const title: Title = { | ||
| response: "ok", | ||
| person: [ | ||
| { | ||
| id: 1, | ||
| name: "offy", | ||
| description: "lorem offy asdf", | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "bam", | ||
| description: "lorem bam asdf", | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: "nan", | ||
| description: "lorem nan fdas", | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: "edith", | ||
| description: "lorem edith fdaf", | ||
| }, | ||
| ], | ||
| }; |
Oops, something went wrong.