Skip to content

Commit c37d6cc

Browse files
py-dev-nandini-12py-dev-nandini-12
committed
refactor: simplify Home component by removing unused code and enhancing weather widget display logic
1 parent bcd7629 commit c37d6cc

File tree

1 file changed

+10
-136
lines changed

1 file changed

+10
-136
lines changed

‎src/app/page.tsx‎

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

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

87
return (
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>
8+
<div>
9+
<h1>Weather Widget</h1>
10+
{isWeatherWidgetEnabled ? (
11+
<WeatherWidget />
12+
) : (
13+
<p>🚫 Weather Widget is OFF</p>
14+
)}
14115
</div>
14216
);
14317
}

0 commit comments

Comments
 (0)