83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import Tabs from '@/components/tabs';
|
|
import { TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import DashboardLayout from '@/layouts/dashboard/layout';
|
|
import { getQueryParams } from '@/lib/route';
|
|
import { SharedData } from '@/types/global';
|
|
import { router, usePage } from '@inertiajs/react';
|
|
import { ReactNode } from 'react';
|
|
import Google from './partials/google';
|
|
import Recaptcha from './partials/recaptcha';
|
|
|
|
interface Props extends SharedData {
|
|
auths: Settings<GoogleAuthFields | RecaptchaAuthFields | any>[];
|
|
}
|
|
|
|
const Auth = ({ auths }: Props) => {
|
|
const { props, url } = usePage<SharedData>();
|
|
const params = getQueryParams(url);
|
|
const { translate } = props;
|
|
const { common } = translate;
|
|
|
|
const tabs = auths.map((auth) => {
|
|
let Component;
|
|
|
|
switch (auth.sub_type) {
|
|
case 'google':
|
|
Component = Google;
|
|
break;
|
|
|
|
case 'recaptcha':
|
|
Component = Recaptcha;
|
|
break;
|
|
|
|
default:
|
|
Component = ({ auth }: { auth: any }) => <div>No component found</div>;
|
|
break;
|
|
}
|
|
|
|
return {
|
|
...auth,
|
|
Component,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<section className="md:px-3">
|
|
<Tabs value={params['tab'] ?? tabs[0].sub_type} className="grid grid-rows-1 gap-5 md:grid-cols-4">
|
|
<div>
|
|
<TabsList className="horizontal-tabs-list">
|
|
{tabs.map(({ id, title, sub_type }) => (
|
|
<TabsTrigger
|
|
key={id}
|
|
value={sub_type}
|
|
className="horizontal-tabs-trigger"
|
|
onClick={() =>
|
|
router.get(
|
|
route('settings.auth0', {
|
|
tab: sub_type,
|
|
}),
|
|
)
|
|
}
|
|
>
|
|
{title}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</div>
|
|
|
|
<div className="md:col-span-3">
|
|
{tabs.map((auth) => (
|
|
<TabsContent key={auth.id} value={auth.sub_type} className="m-0">
|
|
<auth.Component key={auth.id} auth={auth} />
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</Tabs>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
Auth.layout = (page: ReactNode) => <DashboardLayout children={page} />;
|
|
|
|
export default Auth;
|