wip: icon button

cdsctf · Dec 11, 2024 · a0e1208 · a0e1208
1 parent 876e171
commit a0e1208
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 82 deletions.
diff --git a/src/components/core/Avatar/Avatar.tsx b/src/components/core/Avatar/Avatar.tsx
@@ -20,7 +20,7 @@ export function Avatar(props: AvatarProps) {
         alt = "",
         color = "primary",
         size = "3rem",
-        fallback = <Icon icon={<UserCircleBoldDuotone />} />,
+        fallback = <UserCircleBoldDuotone />,
         style,
         ...rest
     } = props;

diff --git a/src/components/core/Button/Button.module.scss b/src/components/core/Button/Button.module.scss
@@ -25,12 +25,13 @@
     }
 
     &[data-variant="outlined"] {
-        background-color: var(--bg-2nd-color);
+        background-color: transparent;
         border-color: var(--button-bg-color);
     }
 
     &[data-variant="ghost"] {
         background-color: transparent;
+        box-shadow: none;
         color: var(--button-bg-color);
     }
 

diff --git a/src/components/core/Flex/Flex.module.scss b/src/components/core/Flex/Flex.module.scss
@@ -1,4 +1,6 @@
 .root {
     display: flex;
     gap: var(--flex-gap, 0);
+    align-items: var(--flex-align, baseline);
+    justify-content: var(--flex-justify, flex-start);
 }
diff --git a/src/components/core/Flex/Flex.tsx b/src/components/core/Flex/Flex.tsx
@@ -5,13 +5,31 @@ import clsx from "clsx";
 
 export interface FlexProps extends BoxProps {
     gap?: string;
+    justify?:
+        | "flex-start"
+        | "flex-end"
+        | "center"
+        | "space-between"
+        | "space-around"
+        | "space-evenly";
+    align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
 }
 
 export function Flex(props: FlexProps) {
-    const { gap, children, className, style, ...rest } = props;
+    const {
+        gap,
+        justify = "flex-start",
+        align = "baseline",
+        children,
+        className,
+        style,
+        ...rest
+    } = props;
 
     const variables = {
         "--flex-gap": gap,
+        "--flex-justify": justify,
+        "--flex-align": align,
     } as CSSProperties;
 
     return (

diff --git a/src/components/core/IconButton/IconButton.module.scss b/src/components/core/IconButton/IconButton.module.scss
@@ -4,11 +4,10 @@
     width: var(--icon-button-height);
     height: var(--icon-button-height);
     display: flex;
-    gap: 12px;
     align-items: center;
     justify-content: center;
     color: transparent;
-    border-radius: 12px;
+    border-radius: var(--icon-button-radius, 12px);
     border: 2.75px solid transparent;
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     transition: all 0.2s ease-in-out;
@@ -24,13 +23,14 @@
     }
 
     &[data-variant="outlined"] {
-        background-color: var(--bg-2nd-color);
+        background-color: transparent;
         border-color: var(--icon-button-bg-color);
     }
 
     &[data-variant="ghost"] {
         background-color: transparent;
         color: var(--icon-button-bg-color);
+        box-shadow: none;
     }
 
     &:disabled,
@@ -58,6 +58,8 @@
 }
 
 .content {
+    width: 62.5%;
+    height: 62.5%;
     color: var(--icon-button-text-color);
     font-size: 0.875rem;
     font-weight: 600;

diff --git a/src/components/core/IconButton/IconButton.tsx b/src/components/core/IconButton/IconButton.tsx
@@ -5,7 +5,8 @@ import { Box } from "../Box";
 
 export interface IconButtonProps extends ComponentProps<"button"> {
     height?: string;
-    variant?: "solid" | "outlined" | "subtle" | "transparent";
+    variant?: "solid" | "outlined" | "subtle" | "ghost";
+    radius?: string;
     loading?: boolean;
     disabled?: boolean;
     color?: string;
@@ -17,6 +18,7 @@ export function IconButton(props: IconButtonProps) {
     const {
         height = "36px",
         variant = "solid",
+        radius = "12px",
         color = "primary",
         loading = false,
         disabled = false,
@@ -31,6 +33,7 @@ export function IconButton(props: IconButtonProps) {
         "--icon-button-height": height,
         "--icon-button-bg-color": baseColor,
         "--icon-button-text-color": variant === "solid" ? "#fff" : baseColor,
+        "--icon-button-radius": radius,
     } as CSSProperties;
 
     return (

diff --git a/src/components/core/Pagination/Pagination.tsx b/src/components/core/Pagination/Pagination.tsx
@@ -6,6 +6,7 @@ import { IconButton } from "../IconButton";
 import styles from "./Pagination.module.scss";
 import AltArrowLeftBold from "~icons/solar/alt-arrow-left-bold";
 import AltArrowRightBold from "~icons/solar/alt-arrow-right-bold";
+import React from "react";
 
 export interface PaginationProps {
     total: number;
@@ -67,7 +68,7 @@ export function Pagination(props: PaginationProps) {
                 <Icon icon={<AltArrowLeftBold />} />
             </IconButton>
             {pages.map((page) => (
-                <>
+                <React.Fragment key={page}>
                     {page === -1 ? (
                         <Box className={styles["separator"]}>...</Box>
                     ) : (
@@ -78,7 +79,7 @@ export function Pagination(props: PaginationProps) {
                             {page}
                         </IconButton>
                     )}
-                </>
+                </React.Fragment>
             ))}
             <IconButton
                 onClick={() => onChange(value < total ? value + 1 : total)}

diff --git a/src/components/core/Stack/index.ts b/src/components/core/Stack/index.ts
@@ -0,0 +1 @@
+export { Stack, type StackProps } from "./Stack";
diff --git a/src/components/core/index.ts b/src/components/core/index.ts
@@ -11,6 +11,7 @@ export * from "./Tooltip";
 export * from "./Popover";
 export * from "./Icon";
 export * from "./Pagination";
+export * from "./Stack";
 // export * from "./Input";
 // export * from "./Link";
 // export * from "./Loader";

diff --git a/src/components/widgets/Navbar/Dropdown/Dropdown.module.scss b/src/components/widgets/Navbar/Dropdown/Dropdown.module.scss
diff --git a/src/components/widgets/Navbar/Dropdown/Dropdown.tsx b/src/components/widgets/Navbar/Dropdown/Dropdown.tsx
@@ -0,0 +1,57 @@
+import Sun2BoldDuotone from "~icons/solar/sun-2-bold-duotone";
+import MoonBoldDuotone from "~icons/solar/moon-bold-duotone";
+import { Avatar, Button, Stack } from "@/components/core";
+import { Flex } from "@/components/core/Flex";
+import { useThemeStore } from "@/stores/theme";
+import { IconButton } from "@/components/core/IconButton";
+
+export function Dropdown() {
+    const darkMode = useThemeStore.getState().darkMode;
+
+    return (
+        <Stack
+            gap={"15px"}
+            style={{
+                borderRadius: "8px",
+                color: "var(--text-color)",
+                zIndex: 1000,
+            }}
+        >
+            <Button variant={"outlined"}>
+                <Flex justify={"center"} align={"center"} gap={"15px"}>
+                    <Avatar src="https://avatars.githubusercontent.com/u/84963630?v=4" />
+                    <span>elabsoak233</span>
+                </Flex>
+            </Button>
+            <Flex
+                gap={"20px"}
+                align={"center"}
+                justify={"center"}
+                style={{
+                    width: "100%",
+                    boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+                    borderRadius: "8px",
+                    padding: "2.5px 0px",
+                }}
+            >
+                <IconButton
+                    variant={"ghost"}
+                    onClick={() => {
+                        useThemeStore.getState().setDarkMode(false);
+                    }}
+                >
+                    <Sun2BoldDuotone />
+                </IconButton>
+                <span>/</span>
+                <IconButton
+                    variant={"ghost"}
+                    onClick={() => {
+                        useThemeStore.getState().setDarkMode(true);
+                    }}
+                >
+                    <MoonBoldDuotone />
+                </IconButton>
+            </Flex>
+        </Stack>
+    );
+}
diff --git a/src/components/widgets/Navbar/Dropdown/index.ts b/src/components/widgets/Navbar/Dropdown/index.ts
@@ -0,0 +1 @@
+export { Dropdown } from "./Dropdown";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { Stack, type StackProps } from "./Stack";