🎨 styles: menu dropdown common

:%s

src/components/common/MenuDropdown/MenuDropdown.module.scss

@@ -0,0 +1,91 @@
+@import "../../../styles/utilities";
+
+.menuDropdown {
+    // todo: remove
+    margin-left: 20rem;
+
+    @apply relative cursor-pointer;
+    width: fit-content;
+    min-width: 4.8rem;
+    &:hover {
+        .label {
+            color: var(--primary);
+            svg path {
+                fill: currentColor;
+            }
+        }
+        .menu {
+            @apply block;
+            animation: menuDropdownAnimation 0.2s ease-out;
+        }
+    }
+
+    .label {
+        @apply flex justify-end items-center transition-all duration-200;
+        svg path {
+            width: fit-content;
+        }
+    }
+
+    &.arrow {
+        .label {
+            margin-right: 1.6rem;
+        }
+        &::after {
+            @apply inline-block absolute transition-all duration-100;
+            content: "";
+            top: 35%;
+            right: 0;
+            border: solid currentColor;
+            border-width: 0 2px 2px 0;
+            padding: 2px;
+            transform: rotate(45deg);
+        }
+        &:hover {
+            &::after {
+                @apply border-primary;
+                transform: rotate(-135deg);
+            }
+        }
+    }
+
+    .menu {
+        @apply hidden absolute;
+        // @apply absolute rounded list-none bg-white;
+        content: "";
+        right: 0;
+        top: 0;
+        height: max-content;
+        min-width: 19.2rem;
+        &:hover {
+            @apply block shadow-md;
+        }
+        .menuIner {
+            @apply rounded list-none bg-white;
+            border: 1px solid var(--text-active);
+            margin-top: 2.4rem;
+            li {
+                @apply block transition-all duration-200 cursor-pointer text-active;
+                padding: 0.8rem 1.6rem;
+                &:hover {
+                    @apply bg-primary-lightest;
+                    color: var(--primary);
+                }
+                a {
+                    @apply block;
+                }
+            }
+        }
+    }
+}
+
+@keyframes menuDropdownAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}

src/components/common/MenuDropdown/MenuDropdown.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import Link from 'next/link';
+import React from 'react';
+import s from './MenuDropdown.module.scss';
+
+interface Props {
+    children?: React.ReactNode,
+    options: { link: string, name: string }[],
+    isHasArrow?: boolean,
+}
+
+const MenuDropdown = ({ options, children, isHasArrow = true }: Props) => {
+    return (
+        <div className={classNames({
+            [s.menuDropdown]: true,
+            [s.arrow]: isHasArrow,
+        })}>
+            <span className={s.label}>
+                {children}
+            </span>
+            <section className={s.menu}>
+                <ul className={s.menuIner}>
+                    {
+                        options.map(item => <li key={item.name}>
+                            <Link href={item.link}>
+                                <a >
+                                    {item.name}
+                                </a>
+                            </Link>
+                        </li>)
+                    }
+                </ul>
+            </section>
+        </div>
+    );
+};
+
+export default MenuDropdown;

src/components/common/index.ts

@@ -8,3 +8,5 @@ export { default as Inputcommon} from './InputCommon/InputCommon'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
 export { default as Banner} from './Banner/Banner'
+export { default as Footer} from './Footer/Footer'
+export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'