Skip to content

Commit 002a7da

Browse files
codewithryugencodewithryugen
committed
:)
1 parent 06b8861 commit 002a7da

File tree

17 files changed

+2347
-101
lines changed

17 files changed

+2347
-101
lines changed

‎context/ThemeContext.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use client"
2+
3+
import { createContext, useState } from "react"
4+
5+
export const ThemeContext = createContext()
6+
export const ThemeProvider = ({children})=>{
7+
const [mode,setMode] = useState("dark")
8+
const toggle = ()=>{
9+
setMode((prev)=>(prev==="dark"?"light":"dark"))
10+
}
11+
12+
return (<ThemeContext.Provider value={{toggle,mode}}>
13+
<div className={`theme ${mode}`}>
14+
{children}
15+
</div>
16+
</ThemeContext.Provider>)
17+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"eslint-config-next": "13.4.5",
1414
"next": "13.4.5",
1515
"react": "18.2.0",
16-
"react-dom": "18.2.0"
16+
"react-dom": "18.2.0",
17+
"swr": "^2.1.5"
1718
}
1819
}

‎src/app/blog/[slug]/page.jsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
import React from 'react'
22
import styles from './page.module.css'
33
import Image from 'next/image'
4-
const Post = () => {
4+
import {notFound} from 'next/navigation'
5+
6+
async function getData(id) {
7+
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`,{
8+
cache:'no-store'
9+
})
10+
if (!res.ok) {
11+
return notFound()
12+
}
13+
14+
return res.json()
15+
}
16+
17+
18+
const Post = async ({params}) => {
19+
const data = await getData(params.slug);
520
return (
621
<div className={styles.container}>
722
<div className={styles.top}>
823
<div className={styles.info}>
9-
<h1 className={styles.title}>Lorem ipsum dolor sit amet consectetur.</h1>
24+
<h1 className={styles.title}>{data.title}</h1>
1025
<p className={styles.desc}>
11-
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
12-
In obcaecati possimus quaerat! Corporis, totam ab quibusdam deserunt temporibus ducimus eum ea sint,
13-
iusto quod quas, architecto libero iste velit non.
26+
{
27+
data.body
28+
}
1429
</p>
1530
<div className={styles.author}>
1631
<Image

‎src/app/blog/page.jsx‎

Lines changed: 33 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,41 @@ import styles from './page.module.css'
33
import Link from 'next/link'
44
import Image from 'next/image'
55

6-
const Blog = () => {
6+
7+
async function getData() {
8+
const res = await fetch('https://jsonplaceholder.typicode.com/posts',{
9+
cache:'no-store'
10+
})
11+
if (!res.ok) {
12+
throw new Error('Failed to fetch data')
13+
}
14+
15+
return res.json()
16+
}
17+
18+
const Blog = async () => {
19+
const data = await getData();
720
return (
821
<div className={styles.mainContainer}>
9-
<Link href='/blog/tesslug' className={styles.container}>
10-
<div className={styles.imgContainer}>
11-
<Image
12-
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
13-
alt='image blog'
14-
width={400}
15-
height={250}
16-
className={styles.img}
17-
/>
18-
</div>
19-
<div className={styles.content}>
20-
<h1 className={styles.title}>ナツコミ2021開催中！</h1>
21-
<p className={styles.description}>対象商品購入でコースタープレゼント‼️】 8月よりナツコミ参加書店にて #マッシュル のコースター配布を開始します！
22-
<br></br>対象商品を購入してぜひゲットしてくださいね✨
23-
<br></br>※配布条件・時期は書店により異なります。</p>
24-
</div>
25-
</Link>
26-
<Link href='/blog/tesslug' className={styles.container}>
27-
<div className={styles.imgContainer}>
28-
<Image
29-
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
30-
alt='image blog'
31-
width={400}
32-
height={250}
33-
className={styles.img}
34-
/>
35-
</div>
36-
<div className={styles.content}>
37-
<h1 className={styles.title}>ナツコミ2021開催中！</h1>
38-
<p className={styles.description}>対象商品購入でコースタープレゼント‼️】 8月よりナツコミ参加書店にて #マッシュル のコースター配布を開始します！
39-
<br></br>対象商品を購入してぜひゲットしてくださいね✨
40-
<br></br>※配布条件・時期は書店により異なります。</p>
41-
</div>
42-
</Link>
43-
<Link href='/blog/tesslug' className={styles.container}>
44-
<div className={styles.imgContainer}>
45-
<Image
46-
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
47-
alt='image blog'
48-
width={400}
49-
height={250}
50-
className={styles.img}
51-
/>
52-
</div>
53-
<div className={styles.content}>
54-
<h1 className={styles.title}>ナツコミ2021開催中！</h1>
55-
<p className={styles.description}>対象商品購入でコースタープレゼント‼️】 8月よりナツコミ参加書店にて #マッシュル のコースター配布を開始します！
56-
<br></br>対象商品を購入してぜひゲットしてくださいね✨
57-
<br></br>※配布条件・時期は書店により異なります。</p>
58-
</div>
59-
</Link>
22+
{
23+
data.map(item=>(
24+
<Link href={`/blog/${item.id}`} className={styles.container} key={item.id}>
25+
<div className={styles.imgContainer}>
26+
<Image
27+
src='https://i.pinimg.com/564x/7d/7a/02/7d7a02a6df18a1dfce7e5d8c74b9a7d7.jpg'
28+
alt='image blog'
29+
width={400}
30+
height={250}
31+
className={styles.img}
32+
/>
33+
</div>
34+
<div className={styles.content}>
35+
<h1 className={styles.title}>{item.title}</h1>
36+
<p className={styles.description}>{item.body}</p>
37+
</div>
38+
</Link>
39+
))
40+
}
6041
</div>
6142
)
6243
}

‎src/app/dashboard/page.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
import React from 'react'
1+
"use client"
2+
3+
import React, { useEffect, useState } from 'react'
4+
import useSWR from 'swr'
25

36
const Dashboard = () => {
7+
const fetcher = (...args) => fetch(...args).then(res => res.json())
8+
const { data, err, isLoading } = useSWR('https://jsonplaceholder.typicode.com/posts', fetcher)
9+
console.log(fetcher)
410
return (
511
<div>Dashboard</div>
612
)

‎src/app/dashboard/page.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.container{
2+
3+
}

‎src/app/globals.css‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,28 @@ html,
88
body {
99
max-width: 100vw;
1010
overflow-x: hidden;
11-
background-color: #111;
12-
color: #bbb;
11+
12+
}
13+
14+
.theme{
15+
transition:all 1.5s ease;
1316
}
1417

1518
a{
1619
text-decoration: none;
1720
color:inherit;
1821
}
1922

23+
.light{
24+
background-color: white;
25+
color: #111;
26+
}
27+
28+
.dark{
29+
background-color: #111;
30+
color: #bbb;
31+
}
32+
2033
.container{
2134
max-width: 1366px;
2235
min-height: 100vh;

‎src/app/layout.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Navbar from '@/components/navbar/Navbar'
22
import './globals.css'
33
import { Inter ,Poppins} from 'next/font/google'
44
import Footer from '@/components/footer/Footer'
5+
import { ThemeProvider } from '../../context/ThemeContext';
56

67
const poppins = Poppins({ weight: ['100','200','300','400','500','600','700','800','900'],subsets:['latin']});
78

@@ -14,11 +15,13 @@ export default function RootLayout({ children }) {
1415
return (
1516
<html lang="en">
1617
<body className={poppins.className}>
17-
<div className="container">
18-
<Navbar/>
19-
{children}
20-
<Footer/>
21-
</div>
18+
<ThemeProvider>
19+
<div className="container">
20+
<Navbar/>
21+
{children}
22+
<Footer/>
23+
</div>
24+
</ThemeProvider>
2225
</body>
2326
</html>
2427
)

‎src/app/portofolio/[category]/data.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export const items = {
2+
applications : [
3+
{
4+
id:1,
5+
title:'anime app',
6+
desc:'my portofolio mobile app',
7+
image:'https://i.pinimg.com/564x/38/5a/33/385a33b33c704b3e46626030d23063d0.jpg'
8+
},
9+
{
10+
id:2,
11+
title:'anime app v2',
12+
desc:'my portofolio mobile app',
13+
image:'https://i.pinimg.com/564x/be/49/2f/be492f2b651243f2162f6d00852b8446.jpg'
14+
}
15+
],
16+
illustrations:[
17+
{
18+
id:1,
19+
title:'boku boku',
20+
desc:'bokuwa bokutachiwa',
21+
image:'https://i.pinimg.com/564x/1e/61/71/1e617134011c5f21d3668f54b81fd316.jpg'
22+
},
23+
{
24+
id:2,
25+
title:'deze denku',
26+
desc:'denzawadenkun',
27+
image:'https://i.pinimg.com/564x/a1/a6/59/a1a659e57d2651a989b654b2d0ae3c15.jpg'
28+
}
29+
],
30+
websites:[
31+
{
32+
id:1,
33+
title:'anime wy be',
34+
desc:'web streaming anime',
35+
image:'https://i.pinimg.com/564x/3f/ed/74/3fed74dd3bf0bd6e47739f4977895eca.jpg'
36+
},
37+
{
38+
id:2,
39+
title:'anime app kidsly',
40+
desc:'anime web app',
41+
image:'https://i.pinimg.com/564x/55/92/77/559277876d9f1c60968b8ea7c918b38f.jpg'
42+
}
43+
]
44+
}

‎src/app/portofolio/[category]/page.jsx‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,45 @@ import React from 'react'
22
import styles from './page.module.css'
33
import Button from '@/components/button/Button'
44
import Image from 'next/image'
5+
import { items } from './data'
6+
import { notFound } from 'next/navigation'
7+
8+
const getData = (cat)=>{
9+
const data = items[cat]
10+
if(data){
11+
return data;
12+
}
13+
14+
return notFound();
15+
}
516
const Category = ({params}) => {
17+
const data = getData(params.category);
618
return (
719
<div className={styles.container}>
820
<h1 className={styles.categoryTitle}>{params.category}</h1>
9-
<div className={styles.item}>
10-
<div className={styles.content}>
11-
<h1 className={styles.title}>Lorem, ipsum.</h1>
12-
<p className={styles.description}>Lorem ipsum dolor sit amet consectetur adipisicing elit.
13-
<b/>Eos eligendi alias, maxime illum assumenda fuga.
14-
</p>
15-
<Button text="See More" url="#"/>
16-
</div>
17-
<div className={styles.imgContainer}>
18-
<Image
19-
fill={true}
20-
src='https://i.pinimg.com/originals/d7/17/ed/d717ed080e612912c323110fef4670e8.jpg'
21-
alt='berontaksenku'
22-
className={styles.img}
23-
/>
24-
</div>
25-
</div>
26-
<div className={styles.item}>
27-
<div className={styles.content}>
28-
<h1 className={styles.title}>Lorem, ipsum.</h1>
29-
<p className={styles.description}>Lorem ipsum dolor sit amet consectetur adipisicing elit.
30-
<b/>Eos eligendi alias, maxime illum assumenda fuga.
31-
</p>
32-
<Button text="See More" url="#"/>
33-
</div>
34-
<div className={styles.imgContainer}>
35-
<Image
36-
fill={true}
37-
src='https://i.pinimg.com/originals/d7/17/ed/d717ed080e612912c323110fef4670e8.jpg'
38-
alt='berontaksenku'
39-
className={styles.img}
40-
/>
41-
</div>
21+
{
22+
data.map(item=>(
23+
<div className={styles.item} key={item.id}>
24+
<div className={styles.content}>
25+
<h1 className={styles.title}>{item.title}</h1>
26+
<p className={styles.description}>
27+
{
28+
item.desc
29+
}
30+
</p>
31+
<Button text="See More" url="#"/>
32+
</div>
33+
<div className={styles.imgContainer}>
34+
<Image
35+
fill={true}
36+
src={item.image}
37+
alt='berontaksenku'
38+
className={styles.img}
39+
/>
40+
</div>
4241
</div>
42+
))
43+
}
4344
</div>
4445
)
4546
}

0 commit comments

Comments
 (0)