diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss new file mode 100644 index 000000000..6741f386c --- /dev/null +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss @@ -0,0 +1,6 @@ +@import '../../../styles/utilities'; + +.breadcrumbCommon { + @apply spacing-horizontal-left; + color: var(--text-base); +} \ No newline at end of file diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx new file mode 100644 index 000000000..2dca6b714 --- /dev/null +++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx @@ -0,0 +1,43 @@ +import React from 'react' +import s from './BreadcrumbCommon.module.scss' + +import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem' +import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator' + +interface BreadcrumbCommonProps { + crumbs: { link:string, name:string }[]; + showHomePage?: boolean; +} + +const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => { + if (showHomePage) { + crumbs.unshift({link: "/", name: "Home"}); + } + return ( +
+ { + crumbs.map((crumb, i) => { + if (i === 0) { + return ( + + ) + } + if (i === crumbs.length-1) { + return ( + + + + ) + } + return ( + + + + ) + }) + } +
+ ) +} + +export default BreadcrumbCommon diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx new file mode 100644 index 000000000..f807de555 --- /dev/null +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import Link from 'next/link' + +interface BreadcrumbItemProps { + text: string; + href: string; +} + +const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => { + return ( + + {text} + + ) +} + +export default BreadcrumbItem diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx new file mode 100644 index 000000000..f84bc3a51 --- /dev/null +++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface BreadcrumbSeparatorProps { + children?: React.ReactNode; +} + +const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => { + return ( + +  / {children} + + ) +} + +export default BreadcrumbSeparator diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss new file mode 100644 index 000000000..9e5fbc1df --- /dev/null +++ b/src/components/common/TabCommon/TabCommon.module.scss @@ -0,0 +1,15 @@ +@import '../../../styles/utilities'; + +.tabCommonOutSide { + @apply spacing-horizontal; + + .tabCommon { + @apply flex; + position: relative; + border-bottom: 2px solid #FBFBFB; + padding-top: 1.6rem; + padding-bottom: 1.6rem; + width: 100%; + } +} + diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx new file mode 100644 index 000000000..67fe107a6 --- /dev/null +++ b/src/components/common/TabCommon/TabCommon.tsx @@ -0,0 +1,75 @@ +import React, { useState, RefObject, useEffect, useRef } from "react" +import s from './TabCommon.module.scss' + +import TabItem from './TabItem/TabItem' + +interface TabCommonProps { + changeTab: (target:string) => void; +} + +const TabCommon = ({ changeTab } : TabCommonProps) => { + const active = "active", unActive = ""; + const [item1Active, setItem1Active] = useState(active); + const [item2Active, setItem2Active] = useState(unActive); + const [item3Active, setItem3Active] = useState(unActive); + + const item1 = useRef(null); + const item2 = useRef(null); + const item3 = useRef(null); + const slider = useRef(null); + + function slide(ref: RefObject) { + const width = ref.current.offsetWidth; + const left = ref.current.offsetLeft; + + slider.current.style.width = (width-48).toString()+"px"; + slider.current.style.left = left.toString()+"px"; + } + + function toggleItem1():void { + setItem1Active(active) + changeTab("waiting") + + setItem2Active(unActive) + setItem3Active(unActive) + slide(item1) + } + + function toggleItem2():void { + setItem2Active(active) + changeTab("delivering") + + setItem1Active(unActive) + setItem3Active(unActive) + slide(item2) + } + function toggleItem3():void { + setItem3Active(active) + changeTab("delivered") + + setItem1Active(unActive) + setItem2Active(unActive) + slide(item3) + } + + useEffect(() => { + slide(item1); + }, []) + + return ( +
    +
  • + Wait for Comfirmation +
  • +
  • + Delivering +
  • +
  • + Delivered +
  • +
    +
+ ) +} + +export default TabCommon; \ No newline at end of file diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss new file mode 100644 index 000000000..efb10f1f4 --- /dev/null +++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss @@ -0,0 +1,16 @@ +@import '../../../../styles/utilities'; + +.tabItem { + margin-right: 4.8rem; + padding-top: 1.6rem; + padding-bottom: 1.6rem; + + &.active { + @apply font-bold; + border-bottom: 2px solid var(--primary); + } + + &:hover { + @apply cursor-pointer; + } +} diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx new file mode 100644 index 000000000..62de3c595 --- /dev/null +++ b/src/components/common/TabCommon/TabItem/TabItem.tsx @@ -0,0 +1,22 @@ +import classNames from "classnames"; +import React from "react" +import s from './TabItem.module.scss' + +interface TabItemProps { + active: string; + children: string; + onClick: () => void; +} + +const TabItem = ({ active = "", children, onClick } : TabItemProps) => { + + return ( + + {children} + + ) +} + +export default TabItem; \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss new file mode 100644 index 000000000..22c885238 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss @@ -0,0 +1,5 @@ +@import '../../../../styles/utilities'; + +.accountNavigation { + @apply spacing-horizontal; +} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx new file mode 100644 index 000000000..15ecd3a31 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -0,0 +1,69 @@ +import React, { useState, useRef, RefObject, useEffect } from "react" +import s from './AccountNavigation.module.scss' + +import AccountNavigationItem from './components/AccountNavigationItem' + +interface AccountNavigationProps { + +} + +const AccountNavigation = ({ } : AccountNavigationProps) => { + const active = "active", unActive = ""; + + const [item1Active, setItem1Active] = useState(unActive); + const [item2Active, setItem2Active] = useState(active); + const [item3Active, setItem3Active] = useState(unActive); + + const item1 = useRef(null); + const item2 = useRef(null); + const item3 = useRef(null); + const slider = useRef(null); + + function slide(ref: RefObject) { + const top = ref.current.offsetTop; + slider.current.style.top = top.toString()+"px"; + } + + function toggleItem1():void { + setItem1Active(active) + + setItem2Active(unActive) + setItem3Active(unActive) + slide(item1); + } + function toggleItem2():void { + setItem2Active(active) + + setItem1Active(unActive) + setItem3Active(unActive) + slide(item2); + } + function toggleItem3():void { + setItem3Active(active) + + setItem1Active(unActive) + setItem2Active(unActive) + slide(item3); + } + + useEffect(() => { + slide(item2); + }, []) + + return ( +
+
+ Customer Information +
+
+ Your Orders +
+
+ Favourites +
+
+
+ ) +} + +export default AccountNavigation \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss new file mode 100644 index 000000000..01fc0e1cc --- /dev/null +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss @@ -0,0 +1,19 @@ +@import '../../../../../styles/utilities'; + +.accountNavigationItem { + @apply bg-gray; + width: 28rem; + padding: 1.2rem 0 1.2rem 1.6rem; + margin-bottom: 1.2rem; + + + &:hover { + @apply cursor-pointer; + } + + &.active { + background-color: #FBFBFB; + border-radius: 0 1.6rem 1.6rem 0; + border-left: 2px solid var(--primary); + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx new file mode 100644 index 000000000..8bb18cb58 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx @@ -0,0 +1,22 @@ +import React, { RefObject } from "react"; +import classNames from "classnames"; +import s from './AccountNavigationItem.module.scss' + +interface AccountNavigationItemProps { + children?: string; + active?: string; + target?: string; + onClick: () => void; +} + +const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => { + return ( +
+ {children} +
+ ) +} + +export default AccountNavigationItem \ No newline at end of file