Add new page in referrals

Rodoro · Sep 27, 2024 · 423bad1 · 423bad1
1 parent 0d8f793
commit 423bad1
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 2 deletions.
diff --git a/src/app/referral/description/page.tsx b/src/app/referral/description/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DescriptionPage = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default DescriptionPage
diff --git a/src/app/referral/layout.tsx b/src/app/referral/layout.tsx
@@ -0,0 +1,16 @@
+import NavbarReferral from '@/containers/layout/NavbarReferral'
+import React from 'react'
+
+export default function ReferralLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <>
+            <div className="absolute -top-3 -left-3 md:top-[-7rem] -z-20 md:left-8 flex-shrink-0 w-[336px] h-[336px] md:w-[587px] md:h-[587px] opacity-[0.3] bg-[#c51fff] blur-[227px]" />
+            <NavbarReferral />
+            {children}
+        </ >
+    )
+}
diff --git a/src/app/referral/page.tsx b/src/app/referral/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ReferralPage = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default ReferralPage
diff --git a/src/app/referral/structure/page.tsx b/src/app/referral/structure/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const StructurePage = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default StructurePage
diff --git a/src/app/referral/transactions/page.tsx b/src/app/referral/transactions/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const TransactionsPage = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default TransactionsPage
diff --git a/src/components/interface/Buttons.tsx b/src/components/interface/Buttons.tsx
@@ -35,6 +35,17 @@ const EarnMoneyButton = () => {
     )
 }
 
+
+const PurpurButon2 = ({ href, children, ...props }: any) => {
+    return (
+        <Link href={href} className='shadow-[0_0_24px_0_rgba(139,50,252,0.75)] group hover:shadow-none hover:bg-[#3D4768] transition-all active:scale-95 select-none h-auto flex flex-row justify-center items-center rounded-2xl p-0.5 bg-[#7E50FF]'>
+            <span className='flex flex-row justify-center items-center group-hover:bg-[#242F54] transition-all rounded-[14px] bg-[#7E50FF] gap-2 px-6 py-3 w-full h-full'>
+                {children}
+            </span>
+        </Link>
+    )
+}
+
 const GradientButton = ({ children, ...props }: any) => {
     return (
         <div className='w-full h-full flex flex-row justify-center items-center rounded-lg lg:rounded-2xl p-0.5 shadow-[0_10px_79px_0_rgba(146,105,213,0.20)] bg-gradient-to-r from-[#1F79FF] via-[#6A12FA] to-[#B8A6FF]'>
@@ -79,4 +90,4 @@ const PurpurButonNav = ({ children, ...props }: any) => {
     )
 }
 
-export { AuthButton, EarnMoneyButton, GradientButton, PurpurButon, PurpurButonNav, GradientButton2 }
+export { AuthButton, EarnMoneyButton, GradientButton, PurpurButon, PurpurButonNav, GradientButton2, PurpurButon2 }
diff --git a/src/containers/Navbar.tsx b/src/containers/Navbar.tsx
@@ -8,7 +8,7 @@ import { TgLink } from '@/components/icons/tg'
 import { YtLink } from '@/components/icons/yt'
 import LogoText from '@/components/icons/LogoText'
 
-import { AuthButton, EarnMoneyButton, PurpurButonNav } from '@/components/interface/Buttons'
+import { AuthButton, EarnMoneyButton, PurpurButon2, PurpurButonNav } from '@/components/interface/Buttons'
 import { SettingsButton } from '@/components/icons/setting'
 import { SelectLanguage, SelectPage } from '@/components/interface/Select'
 import ChatIcon from '@/components/icons/chat'
@@ -17,6 +17,7 @@ import { useTranslation } from '@/hook/useLanguageStore'
 import SupportVidget from '@/components/SupportVidget'
 import useProfile from '@/hook/useProfile'
 import Profile from '@/components/common/Profile'
+import { HiMiniPlus } from 'react-icons/hi2'
 
 
 const Navbar = () => {
@@ -104,6 +105,10 @@ const Navbar = () => {
                 {/* TODO: Вернуть навбар в обратное состояние */}
                 {!user ?
                   <>
+                    <PurpurButon2 href='/payment'>
+                      <span className='text-xl font-bold'>+</span>
+                      Deposti
+                    </PurpurButon2>
                     {/* <Profile images={user.image} /> */}
                     <SettingsButton />
                     <EarnMoneyButton />

diff --git a/src/containers/layout/NavbarReferral.tsx b/src/containers/layout/NavbarReferral.tsx
@@ -0,0 +1,62 @@
+'use client'
+import { CartButton } from "@/components/cart/Cart"
+import { IoDocuments } from "react-icons/io5";
+import { usePathname } from "next/navigation";
+import { SelectPages } from "@/components/interface/Select";
+import { HiUser } from "react-icons/hi2";
+import { PiGraphBold, PiTreeStructureFill } from "react-icons/pi";
+import { LuHistory } from "react-icons/lu";
+
+const NavbarReferral = () => {
+    const pathname = usePathname()
+    return (
+        <>
+            <div
+                style={{
+                    background: 'linear-gradient(150deg,rgba(42,26,82,1),rgba(22,25,64,1)) padding-box, linear-gradient(150deg,rgba(71,55,105,1),rgba(22,25,64,1)) border-box',
+                    border: '2px solid transparent'
+                }}
+                className="hidden xl:flex w-full bg-red-300 px-9 py-[30px] justify-between  gap-4 rounded-[30px]"
+            >
+                <div className="flex items-center justify-center gap-4">
+                    <CartButton href={"/referral"} isActive={pathname == '/referral'} >
+                        <PiGraphBold className="text-[26px]" />
+                        Statistics
+                    </CartButton>
+                    <CartButton href={"/referral/structure"} isActive={pathname == '/referral/structure'}>
+                        <PiTreeStructureFill className="text-[26px]" />
+                        Structure
+                    </CartButton>
+                    <CartButton href={"/referral/description"} isActive={pathname == '/referral/description'}>
+                        <IoDocuments className="text-[26px]" />
+                        Description
+                    </CartButton>
+                    <CartButton href={"/referral/transactions"} isActive={pathname == '/referral/transactions'}>
+                        <LuHistory className="text-[26px]" />
+                        Transactions
+                    </CartButton>
+                </div>
+                <div className="flex flex-col items-end">
+                    {/* TODO:Logout из системы */}
+                </div>
+            </div>
+            <div className="flex xl:hidden w-full justify-between items-center">
+                <SelectPages
+                    url={pathname}
+                    items={[
+                        { value: '/referral', div: <><PiGraphBold className="text-[26px]" />Statistics</> },
+                        { value: '/referral/structure', div: <><PiTreeStructureFill className="text-[26px]" />Structure</> },
+                        { value: '/referral/description', div: <><IoDocuments className="text-[26px]" />Description</> },
+                        { value: '/referral/transactions', div: <><LuHistory className="text-[26px]" />Transactions</> },
+                    ]}
+                />
+                <div className="flex flex-col items-end min-w-[130px]">
+                    {/* TODO:Logout из системы */}
+                </div>
+            </div>
+        </>
+
+    )
+}
+
+export default NavbarReferral