Skip to content

Commit 37a5373

Browse files
py-dev-nandini-12py-dev-nandini-12
committed
feat: enhance Home component with weather widget integration and improved layout
1 parent 6568502 commit 37a5373

File tree

1 file changed

+136
-10
lines changed

1 file changed

+136
-10
lines changed

‎src/app/page.tsx‎

Lines changed: 136 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,143 @@
1-
import { weatherWidgetFlag } from "../../flags";
2-
import WeatherClient from "./components/WeatherClient";
1+
import Image from "next/image";
2+
import { FlagValues } from "flags/react";
3+
import { weatherWidgetFlag } from "./flags";
34

45
export default async function Home() {
5-
const isWeatherWidgetEnabled = await weatherWidgetFlag();
6+
const weatherWidgetValue = await weatherWidgetFlag();
67

78
return (
8-
<div className="container">
9-
<h1>Welcome to Next.js + Playwright</h1>
10-
{isWeatherWidgetEnabled ? (
11-
<WeatherClient isEnabled={isWeatherWidgetEnabled} />
12-
) : (
13-
<p>🚫 Feature X is OFF</p>
14-
)}
9+
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
10+
<FlagValues
11+
values={{
12+
[weatherWidgetFlag.key]: weatherWidgetValue,
13+
}}
14+
/>
15+
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
16+
<div className="w-[180px] h-[40px] grid place-items-center">
17+
<Image
18+
className={
19+
weatherWidgetValue ? "dark:invert opacity-50" : "dark:invert"
20+
}
21+
src="/next.svg"
22+
alt="Next.js logo"
23+
width={180}
24+
height={36.5446}
25+
priority
26+
/>
27+
</div>
28+
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
29+
<li className="mb-2">
30+
Get started by editing{" "}
31+
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
32+
app/page.tsx
33+
</code>
34+
.
35+
</li>
36+
<li className="mb-2">Save and see your changes instantly.</li>
37+
<li className="mb-2">
38+
Refresh the page to see random flag variations.
39+
</li>
40+
<li className="mb-2">Connect to Vercel to try Flags Explorer.</li>
41+
</ol>
42+
43+
<div className="flex gap-4 items-center flex-col sm:flex-row">
44+
<a
45+
className={`rounded-full border border-solid transition-colors flex items-center justify-center gap-2 text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 ${
46+
weatherWidgetValue
47+
? "border-black/[.08] dark:border-white/[.145] hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent"
48+
: "border-transparent bg-foreground text-background hover:bg-[#383838] dark:hover:bg-[#ccc]"
49+
}`}
50+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
51+
target="_blank"
52+
rel="noopener noreferrer"
53+
>
54+
<Image
55+
className={
56+
weatherWidgetValue ? "invert dark:invert-0" : "dark:invert"
57+
}
58+
src="/vercel.svg"
59+
alt="Vercel logomark"
60+
width={20}
61+
height={20}
62+
/>
63+
Deploy now
64+
</a>
65+
{weatherWidgetValue ? (
66+
<a
67+
className={`rounded-full border border-solid transition-colors flex items-center justify-center text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44 ${
68+
weatherWidgetValue
69+
? "border-transparent bg-foreground text-background hover:bg-[#383838] dark:hover:bg-[#ccc]"
70+
: "border-black/[.08] dark:border-white/[.145] hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent"
71+
}`}
72+
href="https://flags-sdk.dev?utm_source=vercel-examples&utm_medium=appdir-template-tw&utm_campaign=vercel-examples"
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
>
76+
Flags SDK docs
77+
</a>
78+
) : (
79+
<a
80+
className={`rounded-full border border-solid transition-colors flex items-center justify-center text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44 ${
81+
weatherWidgetValue
82+
? "border-transparent bg-foreground text-background hover:bg-[#383838] dark:hover:bg-[#ccc]"
83+
: "border-black/[.08] dark:border-white/[.145] hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent"
84+
}`}
85+
href="https://nextjs.org/docs?utm_source=vercel-examples&utm_medium=appdir-template-tw&utm_campaign=vercel-examples"
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
>
89+
Read our docs
90+
</a>
91+
)}
92+
</div>
93+
</main>
94+
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
95+
<a
96+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
97+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
98+
target="_blank"
99+
rel="noopener noreferrer"
100+
>
101+
<Image
102+
aria-hidden
103+
src="/file.svg"
104+
alt="File icon"
105+
width={16}
106+
height={16}
107+
/>
108+
Learn
109+
</a>
110+
<a
111+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
112+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
113+
target="_blank"
114+
rel="noopener noreferrer"
115+
>
116+
<Image
117+
aria-hidden
118+
src="/window.svg"
119+
alt="Window icon"
120+
width={16}
121+
height={16}
122+
/>
123+
Examples
124+
</a>
125+
<a
126+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
127+
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
128+
target="_blank"
129+
rel="noopener noreferrer"
130+
>
131+
<Image
132+
aria-hidden
133+
src="/globe.svg"
134+
alt="Globe icon"
135+
width={16}
136+
height={16}
137+
/>
138+
Go to nextjs.org →
139+
</a>
140+
</footer>
15141
</div>
16142
);
17143
}

0 commit comments

Comments
 (0)