Skip to content

Commit 08cf2f7

Browse files
FoggyMtnDrifterFoggyMtnDrifter
committed
code cleanup, general improvements
1 parent ff465a4 commit 08cf2f7

File tree

8 files changed

+165
-80
lines changed

8 files changed

+165
-80
lines changed

‎src/components/Button.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { motion } from "framer-motion"
2+
import type { ComponentProps } from "react"
3+
4+
interface ButtonProps extends ComponentProps<typeof motion.button> {
5+
variant?: 'primary' | 'negative' | 'ghost';
6+
children: React.ReactNode;
7+
className?: string;
8+
}
9+
10+
export function Button({
11+
variant = 'primary',
12+
children,
13+
className = '',
14+
...props
15+
}: ButtonProps) {
16+
const baseStyles = "py-3 md:py-4 px-6 md:px-8 text-lg md:text-xl font-medium text-white rounded-full transition-colors shadow-lg font-red-hat cursor-pointer inline-block"
17+
18+
const variantStyles = {
19+
primary: "bg-[#111827] hover:bg-[#1f2937]",
20+
negative: "bg-[#DC2626] hover:bg-[#B91C1C]",
21+
ghost: "bg-white/15 hover:bg-white/20"
22+
}
23+
24+
return (
25+
<motion.button
26+
whileHover={{ scale: 1.02 }}
27+
whileTap={{ scale: 0.98 }}
28+
className={`${baseStyles} ${variantStyles[variant]} ${className || ''}`}
29+
{...props}
30+
>
31+
{children}
32+
</motion.button>
33+
)
34+
}

‎src/components/ButtonStatic.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
import type { HTMLAttributes } from 'astro/types';
3+
4+
interface Props {
5+
variant?: 'primary' | 'negative' | 'ghost';
6+
href?: string;
7+
class?: string;
8+
}
9+
10+
const {
11+
variant = 'primary',
12+
href,
13+
class: className,
14+
} = Astro.props;
15+
16+
const baseStyles = "py-3 md:py-4 px-6 md:px-8 text-lg md:text-xl font-medium text-white rounded-full transition-colors shadow-lg font-red-hat cursor-pointer inline-block"
17+
18+
const variantStyles = {
19+
primary: "bg-[#111827] hover:bg-[#1f2937]",
20+
negative: "bg-[#DC2626] hover:bg-[#B91C1C]",
21+
ghost: "bg-white/15 hover:bg-white/20"
22+
}
23+
24+
const Element = href ? 'a' : 'button';
25+
---
26+
27+
<Element
28+
href={href}
29+
class={`${baseStyles} ${variantStyles[variant]} ${className || ''}`}
30+
>
31+
<slot />
32+
</Element>

‎src/components/Footer.astro‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
---
3+
4+
<footer class="text-center py-4 text-white/60 text-sm">
5+
<p>
6+
Generated by <a href="https://github.com/rocky-linux/asknot-rocky" class="underline hover:text-white transition-colors">asknot-rocky</a>.
7+
Project inspired by <a href="https://github.com/fedora-infra/asknot-ng" class="underline hover:text-white transition-colors">asknot-ng</a>.
8+
</p>
9+
</footer>

‎src/components/Logo.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
interface Props {
3+
className?: string;
4+
width?: number;
5+
height?: number;
6+
}
7+
8+
const { className = "h-8 md:h-12 w-auto", width = 180, height = 48 } = Astro.props;
9+
---
10+
11+
<img
12+
src="/images/logo-white.svg"
13+
alt="Rocky Linux Logo"
14+
width={width}
15+
height={height}
16+
class={className}
17+
/>

‎src/components/PageHeader.astro‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
import Logo from '@/components/Logo.astro';
3+
4+
interface Props {
5+
subtitle: string;
6+
title: string;
7+
}
8+
9+
const { subtitle, title } = Astro.props;
10+
---
11+
12+
<div class="flex flex-col items-center space-y-8 md:space-y-12">
13+
<Logo />
14+
<div class="text-center space-y-2 md:space-y-4">
15+
<h2 class="text-base md:text-2xl text-white/80 font-normal font-red-hat tracking-wide px-4">
16+
{subtitle}
17+
</h2>
18+
<h1 class="text-xl md:text-4xl font-bold text-white font-red-hat tracking-tight px-4">
19+
{title}
20+
</h1>
21+
<slot />
22+
</div>
23+
</div>

src/components/question-node.tsx renamed to src/components/QuestionNode.tsx

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { useState, useEffect } from "react"
44
import { motion, AnimatePresence } from "framer-motion"
5+
import { Button } from "./Button"
56

67
const POSITIVE_RESPONSES = [
78
"Sounds awesome!",
@@ -108,14 +109,11 @@ export function QuestionNode({ node }: { node: Node }) {
108109
That's all of our teams.
109110
</h2>
110111
<p className="text-xl md:text-2xl text-white/70 font-normal tracking-wide">
111-
try starting over and exploring the sub-options. we promise there's something for everyone!
112+
try starting over and exploring the sub-options. we promise there's something for everyone!
112113
</p>
113114
</div>
114115
<div className="flex flex-col gap-3 md:gap-4 w-full max-w-md mx-auto">
115-
<motion.button
116-
whileHover={{ scale: 1.02 }}
117-
whileTap={{ scale: 0.98 }}
118-
className="py-3 md:py-4 px-6 md:px-8 text-lg md:text-xl font-medium bg-[#111827] hover:bg-[#1f2937] text-white rounded-full transition-colors shadow-lg font-red-hat cursor-pointer"
116+
<Button
119117
onClick={() => {
120118
setCurrentNode(node)
121119
setOptionIndex(0)
@@ -125,7 +123,7 @@ export function QuestionNode({ node }: { node: Node }) {
125123
}}
126124
>
127125
Start Over
128-
</motion.button>
126+
</Button>
129127
<p className="text-sm md:text-base text-white/60 italic mt-4">
130128
Not finding something that interests you? Join our{' '}
131129
<a
@@ -160,10 +158,7 @@ export function QuestionNode({ node }: { node: Node }) {
160158
)}
161159
</div>
162160
<div className="flex flex-col gap-3 md:gap-4 w-full max-w-md mx-auto">
163-
<motion.button
164-
whileHover={{ scale: 1.02 }}
165-
whileTap={{ scale: 0.98 }}
166-
className="py-3 md:py-4 px-6 md:px-8 text-lg md:text-xl font-medium bg-[#111827] hover:bg-[#1f2937] text-white rounded-full transition-colors shadow-lg font-red-hat cursor-pointer"
161+
<Button
167162
onClick={() => {
168163
if (currentOption.link) {
169164
window.open(currentOption.link, '_blank')
@@ -178,11 +173,9 @@ export function QuestionNode({ node }: { node: Node }) {
178173
}}
179174
>
180175
{positiveButtonText}
181-
</motion.button>
182-
<motion.button
183-
whileHover={{ scale: 1.02 }}
184-
whileTap={{ scale: 0.98 }}
185-
className="py-3 md:py-4 px-6 md:px-8 text-lg md:text-xl font-medium bg-[#DC2626] hover:bg-[#B91C1C] text-white rounded-full transition-colors shadow-lg font-red-hat cursor-pointer"
176+
</Button>
177+
<Button
178+
variant="negative"
186179
onClick={() => {
187180
if (isLastOption) {
188181
if (isMainLevel) {
@@ -203,7 +196,7 @@ export function QuestionNode({ node }: { node: Node }) {
203196
}}
204197
>
205198
{negativeButtonText}
206-
</motion.button>
199+
</Button>
207200
</div>
208201
</motion.div>
209202
)}

‎src/pages/404.astro‎

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,37 @@
11
---
2-
import Layout from '@/layouts/Layout.astro';
2+
import Layout from "@/layouts/Layout.astro";
3+
import PageHeader from "@/components/PageHeader.astro";
4+
import Footer from "@/components/Footer.astro";
5+
import ButtonStatic from "@/components/ButtonStatic.astro";
36
---
47

5-
<Layout title="404 - Page Not Found" description="The page you're looking for doesn't exist">
6-
<main class="min-h-screen flex flex-col bg-gradient-to-b from-[#10B981] to-[#0a8f63] p-4 text-white">
7-
<div class="flex-1 flex items-center justify-center">
8-
<div class="w-full max-w-4xl space-y-8 md:space-y-12 p-4 md:p-8">
9-
<div class="flex flex-col items-center space-y-8 md:space-y-12">
10-
<img
11-
src="/images/logo-white.svg"
12-
alt="Rocky Linux Logo"
13-
width={180}
14-
height={48}
15-
class="h-8 md:h-12 w-auto"
16-
/>
17-
<div class="text-center space-y-2 md:space-y-4">
18-
<h2 class="text-base md:text-2xl text-white/80 font-normal font-red-hat tracking-wide px-4">
19-
Oops! Page not found
20-
</h2>
21-
<h1 class="text-xl md:text-4xl font-bold text-white font-red-hat tracking-tight px-4">
22-
404
23-
</h1>
24-
<p class="text-white/80 mt-4">
25-
The page you're looking for doesn't exist. Let's get you back on track.
26-
</p>
27-
<a
28-
href="/"
29-
class="inline-block mt-6 px-6 py-3 bg-white/15 hover:bg-white/20 rounded-lg transition-colors duration-200"
30-
>
31-
Return Home
32-
</a>
33-
</div>
34-
</div>
35-
</div>
36-
</div>
37-
<footer class="text-center py-4 text-white/60 text-sm">
38-
<p>
39-
Generated by <a href="https://github.com/rocky-linux/asknot-rocky" class="underline hover:text-white transition-colors">asknot-rocky</a>.
40-
Project inspired by <a href="https://github.com/fedora-infra/asknot-ng" class="underline hover:text-white transition-colors">asknot-ng</a>.
41-
</p>
42-
</footer>
43-
</main>
8+
<Layout
9+
title="404 - Page Not Found"
10+
description="The page you're looking for doesn't exist"
11+
>
12+
<main
13+
class="min-h-screen flex flex-col bg-gradient-to-b from-[#10B981] to-[#0a8f63] p-4 text-white"
14+
>
15+
<div class="flex-1 flex items-center justify-center">
16+
<div class="w-full max-w-4xl space-y-8 md:space-y-12 p-4 md:p-8">
17+
<PageHeader
18+
subtitle="Oops! Page not found"
19+
title="404"
20+
>
21+
<p class="text-white/80 mt-4">
22+
The page you're looking for doesn't exist. Let's get
23+
you back on track.
24+
</p>
25+
<ButtonStatic
26+
href="/"
27+
variant="ghost"
28+
class="mt-6"
29+
>
30+
Return Home
31+
</ButtonStatic>
32+
</PageHeader>
33+
</div>
34+
</div>
35+
<Footer />
36+
</main>
4437
</Layout>

‎src/pages/index.astro‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
22
import Layout from '@/layouts/Layout.astro';
33
import questionsData from "@/questions/default.json";
4-
import { QuestionNode } from '@/components/question-node';
4+
import { QuestionNode } from '@/components/QuestionNode';
5+
import PageHeader from '@/components/PageHeader.astro';
6+
import Footer from '@/components/Footer.astro';
57
68
const rootNode = {
79
id: "root",
@@ -16,23 +18,10 @@ const rootNode = {
1618
<main class="min-h-screen flex flex-col bg-gradient-to-b from-[#10B981] to-[#0a8f63] p-4 text-white">
1719
<div class="flex-1 flex items-center justify-center">
1820
<div class="w-full max-w-4xl space-y-8 md:space-y-12 p-4 md:p-8">
19-
<div class="flex flex-col items-center space-y-8 md:space-y-12">
20-
<img
21-
src="/images/logo-white.svg"
22-
alt="Rocky Linux Logo"
23-
width={180}
24-
height={48}
25-
class="h-8 md:h-12 w-auto"
26-
/>
27-
<div class="text-center space-y-2 md:space-y-4">
28-
<h2 class="text-base md:text-2xl text-white/80 font-normal font-red-hat tracking-wide px-4">
29-
Want to help Rocky Linux? Tell me...
30-
</h2>
31-
<h1 class="text-xl md:text-4xl font-bold text-white font-red-hat tracking-tight px-4">
32-
What's your area of interest?
33-
</h1>
34-
</div>
35-
</div>
21+
<PageHeader
22+
subtitle="Want to help Rocky Linux? Tell me..."
23+
title="What's your area of interest?"
24+
/>
3625
<noscript>
3726
<div class="text-center space-y-8">
3827
<div class="space-y-2 md:space-y-4">
@@ -57,11 +46,6 @@ const rootNode = {
5746
</div>
5847
</div>
5948
</div>
60-
<footer class="text-center py-4 text-white/60 text-sm">
61-
<p>
62-
Generated by <a href="https://github.com/rocky-linux/asknot-rocky" class="underline hover:text-white transition-colors">asknot-rocky</a>.
63-
Project inspired by <a href="https://github.com/fedora-infra/asknot-ng" class="underline hover:text-white transition-colors">asknot-ng</a>.
64-
</p>
65-
</footer>
49+
<Footer />
6650
</main>
6751
</Layout>

0 commit comments

Comments
 (0)