Scrollable profile page
This commit is contained in:
Max
parent
f99e39c712
commit
7edaa62cdf
29
enshi/src/Components/ProfileNavbar/ButtonLink/ButtonLink.tsx
Normal file
29
enshi/src/Components/ProfileNavbar/ButtonLink/ButtonLink.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Box, Button, Text } from "@radix-ui/themes";
|
||||
import { PropsWithChildren, ReactNode } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
type TButtonLink = {
|
||||
label: string;
|
||||
path: string;
|
||||
icon?: ReactNode;
|
||||
} & PropsWithChildren;
|
||||
|
||||
export default function ButtonLink(props: TButtonLink) {
|
||||
const { pathname } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onClick = () => {
|
||||
navigate(props.path);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
className="relative"
|
||||
variant={pathname === props.path ? "solid" : "outline"}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Box className="absolute left-4">{props?.children}</Box>
|
||||
<Text>{props.label}</Text>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@ -2,118 +2,65 @@ import {
|
||||
BoxIcon,
|
||||
FileTextIcon,
|
||||
LockClosedIcon,
|
||||
PersonIcon
|
||||
PersonIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Separator,
|
||||
TabNav,
|
||||
Text,
|
||||
Text
|
||||
} from "@radix-ui/themes";
|
||||
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import UserCard from "../UserCard/UserCard";
|
||||
import ButtonLink from "./ButtonLink/ButtonLink";
|
||||
import TabLink from "./TabLink/TabLink";
|
||||
|
||||
export default function ProfileNavbar() {
|
||||
const { hash, pathname } = useLocation();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
console.log(`pathname: ${pathname}, hash: ${hash}`);
|
||||
return (
|
||||
<>
|
||||
<Flex className="relative flex flex-col sm:hidden">
|
||||
<TabNav.Root size={"2"}>
|
||||
<TabNav.Link
|
||||
active={pathname === "/profile"}
|
||||
onClick={() => navigate("/profile")}
|
||||
>
|
||||
<Flex className="items-center gap-1">
|
||||
<Text>About</Text>
|
||||
</Flex>
|
||||
</TabNav.Link>
|
||||
<TabLink label="Profile" path="/profile" />
|
||||
|
||||
<TabNav.Link
|
||||
active={pathname === "/profile/sec"}
|
||||
onClick={() => navigate("/profile/sec")}
|
||||
>
|
||||
<Flex className="items-center gap-1">
|
||||
<Text>Security</Text>
|
||||
</Flex>
|
||||
</TabNav.Link>
|
||||
<TabLink label="Security" path="/profile/sec" />
|
||||
|
||||
<TabNav.Link
|
||||
active={pathname === "/profile/posts"}
|
||||
onClick={() => navigate("/profile/posts")}
|
||||
>
|
||||
<Flex className="items-center gap-1">
|
||||
<Text>Posts</Text>
|
||||
{/* <CaretDownIcon /> */}
|
||||
</Flex>
|
||||
</TabNav.Link>
|
||||
<TabLink label="Posts" path="/profile/posts" />
|
||||
</TabNav.Root>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
direction={"column"}
|
||||
gap={"4"}
|
||||
className="absolute shrink collapse sm:relative sm:visible"
|
||||
className="absolute min-w-56 shrink collapse sm:relative sm:visible"
|
||||
>
|
||||
<Card>
|
||||
<Flex gap={"2"} direction={"column"}>
|
||||
<Flex direction={"row"} gap={"2"} align={"baseline"}>
|
||||
<Avatar fallback="TU" radius="full" />
|
||||
<Text>Test User</Text>
|
||||
</Flex>
|
||||
<Separator size={"4"} />
|
||||
<Flex gap={"2"}>
|
||||
<Badge>test</Badge>
|
||||
<Badge color="amber">user</Badge>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
<UserCard />
|
||||
|
||||
<Box className="mx-1">
|
||||
<Box className="mx-2">
|
||||
<Separator
|
||||
orientation={"horizontal"}
|
||||
size={"4"}
|
||||
className=""
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Flex gap={"2"} direction={"column"}>
|
||||
<Button
|
||||
className="relative"
|
||||
variant={pathname === "/profile" ? "solid" : "outline"}
|
||||
onClick={() => navigate("/profile")}
|
||||
>
|
||||
<PersonIcon className="absolute left-4" />
|
||||
<Text>About</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant={pathname === "/profile/sec" ? "solid" : "outline"}
|
||||
className="relative"
|
||||
onClick={() => navigate("/profile/sec")}
|
||||
>
|
||||
<LockClosedIcon className="absolute left-4" />
|
||||
<Text>Security</Text>
|
||||
</Button>
|
||||
<Button
|
||||
variant={pathname === "/profile/posts" ? "solid" : "outline"}
|
||||
className="relative"
|
||||
onClick={() => navigate("/profile/posts")}
|
||||
>
|
||||
<FileTextIcon className="absolute left-4" />
|
||||
<Text>Posts</Text>
|
||||
</Button>
|
||||
<ButtonLink label="About" path="/profile">
|
||||
<PersonIcon />
|
||||
</ButtonLink>
|
||||
|
||||
<ButtonLink label="Security" path="/profile/sec">
|
||||
<LockClosedIcon />
|
||||
</ButtonLink>
|
||||
|
||||
<ButtonLink label="Posts" path="/profile/posts">
|
||||
<FileTextIcon />
|
||||
</ButtonLink>
|
||||
|
||||
<Button variant="outline" className="relative">
|
||||
<BoxIcon className="absolute left-4" />
|
||||
<Text className="max-w-[60%]" truncate>
|
||||
Work in progress..qwflkqwhfkjqwhfkj.
|
||||
Work in progress...
|
||||
</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
22
enshi/src/Components/ProfileNavbar/TabLink/TabLink.tsx
Normal file
22
enshi/src/Components/ProfileNavbar/TabLink/TabLink.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { Flex, TabNav, Text } from "@radix-ui/themes";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
type TTabLink = {
|
||||
label: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
export default function TabLink(props: TTabLink) {
|
||||
const { pathname } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onClick = () => navigate(props.path);
|
||||
|
||||
return (
|
||||
<TabNav.Link active={pathname === props.path} onClick={onClick}>
|
||||
<Flex className="items-center gap-1">
|
||||
<Text>{props.label}</Text>
|
||||
</Flex>
|
||||
</TabNav.Link>
|
||||
);
|
||||
}
|
||||
51
enshi/src/Components/UserCard/UserCard.tsx
Normal file
51
enshi/src/Components/UserCard/UserCard.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import { Avatar, Badge, Card, Flex, Separator, Text } from "@radix-ui/themes";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { userAtom } from "../../AtomStore/AtomStore";
|
||||
|
||||
type TUserCard = {
|
||||
username?: string;
|
||||
userId?: string;
|
||||
};
|
||||
|
||||
export default function UserCard(props: TUserCard) {
|
||||
const user = useAtomValue(userAtom);
|
||||
|
||||
const getInitials = (username: string): string => {
|
||||
const result = username
|
||||
.split(" ")
|
||||
.map((word) => word[0].toUpperCase())
|
||||
.join("");
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const getUsername = (): string => {
|
||||
if (!user || props.username) return props.username || "Nothing";
|
||||
return user.username;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Flex gap={"2"} direction={"column"}>
|
||||
<Flex direction={"row"} gap={"2"} align={"center"}>
|
||||
<Avatar
|
||||
fallback={<div>{getInitials(getUsername())}</div>}
|
||||
radius="full"
|
||||
/>
|
||||
<Flex className="flex-col ">
|
||||
<Text>Test User</Text>
|
||||
<Text size={"1"} color={"gray"}>
|
||||
@testuser123
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Separator size={"4"} />
|
||||
<Flex gap={"2"}>
|
||||
<Badge>test</Badge>
|
||||
<Badge color="amber">user</Badge>
|
||||
<Badge color="red">admin</Badge>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,16 @@
|
||||
import { Box, Flex, Text } from "@radix-ui/themes";
|
||||
import { Flex, ScrollArea, Text } from "@radix-ui/themes";
|
||||
import { loremText } from "../../constants/loremText";
|
||||
|
||||
export default function UserProfilePage() {
|
||||
return (
|
||||
<Flex direction={"column"} className="flex-grow-[8]">
|
||||
<Box className="flex-grow-[1]">
|
||||
<Text>This is user profile</Text>
|
||||
</Box>
|
||||
<ScrollArea
|
||||
type="auto"
|
||||
scrollbars="vertical"
|
||||
className="flex-grow-[1] min-h-0 pr-2"
|
||||
>
|
||||
<Text wrap={"wrap"}>{loremText}</Text>
|
||||
</ScrollArea>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
21
enshi/src/constants/loremText.ts
Normal file
21
enshi/src/constants/loremText.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export const loremText = `
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quam phasellus id at vivamus rutrum per justo dapibus elementum dictum litora natoque. Lorem vestibulum arcu platea volutpat eros aenean class odio nec potenti lorem duis. Nunc per tempor accumsan sollicitudin curae praesent egestas venenatis donec aliquam placerat vel. Aliquam fermentum ipsum massa cum facilisi parturient mus egestas dictumst integer platea nec. Ullamcorper nisl sit vivamus nostra litora scelerisque aptent ad cubilia in fusce vehicula. Sem cum cubilia sagittis sed arcu tortor lectus egestas ac sociis orci viverra. Non euismod egestas congue scelerisque at nisl ad morbi mattis felis mus primis. Ultrices tellus aliquet in at sit nam etiam quisque imperdiet taciti vulputate ipsum. Sit vivamus leo at accumsan habitasse dictum mi turpis nisl elit convallis per. Aenean venenatis gravida sociosqu tempor porta senectus aptent turpis purus et bibendum senectus. A neque arcu torquent eleifend urna taciti in dui nec et curae conubia. Condimentum arcu vivamus porttitor per mollis non luctus sociis sociis mollis a dui. Imperdiet aenean euismod aliquet mauris ridiculus consequat varius vulputate tempor lacus mollis odio.
|
||||
|
||||
Imperdiet varius imperdiet neque habitasse eros taciti elit pretium sollicitudin habitasse tortor interdum. Non a dignissim ac cras velit nisi rutrum eu gravida erat class aliquam. Hac hac himenaeos sagittis elit et natoque interdum vehicula lacinia imperdiet adipiscing tortor. Gravida auctor litora ipsum rhoncus felis tellus ridiculus suscipit dignissim praesent blandit eu. Dolor bibendum massa sapien consectetur sodales odio justo blandit sapien posuere magna rhoncus. Nascetur maecenas sociosqu placerat proin varius iaculis viverra laoreet lectus hac habitant ligula. Aenean consequat vitae tempor ligula pharetra condimentum mollis praesent at ipsum quam nam. Dapibus purus orci malesuada penatibus mattis sociosqu consectetur natoque ultricies sagittis pretium nullam. Arcu erat aliquet adipiscing sociis sem ultricies ante mus interdum eu sit arcu. Interdum fusce elementum pharetra parturient tortor eros fermentum dignissim parturient maecenas facilisi mi. Nunc orci conubia lacinia imperdiet dictumst facilisi consectetur nam cum dictumst mollis ornare. Tortor volutpat blandit nunc consequat penatibus eleifend tempus sed quis mauris luctus mattis. Condimentum velit proin taciti vestibulum ante cum ante lorem porta dictumst ornare vehicula. Habitasse fermentum gravida consequat odio volutpat imperdiet nisi velit posuere euismod curae interdum.
|
||||
|
||||
Sem ullamcorper est senectus dapibus ornare congue taciti euismod aenean hac et ullamcorper. Potenti mattis mi ridiculus quis parturient mus id praesent taciti parturient phasellus aenean. Montes parturient cubilia congue montes aenean maecenas neque maecenas iaculis condimentum a metus. Mattis proin nec dictum dictumst consequat lacus phasellus odio porta ac interdum vivamus. Nec euismod ullamcorper erat convallis neque molestie curae metus sociosqu curae congue natoque. Netus porttitor tempus commodo netus interdum faucibus ad nullam malesuada magna tortor auctor. Aptent mus massa per aliquet neque mattis dignissim elit etiam vestibulum justo curae. Urna in vestibulum et vivamus porta duis fringilla curae rhoncus fermentum habitant malesuada. Fermentum odio neque sociis etiam habitant quisque habitasse litora nascetur neque platea porttitor. Varius elit urna venenatis nisl quis consectetur senectus condimentum curae risus a taciti. Ultricies quisque sapien nam consectetur at habitasse faucibus tincidunt eu mollis fusce fringilla. Potenti massa mus iaculis phasellus ac ad consectetur tempor fusce blandit ipsum sociis. Malesuada nam nostra vivamus bibendum bibendum parturient nisi sociosqu tincidunt justo dui dignissim. Interdum habitasse curae etiam parturient convallis faucibus potenti cubilia fusce eu amet quisque.
|
||||
|
||||
Ad ullamcorper sollicitudin phasellus pretium a eleifend vel taciti ipsum ultricies bibendum purus. Ipsum posuere vivamus lacinia felis nulla lacus maecenas aliquam curae nec nostra nostra. Lorem mi nullam dolor sapien quisque nulla eros conubia accumsan netus porttitor vestibulum. Sociosqu quam taciti potenti accumsan nisi cum ridiculus ridiculus accumsan dictum mattis sociis. A sit eu primis eros ultrices ac eleifend volutpat condimentum sociosqu est lacus. Habitant montes venenatis lacinia viverra nascetur vel commodo eleifend pretium vestibulum molestie consequat. Et netus purus risus rhoncus parturient a blandit blandit ante justo vitae nullam. Natoque at torquent eget facilisi taciti scelerisque ridiculus mus vestibulum et enim senectus. Est et aliquet eget vulputate lacinia leo curabitur arcu ornare diam litora taciti. Cum ultrices rhoncus ante nullam odio eleifend neque lobortis rutrum fringilla sed suscipit. Pretium sit vestibulum elementum odio suscipit mollis pellentesque etiam hac sapien lorem himenaeos. Ridiculus ullamcorper varius rutrum porta himenaeos praesent odio habitasse hac netus curae eros. Velit massa sapien platea pulvinar malesuada fermentum varius sapien vehicula mi vel vivamus. Duis turpis ultricies suscipit habitasse curae quisque mus morbi nunc rhoncus malesuada viverra.
|
||||
|
||||
Fusce montes luctus auctor ligula luctus nisi proin per ac nunc imperdiet eleifend. Sem blandit magnis scelerisque etiam sapien cras eleifend vitae justo suspendisse lobortis eu. Eleifend lacus dapibus mi nunc iaculis purus eleifend litora lorem dolor porta luctus. Commodo per nisl senectus dictum cum nostra dolor aenean quam egestas amet venenatis. Feugiat praesent pulvinar leo eleifend turpis netus donec litora adipiscing nascetur aenean ante. Quis mi velit risus venenatis nulla vitae consequat est sapien lorem amet congue. Pharetra venenatis neque nunc quisque a eleifend cum nisi ante netus nostra scelerisque. Etiam felis ullamcorper sodales montes id euismod eget vivamus elit fermentum neque lectus. Massa montes proin pellentesque praesent class felis conubia vivamus bibendum condimentum gravida mattis. Dictumst tempor netus sollicitudin quis aptent vivamus fringilla amet taciti convallis sollicitudin conubia. Dui morbi praesent magnis ligula vivamus proin magnis eget arcu metus lorem egestas. Laoreet dapibus fringilla inceptos pellentesque euismod netus ante urna risus elementum integer nunc. Vivamus inceptos penatibus risus mus consectetur quis lacinia luctus vivamus elementum pharetra consectetur. Ornare donec imperdiet est mi arcu at consequat dignissim eleifend aliquet taciti molestie.
|
||||
|
||||
Sodales nisl magna blandit curae bibendum sociosqu justo phasellus penatibus gravida eu velit. Ornare potenti venenatis tempor integer donec quis sociosqu pulvinar dictum urna interdum euismod. Sodales magna non integer risus purus metus fermentum nascetur interdum ridiculus curabitur blandit. Curabitur senectus id lorem a habitant sed semper accumsan sed euismod sodales volutpat. Bibendum sem quisque lobortis magna nisi magna elit facilisi sed quisque est duis. Imperdiet risus nullam magna potenti commodo eros ridiculus conubia aenean convallis nunc habitant. Rhoncus conubia mus curae maecenas suspendisse suspendisse nisi sed commodo litora tempor bibendum. Dictumst rutrum aliquet consectetur ad laoreet gravida metus montes feugiat quisque nulla elit. Potenti dui erat eleifend himenaeos primis turpis sollicitudin id pretium tortor elementum nec. Pretium nunc quisque morbi senectus himenaeos mollis varius rhoncus venenatis metus magna ipsum. Justo praesent amet dignissim adipiscing primis quam eros duis viverra cum eros rhoncus. Primis pretium erat potenti nisi felis elementum torquent at habitant cubilia nascetur dui. Tortor hac non a adipiscing duis laoreet a maecenas dolor aliquet pretium himenaeos. Netus adipiscing hac class placerat adipiscing accumsan condimentum eros tincidunt potenti conubia integer.
|
||||
|
||||
Magna placerat sem mi nunc pellentesque aliquet habitant aptent posuere faucibus gravida at. Aliquet vestibulum molestie suscipit enim porta sed in dui quam mi lacus suspendisse. Vulputate curae suscipit pretium mauris morbi risus fringilla metus consequat ultricies magnis fringilla. Maecenas lacinia venenatis cras non placerat vitae diam conubia cras enim feugiat sodales. Varius mi parturient fusce tellus nullam consectetur arcu dapibus dictum praesent platea primis. Id natoque sapien non natoque aliquet dapibus pharetra sollicitudin consequat egestas suscipit vestibulum. Congue venenatis ligula iaculis senectus facilisi fermentum ipsum eros mattis gravida venenatis montes. Aliquet placerat interdum senectus magnis montes ullamcorper nisi morbi egestas ultricies vitae lorem. Euismod primis imperdiet elementum sociis tincidunt commodo donec nisi dictumst justo purus convallis. Sapien fusce dolor curae pulvinar velit vestibulum ante vel quis erat duis suscipit. Class dapibus tellus himenaeos magna diam vitae ac cras sociis ultricies dui tellus. Ultricies neque urna orci mus sit parturient netus massa montes dignissim posuere erat. Platea laoreet lectus sagittis fusce duis dui nunc volutpat laoreet primis sapien auctor. Odio ligula himenaeos aliquet nisl class phasellus viverra sapien facilisi cras potenti eleifend.
|
||||
|
||||
Dolor gravida hac dictum consequat phasellus et vulputate non nisl mi sociosqu montes. Risus felis blandit nostra consectetur integer pellentesque quisque varius egestas gravida lobortis natoque. Lacus quisque nullam metus massa hac amet primis phasellus vel odio class ullamcorper. Bibendum orci orci interdum luctus lacinia facilisi senectus bibendum lacus urna tellus mattis. Cras curae erat amet metus consequat mollis cras egestas ligula eget rhoncus ornare. Nulla taciti semper feugiat venenatis tempor sociosqu etiam rhoncus fermentum aliquet torquent ac. Tempus morbi litora dictumst tincidunt ad sem mus leo nostra metus natoque magna. Nullam facilisi lobortis porttitor ornare ad porta morbi donec rhoncus orci cras erat. Lacus eleifend vivamus imperdiet condimentum gravida suscipit ipsum facilisi pretium ridiculus ipsum viverra. Consequat gravida a cras eleifend ultricies leo habitant posuere maecenas magna aliquet cubilia. Semper dolor sit sagittis leo taciti penatibus dictum lacus nunc malesuada taciti eget. Feugiat ad enim posuere dolor risus leo placerat ridiculus condimentum purus porta sapien. Neque dolor fusce morbi class cum erat sociis curae vulputate porttitor viverra sit. Parturient facilisi semper urna ipsum conubia per odio ante vestibulum rhoncus potenti per.
|
||||
|
||||
Quisque suspendisse in lorem felis facilisi elit risus lorem class sapien quam fermentum. Taciti aliquam nunc tempus platea eget litora fusce habitant ullamcorper massa lorem eu. Lacinia hendrerit nulla nisl dignissim nostra massa viverra phasellus magna convallis malesuada habitant. Est nullam eget enim sit montes scelerisque feugiat suscipit id eget sollicitudin tempus. Condimentum mollis faucibus dapibus tincidunt euismod eu interdum vitae mauris dictumst nisi mollis. Inceptos tortor donec tortor convallis fermentum interdum nunc praesent ultricies laoreet et phasellus. Senectus ultricies mi gravida etiam leo nullam viverra pharetra nec praesent pretium eget. Risus eros tempor tempor suspendisse sodales at urna penatibus lorem luctus montes montes. Turpis dapibus eros posuere placerat penatibus sollicitudin congue aptent fusce pretium gravida volutpat. Pellentesque pharetra tempor pretium venenatis suscipit ipsum feugiat dictum morbi sit vivamus sodales. Non quam fusce at suspendisse ultricies tincidunt quis vel etiam sollicitudin cum interdum. Egestas eleifend nulla tellus ullamcorper condimentum sodales commodo tempor lobortis mauris volutpat iaculis. Malesuada velit dignissim fermentum sollicitudin penatibus tincidunt parturient suscipit nisi non etiam molestie. Lectus habitasse odio mollis hac tempor nisi mauris nascetur euismod dignissim natoque urna.
|
||||
|
||||
Consequat rhoncus odio metus lacinia dictumst varius viverra justo leo euismod cras ligula. Mi gravida commodo habitasse purus fermentum etiam luctus natoque sed cras eleifend imperdiet. Sagittis nec orci habitant montes tempus eleifend sociis quis phasellus platea accumsan semper. Hac mattis magnis fringilla nostra montes faucibus bibendum eleifend a netus lobortis urna. Magna laoreet mi luctus condimentum aliquet purus suspendisse donec feugiat penatibus elit nascetur. Dictumst habitasse adipiscing sit nostra eleifend viverra tempus fermentum ornare montes felis netus. Lacinia metus varius vestibulum lectus rutrum pulvinar dictumst velit ullamcorper lectus ante est. Dolor tortor ac massa vel metus ornare habitant volutpat vitae etiam cras in. Duis lorem quisque aliquam dapibus eu quis cras sagittis pulvinar nullam ad luctus. Porta ligula velit erat phasellus elit magnis pharetra est ac enim praesent molestie. Ad inceptos viverra sem adipiscing proin ad non venenatis platea pellentesque inceptos magnis. Pretium bibendum dictumst volutpat cras fringilla dapibus cum lorem tempor bibendum habitasse nulla. Condimentum commodo magna varius ornare torquent adipiscing molestie malesuada non ad parturient turpis. Phasellus magna mauris pellentesque montes scelerisque vehicula hac pharetra iaculis integer leo tempus.
|
||||
`;
|
||||
@ -58,11 +58,9 @@ export default function MainPage() {
|
||||
direction={"column"}
|
||||
className="min-h-[100vh] max-h-[100vh] overflow-hidden"
|
||||
>
|
||||
<Box flexGrow={"1"} className="flex-[1]">
|
||||
<NavBar />
|
||||
</Box>
|
||||
<Box
|
||||
flexGrow={"100"}
|
||||
flexGrow={"1"}
|
||||
className="flex flex-col overflow-hidden"
|
||||
>
|
||||
<Outlet />
|
||||
|
||||
@ -4,7 +4,15 @@ import ProfileNavbar from "../../Components/ProfileNavbar/ProfileNavbar";
|
||||
|
||||
export default function ProfilePage() {
|
||||
return (
|
||||
<Flex className="relative flex-col flex-1 gap-0 mx-4 sm:flex-row sm:gap-4 md:mx-32 lg:mx-60">
|
||||
<Flex
|
||||
className={`
|
||||
relative flex-col flex-1 gap-0 mx-4
|
||||
sm:flex-row sm:gap-4
|
||||
md:w-full md:min-w-[45rem] md:max-w-[50rem] md:mx-auto
|
||||
lg:min-w-[50rem] lg:mx-auto
|
||||
overflow-hidden
|
||||
`}
|
||||
>
|
||||
<ProfileNavbar />
|
||||
|
||||
<Box className="my-2 collapse sm:visible">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user