tapquest-ui-yeulamvietnam 2.0.0

package/src/components/Avatar.styled/index.tsx

@@ -0,0 +1,8 @@
+import { Avatar as AvatarAntd} from "antd";
+import styled from "styled-components";
+
+const Avatar = styled(AvatarAntd)`
+    border-radius: 50%;
+`;
+
+export default Avatar;

package/src/components/Button.styled/index.tsx

@@ -0,0 +1,154 @@
+import { Button as ButtonAntd } from "antd";
+import { BaseButtonProps } from "antd/es/button/button";
+import styled from "styled-components";
+
+interface ButtonProps extends Omit<BaseButtonProps, "size"> {
+    $textColor?: string;
+    $backgroundColor?: string;
+    $borderColor?: string;
+    $borderRadius?: string;
+    $disabledBackgroundColor?: string;
+    $fluid?: boolean;
+    $size?: "xs" | "small" | "middle" | "large";
+    $padding?: string;
+    $height?: string;
+    $width?: string;
+}
+
+const getStyle = (size: "xs" | "small" | "middle" | "large", height?: string, width?: string) => {
+
+    if(height && width) {
+        return {
+            height: height,
+            width: width,
+        }
+    }
+    
+    switch (size) {
+        case "xs":
+            return {
+                height: "32px",
+                fontSize: "14px",
+                fontFamily: "var(--font-kanit)",
+                borderRadius: "4px",
+            }
+
+        case "small":
+            return {
+                height: "40px",
+                fontSize: "16px",
+                fontFamily: "var(--font-kanit)",
+                fontWeight: "600",
+                borderRadius: "40px",
+            }
+
+        case "large":
+            return {
+                height: "56px",
+                fontSize: "20px",
+                fontFamily: "var(--font-kanit)",
+                fontWeight: "600",
+                borderRadius: "40px",
+
+            }
+        default:
+        case "middle":
+            return {
+                height: "44px",
+                fontSize: "16px",
+                fontFamily: "var(--font-kanit)",
+                fontWeight: "600",
+                borderRadius: "40px",
+
+            }
+    }
+}
+
+const Button = styled(ButtonAntd) <ButtonProps>`
+    ${({ $size: size, $height: height, $width: width }) => getStyle(size as "small" | "middle" | "large", height, width)}
+
+    ${({ type }) => {
+        if (type === "text") {
+            return `
+                height: auto;
+            `
+        }
+    }}
+
+    &.ant-btn{
+        gap: 4px;
+        transition: width 0s;
+    }
+
+
+    &&& {
+        background-color: ${({ $backgroundColor: backgroundColor }) => backgroundColor};
+        color: ${({ $textColor: textColor }) => textColor};
+        border-color: ${({ $borderColor: borderColor, $backgroundColor: backgroundColor }) => borderColor ?? backgroundColor};
+        border-radius: ${({ $borderRadius: borderRadius }) => borderRadius};
+    }
+
+    &&&:hover {
+        background-color: ${({ $backgroundColor: backgroundColor }) => backgroundColor ?? "inherit"};
+        border-color: ${({ $borderColor: borderColor, $backgroundColor: backgroundColor }) => borderColor ?? backgroundColor};
+        color: ${({ $textColor: textColor }) => textColor};
+    }
+
+    &&&:disabled {
+        background-color: ${({ $disabledBackgroundColor: disabledBackgroundColor }) => disabledBackgroundColor ?? "inherit"};
+        border-color: ${({ $disabledBackgroundColor: disabledBackgroundColor }) => disabledBackgroundColor ?? "inherit"};
+        color: ${({ $textColor: textColor }) => textColor};
+    }
+
+    .ant-btn-icon {
+        line-height: 1;
+    }
+
+    text-transform: uppercase;
+
+    ${({ type, $size: size, $fluid: fluid, $padding: padding }) => {
+        let styles = '';
+        
+        if (padding) {
+            styles += `
+            padding: ${padding} !important;
+            `;
+        } else {
+            if (type === "text") {
+                styles += `
+                padding-left: 0px;
+                padding-right: 0px;
+                `;
+            } else if (size === "xs") {
+                styles += `
+                padding-left: 8px;
+                padding-right: 8px;
+                `;
+            } else if (size === "middle") {
+                styles += `
+                padding-left: 24px;
+                padding-right: 24px;
+                `;
+            } else if (size === "large") {
+                styles += `
+                padding-left: 32px;
+                padding-right: 32px;
+                `;
+            }
+        }
+
+        if (fluid) {
+            styles += `
+            width: 100%;
+            `;
+        }
+        
+        return styles;
+    }}
+
+    &&&.ant-btn-loading {
+        gap: 8px;
+    }
+`;
+
+export default Button;

package/src/components/Card.styled/index.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+interface CardProps {
+    $backgroundColor?: string;
+    $padding?: string;
+    $borderRadius?: string;
+    $border?: string;
+}
+
+const Card = styled.div<CardProps>`
+    
+    ${props => props.$backgroundColor && `
+        background-color: ${props.$backgroundColor};
+    `}
+    ${props => props.$padding && `
+        padding: ${props.$padding};
+    `}
+    ${props => props.$borderRadius && `
+        border-radius: ${props.$borderRadius};
+    `}
+    ${props => props.$border && `
+        border: ${props.$border};
+    `}
+`
+
+export default Card;

package/src/components/Compound/Appbar/index.tsx

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import { AppbarMenuItem } from "../../../types/type";
+
+import { AppbarBg } from "../../Icons/AppbarBg";
+
+import Typography from "../../Typography.styled"; ``
+
+const AppbarWrapper = styled.div`
+    position: relative;
+    width: 100%;
+    height: 62px;
+`
+
+const AppbarBackgroundWrapper = styled.div`
+    position: absolute;
+    top: -21%;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 62px;
+`
+
+const AppbarItemsListWrapper = styled.div`
+    position: relative;
+    padding: 0 15px 4px;
+    display: flex;
+    width: 100%;
+    height: 100%;
+`
+const AppbarItem = styled.div<{ $isActive: boolean, $disabled: boolean }>`
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    width: 100%;
+    height: 100%;
+    ${({ $isActive: isActive }) => isActive ? `
+        color: #A71A1A;
+    ` : `
+        color: #8F8F8F;
+    `}
+    ${({ $disabled: isDisabled }) => isDisabled ? `
+        opacity: 0.5;
+    ` : `
+        opacity: 1;
+    `}
+`
+
+interface AppbarProps {
+    items: AppbarMenuItem[];
+    onMenuItemClick: (item: AppbarMenuItem) => void;
+    currentItem: AppbarMenuItem | null;
+}
+
+const Appbar = ({ 
+    items,
+    onMenuItemClick,
+    currentItem
+}: AppbarProps) => {
+
+    return (
+        <AppbarWrapper>
+            <AppbarBackgroundWrapper>
+                <AppbarBg />
+            </AppbarBackgroundWrapper>
+            <AppbarItemsListWrapper>
+                {items.map((item) => (
+                    <AppbarItem 
+                        key={item.title} 
+                        $isActive={currentItem?.title === item.title} 
+                        onClick={() => {
+                            onMenuItemClick?.(item)
+                            // setActiveItem(item)
+                        }}
+                        $disabled={item?.disabled ?? false}
+                    >
+                        {item?.icon}
+                        <Typography $type="body-text-2-semibold">{item.title}</Typography>
+                    </AppbarItem>
+                ))}
+            </AppbarItemsListWrapper>
+        </AppbarWrapper>
+    )
+}
+
+export default Appbar;

package/src/components/Compound/Header/index.tsx

@@ -0,0 +1,40 @@
+import styled from "styled-components"
+
+const HeaderWrapper = styled.div`
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 53px;
+    padding: 0 16px;
+`
+
+const MiddleWrapper = styled.div`
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: calc(100vw - 32px - 64px - 16px);
+`
+
+interface HeaderProps {
+    left?: React.ReactNode;
+    middle?: React.ReactNode;
+    right?: React.ReactNode;
+}
+
+export default function Header({ left, middle, right }: HeaderProps) {
+    return (
+        <HeaderWrapper>
+            {left}
+            {
+                middle && (
+                    <MiddleWrapper>
+                        {middle}
+                    </MiddleWrapper>
+                )
+            }
+            {right}
+        </HeaderWrapper>
+    )
+}