diff --git a/pages/comments.js b/pages/comments.js new file mode 100644 index 0000000..808e9c7 --- /dev/null +++ b/pages/comments.js @@ -0,0 +1,52 @@ +// pages/comments.js + +import { useState, useEffect } from 'react'; + +export default function Comments() { + const [comments, setComments] = useState([]); + const [newComment, setNewComment] = useState(''); + + useEffect(() => { + // Load comments from local storage when the component mounts + const savedComments = JSON.parse(localStorage.getItem('comments')) || []; + setComments(savedComments); + }, []); + + const handleAddComment = () => { + if (newComment.trim() === '') return; + + const updatedComments = [...comments, newComment]; + setComments(updatedComments); + setNewComment(''); + localStorage.setItem('comments', JSON.stringify(updatedComments)); + }; + + const handleRemoveComment = (index) => { + const updatedComments = comments.filter((_, i) => i !== index); + setComments(updatedComments); + localStorage.setItem('comments', JSON.stringify(updatedComments)); + }; + + return ( +
+

Comments

+
+ setNewComment(e.target.value)} + placeholder="Add a comment" + /> + +
+ +
+ ); +} \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 1c8bbab..f4301b4 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,18 @@ import Head from 'next/head'; +import Link from 'next/link'; +import { useState, useEffect } from 'react'; + import styles from '../styles/Home.module.css'; export default function Home() { + const [comments, setComments] = useState([]); + + useEffect(() => { + // Load comments from local storage when the component mounts + const savedComments = JSON.parse(localStorage.getItem('comments')) || []; + setComments(savedComments); + }, []); + return (
@@ -11,53 +22,31 @@ export default function Home() {

- Welcome to Next.js! + Playground project

- -

- Get started by editing pages/index.js -

+
- -

Documentation →

-

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

- - - -

Learn →

-

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

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

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

- +
+

Comments

+ +