Skip to content

Add DropdownButton and rename ButtonWithIcon into ButtonIcon #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Diubii wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Add DropdownButton and rename ButtonWithIcon into ButtonIcon #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
31970d6
Signed commit
Diubii Oct 13, 2025
d16b46e
Signed commit 2
Diubii Oct 13, 2025
ff76fbb
Merge branch 'main' into Diubii/button
Diubii Dec 16, 2025
3c1c386
First button commit
Diubii Dec 17, 2025
723d0b4
Button styles
Diubii Dec 17, 2025
677c943
Renamed buttonWithIcon.tsx to button-with-icon.tsx
Diubii Mar 17, 2026
c637bf7
merge: main into Diubii/button
Diubii May 3, 2026
9e61420
feat: add button-dropdown; rename: ButtonWithIcon -> ButtonIcon
Diubii May 3, 2026
6fc778d
chore: biome
Diubii May 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Image from "next/image"
import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
import discord from "@/assets/icons/discord.svg"
import telegram from "@/assets/icons/telegram.svg"
import { DropdownButton } from "@/components/button-dropdown"
import { CardMultipleIcons } from "@/components/card-multiple-icons"
import { AboutUs } from "@/components/home/about-us"
import { Hero } from "@/components/home/hero"
Expand All @@ -13,7 +14,14 @@ export default function Home() {
<Hero />
<Materials />
<AboutUs />
<div className="mx-auto w-fit py-12">
<div className="mx-auto flex w-fit flex-col items-center gap-4 py-12">
<DropdownButton
placeholder="Select language"
options={[
{ label: "Italian", value: "it" },
{ label: "English", value: "en" },
]}
/>
Comment on lines +18 to +24
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

DropdownButton has no onChange/value — language selection is a no-op.

Without onChange and managed value, user selections are swallowed by Radix internals and never reach application state. If the language-switching logic is deferred, add a // TODO comment; otherwise wire up useState (or a context/i18n hook) to make the selection functional.

⚡ Minimal wiring example (client component) 
+"use client"
+import { useState } from "react"
 import { DropdownButton } from "@/components/button-dropdown"

 export default function Home() {
+  const [lang, setLang] = useState<string>()
   return (
     <main className="w-full">
       ...
       <DropdownButton
         placeholder="Select language"
         options={[
           { label: "Italian", value: "it" },
           { label: "English", value: "en" },
         ]}
+        value={lang}
+        onChange={setLang}
       />

Note: actual i18n integration (e.g. next-intl, next/navigation locale routing) would replace the useState placeholder above.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/page.tsx` around lines 18 - 24, The DropdownButton in page.tsx is
missing value and onChange wiring so selections never update app state; add a
controlled state or hook to handle language changes: inside the page component
(or a client wrapper) create state (e.g., useState or an i18n/context hook) to
hold the selected language, pass that state as value and an onChange handler to
DropdownButton, and invoke your language-switch logic (or routing/i18n API) from
the handler; if you intentionally defer implementing the handler, add a clear
TODO noting that DropdownButton needs a value/onChange wired to the app's
language switcher.

<CardMultipleIcons
icons={[
<Image key="telegram" src={telegram} alt="Telegram" />,
Expand Down
39 changes: 39 additions & 0 deletions src/components/button-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export interface DropdownOption {
label: string
value: string
}

export interface ButtonDropdownProps {
placeholder?: string
options: DropdownOption[]
value?: string
onChange?: (value: string) => void
className?: string
size?: "default" | "sm"
}

export function DropdownButton({
placeholder = "Select",
options,
value,
onChange,
className,
size = "default",
}: ButtonDropdownProps) {
return (
<Select value={value} onValueChange={onChange}>
<SelectTrigger className={className} size={size}>
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
)
}
4 changes: 2 additions & 2 deletions src/components/ui/buttonWithIcon.tsx → src/components/button-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { IconType } from "react-icons"
import { Button } from "./button"
import { Button } from "./ui/button"

export function ButtonWithIcon({
export function ButtonIcon({
variant = "primary",
icon: Icon,
text,
Expand Down
Loading