refactor: improve the workspaces list on login/workspace screen (#2899)

* refactor: improve the workspaces list on login/workspace screen * fix: fix spell typo --------- Co-authored-by: Gloire Mutaliko (Salva) <[email protected]>
ever-co · Aug 15, 2024 · ae5afd6 · ae5afd6
1 parent c991a1f
commit ae5afd6
Showing 1 changed file with 32 additions and 6 deletions.
diff --git a/apps/web/app/[locale]/auth/passcode/component.tsx b/apps/web/app/[locale]/auth/passcode/component.tsx
@@ -27,6 +27,8 @@ import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
 import SocialLogins from '../social-logins-buttons';
 import { useSession } from 'next-auth/react';
 import { LAST_WORSPACE_AND_TEAM, USER_SAW_OUTSTANDING_NOTIFICATION } from '@app/constants';
+import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
+import { cn } from 'lib/utils';
 
 function AuthPasscode() {
 	const form = useAuthenticationPasscode();
@@ -78,7 +80,8 @@ function AuthPasscode() {
 					{form.authScreen.screen === 'workspace' && (
 						<WorkSpaceScreen form={form} className={clsxm('w-full')} />
 					)}
-				</div>				
+				</div>
+				{/* Social logins */}
 				<SocialLogins />
 			</div>
 		</AuthLayout>
@@ -412,6 +415,12 @@ type IWorkSpace = {
 export function WorkSpaceComponent(props: IWorkSpace) {
 	const t = useTranslations();
 
+	const [expandedWorkspace, setExpandedWorkspace] = useState(props.selectedWorkspace);
+
+	useEffect(() => {
+		setExpandedWorkspace(props.selectedWorkspace);
+	}, [props.selectedWorkspace]);
+
 	return (
 		<form
 			className={clsxm(props.className, 'flex justify-center w-full')}
@@ -428,13 +437,28 @@ export function WorkSpaceComponent(props: IWorkSpace) {
 							{props.workspaces?.map((worksace, index) => (
 								<div
 									key={index}
-									className={`w-full flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
-										props.selectedWorkspace === index ? 'bg-[#FCFCFC] dark:bg-[#1F2024]' : ''
-									} hover:bg-[#FCFCFC] dark:hover:bg-[#1F2024] rounded-xl`}
+									className={`w-full overflow-hidden h-16 ${expandedWorkspace === index && 'h-auto'}   flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
+										props.selectedWorkspace === index
+											? 'bg-[#FCFCFC] -order-1 dark:bg-[#1F2024]'
+											: ''
+									} hover:bg-[#FCFCFC]  dark:hover:bg-[#1F2024] rounded-xl`}
 								>
 									<div className="text-base font-medium py-[1.25rem] px-4 flex flex-col gap-[1.0625rem]">
 										<div className="flex justify-between">
-											<span>{worksace.user.tenant.name}</span>
+											<div
+												onClick={() => setExpandedWorkspace(index)}
+												className="flex cursor-pointer items-center justify-center gap-1"
+											>
+												<span>{worksace.user.tenant.name}</span>
+												<span
+													className={cn(
+														'h-6 w-6 flex items-center justify-center transition-transform',
+														expandedWorkspace === index && 'rotate-180'
+													)}
+												>
+													<MdOutlineKeyboardArrowDown />
+												</span>
+											</div>
 											<span
 												className="hover:cursor-pointer"
 												onClick={() => {
@@ -456,7 +480,9 @@ export function WorkSpaceComponent(props: IWorkSpace) {
 												)}
 											</span>
 										</div>
-										<span className="bg-[#E5E5E5] w-full h-[1px]"></span>
+										<span
+											className={`bg-[#E5E5E5] w-full h-[1px] hidden ${expandedWorkspace === index && 'block'}`}
+										></span>
 										{/* <div className="w-full h-[1px] bg-[#E5E5E5] dark:bg-[#34353D]"></div> */}
 										<div className="flex flex-col gap-4 px-5 py-1.5">
 											{worksace.current_teams?.map((team) => (