Merge remote-tracking branch 'origin/feat/#5' into feat/#5

src/components/StateButton/SemesterStateButton.tsx

@@ -1,25 +1,27 @@
-import {StateButton} from "./StateButton";
-import {useGetSemesters} from "@/hooks/useGetSemesters.ts";
+import { useGetSemesters } from "@/hooks/useGetSemesters.ts";
+import { IcArrowsChevronDownLine } from "@yourssu/design-system-react";
+import { StateButton } from "./StateButton";
 
 export const SemesterStateButton = ({
-                                        selectedValue,
-                                        onStateChange,
-                                        size = "small",
-                                    }: {
-    selectedValue: string;
-    onStateChange: (value: string) => void;
-    size?: "small" | "medium";
+  selectedValue,
+  onStateChange,
+  size = "small",
+}: {
+  selectedValue: string;
+  onStateChange: (value: string) => void;
+  size?: "small" | "medium";
 }) => {
-    const {data: semesters} = useGetSemesters();
-    const options = semesters.map(semester => ({label: semester.semester}));
+  const { data: semesters } = useGetSemesters();
+  const options = semesters.map((semester) => ({ label: semester.semester }));
 
-    return (
-        <StateButton
-            options={options}
-            selectedValue={selectedValue}
-            onSelect={onStateChange}
-            variant="outlined"
-            size={size}
-        />
-    );
+  return (
+    <StateButton
+      options={options}
+      selectedValue={selectedValue}
+      onSelect={onStateChange}
+      variant="outlined"
+      size={size}
+      icon={<IcArrowsChevronDownLine />}
+    />
+  );
 };

src/components/StateButton/StateButton.tsx

@@ -1,40 +1,43 @@
-import {IcArrowsChevronUpLine} from "@yourssu/design-system-react";
-import {GenericDialog} from "../dialog/GenericDialog";
-import {StyledBoxButton} from "./StateButton.style";
+import { IcArrowsChevronUpLine } from "@yourssu/design-system-react";
+import { ReactNode } from "react";
+import { GenericDialog } from "../dialog/GenericDialog";
+import { StyledBoxButton } from "./StateButton.style";
 
 export type DialogOption = {
-    label: string;
-    color?: string;
+  label: string;
+  color?: string;
 };
 
 interface StateButtonProps {
-    options: DialogOption[];
-    selectedValue: string;
-    onSelect: (value: string) => void;
-    variant?: "filledPrimary" | "filledSecondary" | "outlined";
-    size?: "small" | "medium";
+  options: DialogOption[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+  variant?: "filledPrimary" | "filledSecondary" | "outlined";
+  size?: "small" | "medium";
+  icon?: ReactNode;
 }
 
 export const StateButton = ({
-                                options,
-                                selectedValue,
-                                onSelect,
-                                variant = "filledSecondary",
-                                size = "small",
-                            }: StateButtonProps) => {
-    return (
-        <GenericDialog options={options} onSelect={onSelect}>
-            {(triggerProps) => (
-                <StyledBoxButton
-                    size={size}
-                    variant={variant}
-                    rightIcon={<IcArrowsChevronUpLine/>}
-                    $selectedValue={selectedValue}
-                    {...triggerProps}
-                >
-                    {selectedValue}
-                </StyledBoxButton>
-            )}
-        </GenericDialog>
-    );
+  options,
+  selectedValue,
+  onSelect,
+  variant = "filledSecondary",
+  size = "small",
+  icon = <IcArrowsChevronUpLine />,
+}: StateButtonProps) => {
+  return (
+    <GenericDialog options={options} onSelect={onSelect}>
+      {(triggerProps) => (
+        <StyledBoxButton
+          size={size}
+          variant={variant}
+          rightIcon={icon}
+          $selectedValue={selectedValue}
+          {...triggerProps}
+        >
+          {selectedValue}
+        </StyledBoxButton>
+      )}
+    </GenericDialog>
+  );
 };

src/components/dialog/Dialog.style.ts

@@ -14,6 +14,8 @@ export const DialogContainer = styled.div<{
   box-shadow: 0px 0px 10px 0px rgba(110, 118, 135, 0.25);
   padding: 8px;
   z-index: 1;
+  max-height: 300px;
+  overflow-y: auto;
 `;
 
 export const StyledTextButton = styled(TextButton)`