this repo has no description
Add date and weather to Header
+90
-4
+15
app/api/weather/route.ts
+15
app/api/weather/route.ts
···
1
+
import { NextRequest, NextResponse } from "next/server";
2
+
3
+
export const GET = async (request: NextRequest) => {
4
+
const response = await fetch(
5
+
`https://api.openweathermap.org/data/3.0/onecall?lat=39.2908816&lon=-76.610759&appid=${process.env.OPENWEATHER}&units=imperial`
6
+
);
7
+
const json = await response.json();
8
+
const weather = {
9
+
feelsLike: json.current.feels_like,
10
+
icon: `https://openweathermap.org/img/wn/${json.current.weather[0].icon}.png`,
11
+
temp: json.current.temp
12
+
};
13
+
14
+
return NextResponse.json(weather);
15
+
};
+22
app/components/Header/components/Weather.tsx
+22
app/components/Header/components/Weather.tsx
···
1
+
import Image from "next/image";
2
+
3
+
const Weather = async () => {
4
+
const response = await fetch("http://localhost:3000/api/weather");
5
+
const json = await response.json();
6
+
7
+
return (
8
+
<div className="flex gap-2 items-center justify-end">
9
+
<div className="h-8 relative w-8">
10
+
<Image
11
+
alt={""}
12
+
fill
13
+
src={json.icon}
14
+
/>
15
+
</div>
16
+
<p>{`${Math.round(json.temp)}°`}</p>
17
+
<p>{`Feels Like: ${Math.round(json.feelsLike)}°`}</p>
18
+
</div>
19
+
);
20
+
};
21
+
22
+
export default Weather;
+26
app/components/Header/index.tsx
+26
app/components/Header/index.tsx
···
1
+
import { RxAvatar } from "react-icons/rx";
2
+
import { DateTime } from "luxon";
3
+
import Weather from "./components/Weather";
4
+
5
+
const Header = () => {
6
+
return (
7
+
<div className="bg-[#30255C] flex p-2">
8
+
<div className="flex flex-col flex-1 gap-2 justify-center h-full w-full">
9
+
<h1 className="semibold text-3xl w-fit">Bmore Today</h1>
10
+
<h2 className="text-lg">Go Outside and B(e)More</h2>
11
+
</div>
12
+
<div className="flex gap-2 items-center">
13
+
<div>
14
+
<p>{DateTime.now().toLocaleString(DateTime.DATE_HUGE)}</p>
15
+
<Weather />
16
+
</div>
17
+
<RxAvatar
18
+
className="hover:cursor-pointer text-[#FF6A00]"
19
+
size={48}
20
+
/>
21
+
</div>
22
+
</div>
23
+
);
24
+
};
25
+
26
+
export default Header;
+3
-2
app/page.tsx
+3
-2
app/page.tsx
···
1
1
import Footer from "./components/Footer";
2
+
import Header from "./components/Header";
2
3
3
4
const App = () => {
4
5
return (
5
6
<div className="bg-[#1C1A29] h-screen grid grid-rows-10">
6
-
<div className="bg-yellow-500"></div>
7
+
<Header />
7
8
<div className="bg-blue-500 row-span-8"></div>
8
-
<Footer></Footer>
9
+
<Footer />
9
10
</div>
10
11
);
11
12
};
+3
-1
next.config.ts
+3
-1
next.config.ts
+18
package-lock.json
+18
package-lock.json
···
8
8
"name": "bmore_today",
9
9
"version": "0.1.0",
10
10
"dependencies": {
11
+
"luxon": "^3.7.2",
11
12
"next": "16.1.6",
12
13
"react": "19.2.3",
13
14
"react-dom": "19.2.3",
···
15
16
},
16
17
"devDependencies": {
17
18
"@tailwindcss/postcss": "^4",
19
+
"@types/luxon": "^3.7.1",
18
20
"@types/node": "^20",
19
21
"@types/react": "^19",
20
22
"@types/react-dom": "^19",
···
1543
1545
"version": "0.0.29",
1544
1546
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
1545
1547
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
1548
+
"dev": true,
1549
+
"license": "MIT"
1550
+
},
1551
+
"node_modules/@types/luxon": {
1552
+
"version": "3.7.1",
1553
+
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
1554
+
"integrity": "sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==",
1546
1555
"dev": true,
1547
1556
"license": "MIT"
1548
1557
},
···
4867
4876
"license": "ISC",
4868
4877
"dependencies": {
4869
4878
"yallist": "^3.0.2"
4879
+
}
4880
+
},
4881
+
"node_modules/luxon": {
4882
+
"version": "3.7.2",
4883
+
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
4884
+
"integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
4885
+
"license": "MIT",
4886
+
"engines": {
4887
+
"node": ">=12"
4870
4888
}
4871
4889
},
4872
4890
"node_modules/magic-string": {
+2
package.json
+2
package.json
···
9
9
"lint": "eslint"
10
10
},
11
11
"dependencies": {
12
+
"luxon": "^3.7.2",
12
13
"next": "16.1.6",
13
14
"react": "19.2.3",
14
15
"react-dom": "19.2.3",
···
16
17
},
17
18
"devDependencies": {
18
19
"@tailwindcss/postcss": "^4",
20
+
"@types/luxon": "^3.7.1",
19
21
"@types/node": "^20",
20
22
"@types/react": "^19",
21
23
"@types/react-dom": "^19",