wip: wallet tabs

tari-project · Feb 28, 2025 · e58f9fe · e58f9fe
1 parent 1cc1beb
commit e58f9fe
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 39 deletions.
diff --git a/src/components/Tabs/TabContent.tsx b/src/components/Tabs/TabContent.tsx
@@ -1,9 +1,10 @@
 import * as m from 'motion/react-m';
-import { useMotionValue } from 'motion/react';
 import styled from 'styled-components';
+import { ReactNode, useRef } from 'react';
+import { TabItem } from '@app/components/Tabs/Tabs.tsx';
 
 const Track = styled(m.div)`
-    width: 200px;
+    width: 100%;
     display: flex;
 `;
 
@@ -15,46 +16,40 @@ const ItemWrapper = styled(m.div)`
     align-items: center;
     justify-content: space-between;
     background-color: #0d0d0d;
-    cursor: grab;
 `;
 
 const SPRING_OPTIONS = { type: 'spring', stiffness: 300, damping: 30 };
 
 interface TabItemProps {
-    item: string;
+    children: ReactNode;
 }
-function TabItem({ item }: TabItemProps) {
+function Item({ children }: TabItemProps) {
     return (
         <ItemWrapper
             style={{
-                width: 200,
+                width: '100%',
                 height: '100%',
             }}
             transition={SPRING_OPTIONS}
         >
-            <div className="carousel-item-content">
-                <div className="carousel-item-title">{item}</div>
-            </div>
+            {children}
         </ItemWrapper>
     );
 }
 
-function TabContent({ items, currentIndex }: { items: string[]; currentIndex: number }) {
-    const trackItemOffset = 200;
-    const x = useMotionValue(0);
+interface TabContentProps {
+    items: TabItem[];
+    currentIndex: number;
+}
+
+function TabContent({ items, currentIndex }: TabContentProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const trackItemOffset = containerRef.current?.offsetWidth || 300;
+
     return (
-        <Track
-            style={{
-                width: 200,
-                perspective: 1000,
-                perspectiveOrigin: `${currentIndex * trackItemOffset + 200 / 2}px 50%`,
-                x: x.get(),
-            }}
-            animate={{ x: -(currentIndex * trackItemOffset) }}
-            transition={SPRING_OPTIONS}
-        >
-            {items.map((item, index) => {
-                return <TabItem key={index} item={item} />;
+        <Track ref={containerRef} animate={{ x: -(currentIndex * trackItemOffset) }} transition={SPRING_OPTIONS}>
+            {items.map(({ id, title, content }) => {
+                return <Item key={`item-content-${id}-${title}`}>{content}</Item>;
             })}
         </Track>
     );

diff --git a/src/components/Tabs/TabNav.tsx b/src/components/Tabs/TabNav.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { TabItem } from './Tabs.tsx';
 
 const Wrapper = styled.div`
     display: grid;
@@ -19,16 +20,16 @@ const NavButton = styled.button<{ $isActive?: boolean }>`
     }
 `;
 interface TabNavProps {
-    items: string[];
+    items: TabItem[];
     currentIndex: number;
     onClick: (index: number) => void;
 }
 function TabNav({ items, currentIndex, onClick }: TabNavProps) {
     return (
         <Wrapper>
-            {items.map((item, i) => (
-                <NavButton $isActive={currentIndex === i} key={`item:${i}-${item}`} onClick={() => onClick(i)}>
-                    {item}
+            {items.map(({ id, title }, i) => (
+                <NavButton $isActive={currentIndex === i} key={`item:${i}-${id}`} onClick={() => onClick(i)}>
+                    {title}
                 </NavButton>
             ))}
         </Wrapper>

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -1,12 +1,11 @@
 import { TabNav } from '@app/components/Tabs/TabNav.tsx';
 import { TabContent } from '@app/components/Tabs/TabContent.tsx';
 import styled from 'styled-components';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 const TabsWrapper = styled.div`
-    width: 200px;
-    height: 200px;
-    background: rgba(255, 192, 203, 0.31);
+    width: 100%;
+    height: 100%;
     align-items: center;
     display: flex;
     overflow: hidden;
@@ -17,17 +16,26 @@ const Wrapper = styled.div`
     align-items: center;
     flex-direction: column;
     position: relative;
-    border-radius: 24px;
+    padding: 1rem;
 `;
 
-export function Tabs({ items }: { items: string[] }) {
+export interface TabItem {
+    id: string;
+    title: string;
+    content: ReactNode;
+}
+
+interface TabsProps {
+    tabItems: TabItem[];
+}
+export function Tabs({ tabItems }: TabsProps) {
     const [currentIndex, setCurrentIndex] = useState<number>(0);
 
     return (
         <Wrapper>
-            <TabNav items={items} currentIndex={currentIndex} onClick={setCurrentIndex} />
+            <TabNav items={tabItems} currentIndex={currentIndex} onClick={setCurrentIndex} />
             <TabsWrapper>
-                <TabContent items={items} currentIndex={currentIndex} />
+                <TabContent items={tabItems} currentIndex={currentIndex} />
             </TabsWrapper>
         </Wrapper>
     );

diff --git a/src/containers/main/SidebarNavigation/Sidebars/SidebarWallet.tsx b/src/containers/main/SidebarNavigation/Sidebars/SidebarWallet.tsx
@@ -2,14 +2,25 @@ import { memo } from 'react';
 import { SB_WIDTH } from '@app/theme/styles.ts';
 import { SidebarWrapper } from '../SidebarNavigation.styles.ts';
 import { SidebarGrid } from './SidebarWallet.styles.ts';
-import { Tabs } from '@app/components/Tabs/Tabs.tsx';
+import { TabItem, Tabs } from '@app/components/Tabs/Tabs.tsx';
 
 const variants = {
     open: { opacity: 1, right: 0, transition: { duration: 0.3, ease: 'easeIn' } },
     closed: { opacity: 0.5, right: -50, transition: { duration: 0.05, ease: 'easeOut' } },
 };
 
-const tabItems = ['send', 'receive', 'blaaa'];
+const tabItems: TabItem[] = [
+    {
+        id: 'send',
+        title: 'Send',
+        content: <p>{`meow`}</p>,
+    },
+    {
+        id: 'receive',
+        title: 'Receiew',
+        content: <div>{`mmmeeeeemememeow`}</div>,
+    },
+];
 const SidebarWallet = memo(function SidebarWallet() {
     return (
         <SidebarWrapper
@@ -20,7 +31,7 @@ const SidebarWallet = memo(function SidebarWallet() {
             animate="open"
         >
             <SidebarGrid>
-                <Tabs items={tabItems} />
+                <Tabs tabItems={tabItems} />
             </SidebarGrid>
         </SidebarWrapper>
     );