finished user profile pages

.changeset/fair-books-look.md

@@ -0,0 +1,11 @@
+---
+"antd-multi-dashboard": patch
+---
+
+### Added
+- added user profile to sitemap
+- added active tab styles on the user profile page
+
+### Updated
+- updated sitemap card styles
+- minor page-to-page transition update

.changeset/mighty-kings-compare.md

@@ -0,0 +1,5 @@
+---
+"antd-multi-dashboard": minor
+---
+
+completed user profile pages and sections

src/App.css

@@ -17,7 +17,7 @@
 
 .page-enter-active,
 .page-exit-active {
-    transition: opacity 300ms;
+    transition: opacity 200ms;
 }
 
 .fade-enter-active,

src/components/SitemapCard/SitemapCard.tsx

@@ -1,4 +1,4 @@
-import {Button, CardProps, List} from "antd";
+import {Button, CardProps, Flex, Typography} from "antd";
 import {Card} from "../index.ts";
 
 import "./styles.css"
@@ -12,22 +12,23 @@ type Props = {
 
 const SitemapCard = ({data, ...others}: Props) => {
     return (
-        <Card title={data.title} className="sitemap-card card" {...others}>
-            <List
-                dataSource={data.links}
-                bordered={false}
-                renderItem={(item) => (
-                    <List.Item key={`sitemap-${item.title}`}>
+        <Card {...others}>
+            <Flex vertical gap="middle">
+                <Typography.Title level={5} style={{margin: 0, textTransform: "capitalize"}}>
+                    {data.title}
+                </Typography.Title>
+                <Flex gap="small" wrap="wrap">
+                    {data.links.map(d =>
                         <Button
+                            key={d.title}
                             type="link"
-                            href={item.path}
-                            style={{textTransform: "capitalize", marginLeft: ".5rem"}}
+                            href={d.path}
+                            style={{textTransform: "capitalize"}}
                         >
-                            {item.title}
-                        </Button>
-                    </List.Item>
-                )}
-            />
+                            {d.title}
+                        </Button>)}
+                </Flex>
+            </Flex>
         </Card>
     );
 };

src/layouts/userAccount/index.tsx

@@ -1,13 +1,25 @@
 import {AppLayout} from "../index.ts";
-import {Col, Descriptions, DescriptionsProps, Image, Row, Tabs, TabsProps, theme, Typography} from "antd";
+import {
+    Col,
+    ConfigProvider,
+    Descriptions,
+    DescriptionsProps,
+    Image,
+    Row,
+    Tabs,
+    TabsProps,
+    theme,
+    Typography
+} from "antd";
 import {Card} from "../../components";
-import {Outlet, useNavigate} from "react-router-dom";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
 import {USER_PROFILE_ITEMS} from "../../constants";
 import {useStylesContext} from "../../context";
 
 const {Link} = Typography
 
 import "./styles.css"
+import {useEffect, useState} from "react";
 
 const DESCRIPTION_ITEMS: DescriptionsProps['items'] = [
     {
@@ -48,19 +60,44 @@ const UserAccountLayout = () => {
     const {token: {borderRadius}} = theme.useToken()
     const navigate = useNavigate()
     const stylesContext = useStylesContext()
+    const location = useLocation()
+    const [activeKey, setActiveKey] = useState(TAB_ITEMS[0].key);
 
     const onChange = (key: string) => {
         navigate(key)
     };
 
+    useEffect(() => {
+        console.log(location)
+        const k = TAB_ITEMS.find(d => location.pathname.includes(d.key))?.key || ""
+
+        console.log(k)
+        setActiveKey(k);
+    }, [location]);
+
     return (
         <>
             <AppLayout>
                 <Card
                     className="user-profile-card-nav card"
                     actions={[
-                        <Tabs defaultActiveKey="1" items={TAB_ITEMS} onChange={onChange}
-                              style={{textTransform: "capitalize"}}/>
+                        <ConfigProvider
+                            theme={{
+                                components: {
+                                    Tabs: {
+                                        colorBorderSecondary: "none",
+                                    },
+                                }
+                            }}
+                        >
+                            <Tabs
+                                defaultActiveKey={activeKey}
+                                activeKey={activeKey}
+                                items={TAB_ITEMS}
+                                onChange={onChange}
+                                style={{textTransform: "capitalize"}}
+                            />
+                        </ConfigProvider>
                     ]}
                 >
                     <Row {...stylesContext?.rowProps}>

src/pages/Sitemap.tsx

@@ -1,13 +1,9 @@
 import {SitemapCard} from "../components";
-import {Col, Row, RowProps, Typography} from "antd";
-import {CORPORATE_ITEMS, DASHBOARD_ITEMS} from "../constants";
+import {Col, Flex, Row, Typography} from "antd";
+import {CORPORATE_ITEMS, DASHBOARD_ITEMS, USER_PROFILE_ITEMS} from "../constants";
+import {useStylesContext} from "../context";
+import {BranchesOutlined} from "@ant-design/icons";
 
-const ROW_PROPS: RowProps = {
-    gutter: [
-        {xs: 8, sm: 16, md: 24, lg: 32},
-        {xs: 8, sm: 16, md: 24, lg: 32}
-    ]
-}
 
 const SITES = [
     {
@@ -17,20 +13,28 @@ const SITES = [
     {
         title: "corporate",
         links: CORPORATE_ITEMS
+    },
+    {
+        title: "user profile",
+        links: USER_PROFILE_ITEMS
     }
 ]
 
 const SitemapPage = () => {
+    const context = useStylesContext()
+
     return (
         <div>
-            <Typography.Title level={3}>Sitemap</Typography.Title>
-            <Row {...ROW_PROPS}>
-                {SITES.map(s =>
-                    <Col xs={24} sm={12} lg={6} xl={6}>
-                        <SitemapCard data={s}/>
-                    </Col>
-                )}
-            </Row>
+            <Flex vertical gap="middle">
+                <Typography.Title level={3}><BranchesOutlined/>{' '}Sitemap</Typography.Title>
+                <Row {...context?.rowProps}>
+                    {SITES.map(s =>
+                        <Col xs={24} sm={12} md={8} lg={6} key={`col-${s.title}`}>
+                            <SitemapCard data={s}/>
+                        </Col>
+                    )}
+                </Row>
+            </Flex>
         </div>
     );
 };