this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add date and weather to Header

modamo-gh 71026910 958b62e5

+90 -4
+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 + };
+1 -1
app/components/Footer/components/ExternalLink.tsx
··· 3 3 const ExternalLink = ({href, Icon }) => { 4 4 return ( 5 5 <Link href={href} rel="noopener noreferrer" target="_blank"> 6 - <div className="bg-[#30255C] hover:bg-[#FF6A00] flex h-full items-center justify-center rounded-lg hover:text-[#30255C] text-[#FF6A00] "> 6 + <div className="bg-[#30255C] hover:bg-[#FF6A00] flex h-full items-center justify-center rounded-lg hover:text-[#30255C] text-[#FF6A00]"> 7 7 <Icon className="h-12 text-5xl w-12" size={48}/> 8 8 </div> 9 9 </Link>
+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
··· 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
··· 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
··· 1 1 import type { NextConfig } from "next"; 2 2 3 3 const nextConfig: NextConfig = { 4 - /* config options here */ 4 + images: { 5 + remotePatterns: [new URL("https://openweathermap.org/img/**")] 6 + } 5 7 }; 6 8 7 9 export default nextConfig;
+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
··· 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",