mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-18 17:49:10 +00:00
c65d92ee4c
* beginnings of app directory * settings mostly good * colocate way more components * flatten components folder * reexport QueryClientProvider from client * move CodeBlock back to interface * colocate Explorer, KeyManager + more * goddamn captialisation * get toasts out of components * please eslint * no more src directory * $ instead of : * added back RowHeader component * fix settings modal padding * more spacing, less margin * fix sidebar locations button * fix tags sidebar link * clean up back button * added margin to explorer context menu to prevent contact with edge of viewport * don't export QueryClientProvider from @sd/client * basic guidelines * import interface correctly * remove old demo data * fix onboarding layout * fix onboarding navigation * fix key manager settings button --------- Co-authored-by: Jamie Pine <ijamespine@me.com>
64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
import BloomOne from '@sd/assets/images/bloom-one.png';
|
|
import clsx from 'clsx';
|
|
import { useEffect } from 'react';
|
|
import { Outlet, useNavigate } from 'react-router';
|
|
import { getOnboardingStore } from '@sd/client';
|
|
import { tw } from '@sd/ui';
|
|
import DragRegion from '~/components/DragRegion';
|
|
import { useOperatingSystem } from '~/hooks/useOperatingSystem';
|
|
import Progress from './Progress';
|
|
|
|
export const OnboardingContainer = tw.div`flex flex-col items-center`;
|
|
export const OnboardingTitle = tw.h2`mb-2 text-3xl font-bold`;
|
|
export const OnboardingDescription = tw.p`max-w-xl text-center text-ink-dull`;
|
|
export const OnboardingImg = tw.img`w-20 h-20 mb-2`;
|
|
|
|
export default () => {
|
|
const os = useOperatingSystem();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(
|
|
() => {
|
|
const obStore = getOnboardingStore();
|
|
|
|
// This is neat because restores the last active screen, but only if it is not the starting screen
|
|
// Ignoring if people navigate back to the start if progress has been made
|
|
if (obStore.unlockedScreens.length > 1) {
|
|
navigate(`/onboarding/${obStore.lastActiveScreen}`);
|
|
}
|
|
},
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
macOnly(os, 'bg-opacity-[0.75]'),
|
|
'bg-sidebar text-ink flex h-screen flex-col'
|
|
)}
|
|
>
|
|
<DragRegion className="z-50 h-9" />
|
|
|
|
<div className="-mt-5 flex grow flex-col p-10">
|
|
<div className="flex grow flex-col items-center justify-center">
|
|
<Outlet />
|
|
</div>
|
|
<Progress />
|
|
</div>
|
|
<div className="flex justify-center p-4">
|
|
<p className="text-ink-dull text-xs opacity-50">© 2022 Spacedrive Technology Inc.</p>
|
|
</div>
|
|
<div className="absolute -z-10">
|
|
<div className="relative h-screen w-screen">
|
|
<img src={BloomOne} className="absolute h-[2000px] w-[2000px]" />
|
|
{/* <img src={BloomThree} className="absolute w-[2000px] h-[2000px] -right-[200px]" /> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const macOnly = (platform: string | undefined, classnames: string) =>
|
|
platform === 'macOS' ? classnames : '';
|