refactor: use tabs instead of spaces

inertia/components/layouts/_base_layout.tsx

@@ -5,11 +5,11 @@ import ContextThemeProvider from '~/components/layouts/_theme_layout';
 import DarkThemeContextProvider from '~/contexts/dark_theme_context';
 
 export default function BaseLayout({ children }: { children: ReactNode }) {
-  const { i18n } = useTranslation();
-  dayjs.locale(i18n.language);
-  return (
-    <DarkThemeContextProvider key="a">
-      <ContextThemeProvider>{children}</ContextThemeProvider>
-    </DarkThemeContextProvider>
-  );
+	const { i18n } = useTranslation();
+	dayjs.locale(i18n.language);
+	return (
+		<DarkThemeContextProvider key="a">
+			<ContextThemeProvider>{children}</ContextThemeProvider>
+		</DarkThemeContextProvider>
+	);
 }

inertia/components/layouts/_theme_layout.tsx

@@ -5,143 +5,143 @@ import { darkTheme } from '~/styles/themes/dark_theme';
 import { lightTheme } from '~/styles/themes/light_theme';
 
 export default function ContextThemeProvider({
-  children,
+	children,
 }: {
-  children: ReactNode;
+	children: ReactNode;
 }) {
-  const { isDarkTheme } = useDarkTheme();
-  return (
-    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
-      <GlobalStyles />
-      {children}
-    </ThemeProvider>
-  );
+	const { isDarkTheme } = useDarkTheme();
+	return (
+		<ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+			<GlobalStyles />
+			{children}
+		</ThemeProvider>
+	);
 }
 
 function GlobalStyles() {
-  const localTheme = useTheme();
-  const cssReset = css({
-    '*': {
-      boxSizing: 'border-box',
-      outline: 0,
-      margin: 0,
-      padding: 0,
-      scrollBehavior: 'smooth',
-    },
+	const localTheme = useTheme();
+	const cssReset = css({
+		'*': {
+			boxSizing: 'border-box',
+			outline: 0,
+			margin: 0,
+			padding: 0,
+			scrollBehavior: 'smooth',
+		},
 
-    '.reset': {
-      backgroundColor: 'inherit',
-      color: 'inherit',
-      padding: 0,
-      margin: 0,
-      border: 0,
-    },
+		'.reset': {
+			backgroundColor: 'inherit',
+			color: 'inherit',
+			padding: 0,
+			margin: 0,
+			border: 0,
+		},
 
-    a: {
-      width: 'fit-content',
-      color: localTheme.colors.primary,
-      textDecoration: 'none',
-      borderBottom: '1px solid transparent',
-    },
+		a: {
+			width: 'fit-content',
+			color: localTheme.colors.primary,
+			textDecoration: 'none',
+			borderBottom: '1px solid transparent',
+		},
 
-    b: {
-      fontWeight: 600,
-      letterSpacing: '0.5px',
-    },
+		b: {
+			fontWeight: 600,
+			letterSpacing: '0.5px',
+		},
 
-    'h1, h2, h3, h4, h5, h6': {
-      fontWeight: '500',
-      color: localTheme.colors.primary,
-    },
+		'h1, h2, h3, h4, h5, h6': {
+			fontWeight: '500',
+			color: localTheme.colors.primary,
+		},
 
-    kbd: {
-      textShadow: '0 1px 0 #fff',
-      fontSize: '12px',
-      color: 'rgb(51, 51, 51)',
-      backgroundColor: 'rgb(247, 247, 247)',
-      padding: '0.25em 0.5em',
-      borderRadius: '3px',
-      border: '1px solid rgb(204, 204, 204)',
-      boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset',
-      display: 'inline-block',
-    },
+		kbd: {
+			textShadow: '0 1px 0 #fff',
+			fontSize: '12px',
+			color: 'rgb(51, 51, 51)',
+			backgroundColor: 'rgb(247, 247, 247)',
+			padding: '0.25em 0.5em',
+			borderRadius: '3px',
+			border: '1px solid rgb(204, 204, 204)',
+			boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset',
+			display: 'inline-block',
+		},
 
-    hr: {
-      width: '100%',
-      marginBlock: '1em',
-      border: 0,
-      borderTop: `1px solid ${localTheme.colors.background}`,
-    },
-  });
+		hr: {
+			width: '100%',
+			marginBlock: '1em',
+			border: 0,
+			borderTop: `1px solid ${localTheme.colors.background}`,
+		},
+	});
 
-  const documentStyle = css({
-    'html, body, #app': {
-      height: '100svh',
-      width: '100%',
-      fontFamily: "'Poppins', sans-serif",
-      fontSize: '14px',
-      color: localTheme.colors.font,
-      backgroundColor: localTheme.colors.background,
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column',
-    },
-  });
+	const documentStyle = css({
+		'html, body, #app': {
+			height: '100svh',
+			width: '100%',
+			fontFamily: "'Poppins', sans-serif",
+			fontSize: '14px',
+			color: localTheme.colors.font,
+			backgroundColor: localTheme.colors.background,
+			display: 'flex',
+			alignItems: 'center',
+			flexDirection: 'column',
+		},
+	});
 
-  const scrollbarStyle = css({
-    /* width */
-    '::-webkit-scrollbar': {
-      height: '0.45em',
-      width: '0.45em',
-    },
+	const scrollbarStyle = css({
+		/* width */
+		'::-webkit-scrollbar': {
+			height: '0.45em',
+			width: '0.45em',
+		},
 
-    /* Track */
-    '::-webkit-scrollbar-track': {
-      borderRadius: localTheme.border.radius,
-    },
+		/* Track */
+		'::-webkit-scrollbar-track': {
+			borderRadius: localTheme.border.radius,
+		},
 
-    /* Handle */
-    '::-webkit-scrollbar-thumb': {
-      background: localTheme.colors.primary,
-      borderRadius: localTheme.border.radius,
+		/* Handle */
+		'::-webkit-scrollbar-thumb': {
+			background: localTheme.colors.primary,
+			borderRadius: localTheme.border.radius,
 
-      '&:hover': {
-        background: localTheme.colors.darkBlue,
-      },
-    },
-  });
+			'&:hover': {
+				background: localTheme.colors.darkBlue,
+			},
+		},
+	});
 
-  const tableStyle = css({
-    table: {
-      height: 'auto',
-      width: '100%',
-      borderCollapse: 'collapse',
-      borderRadius: localTheme.border.radius,
-      overflow: 'hidden',
-    },
+	const tableStyle = css({
+		table: {
+			height: 'auto',
+			width: '100%',
+			borderCollapse: 'collapse',
+			borderRadius: localTheme.border.radius,
+			overflow: 'hidden',
+		},
 
-    th: {
-      textAlign: 'center',
-      fontWeight: 400,
-      backgroundColor: localTheme.colors.secondary,
-    },
+		th: {
+			textAlign: 'center',
+			fontWeight: 400,
+			backgroundColor: localTheme.colors.secondary,
+		},
 
-    'td, th': {
-      padding: '0.45em',
-    },
+		'td, th': {
+			padding: '0.45em',
+		},
 
-    'th, td': {
-      whiteSspace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
+		'th, td': {
+			whiteSspace: 'nowrap',
+			overflow: 'hidden',
+			textOverflow: 'ellipsis',
+		},
 
-    'tr:nth-of-type(even)': {
-      backgroundColor: localTheme.colors.secondary,
-    },
-  });
+		'tr:nth-of-type(even)': {
+			backgroundColor: localTheme.colors.secondary,
+		},
+	});
 
-  return (
-    <Global styles={[cssReset, documentStyle, scrollbarStyle, tableStyle]} />
-  );
+	return (
+		<Global styles={[cssReset, documentStyle, scrollbarStyle, tableStyle]} />
+	);
 }

inertia/components/layouts/_transition_layout.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { fadeInScale } from '~/styles/keyframes';
 
 const TransitionLayout = styled.div(({ theme }) => ({
-  animation: `${theme.transition.delay} ${fadeInScale} both`,
+	animation: `${theme.transition.delay} ${fadeInScale} both`,
 }));
 
 export default TransitionLayout;

inertia/components/layouts/content_layout.tsx

@@ -6,33 +6,33 @@ import Navbar from '~/components/navbar/navbar';
 import BaseLayout from './_base_layout';
 
 const ContentLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
-  height: '100%',
-  width: theme.media.small_desktop,
-  maxWidth: '100%',
-  padding: '1em',
-  display: 'flex',
-  flexDirection: 'column',
+	height: '100%',
+	width: theme.media.small_desktop,
+	maxWidth: '100%',
+	padding: '1em',
+	display: 'flex',
+	flexDirection: 'column',
 
-  '& main': {
-    width: '100%',
-    flex: 1,
-  },
+	'& main': {
+		width: '100%',
+		flex: 1,
+	},
 }));
 
 const ContentLayout = ({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: ReactNode;
-  className?: string;
+	children: ReactNode;
+	className?: string;
 }) => (
-  <BaseLayout>
-    <ContentLayoutStyle className={className}>
-      <Navbar />
-      <main>{children}</main>
-      <Footer />
-    </ContentLayoutStyle>
-  </BaseLayout>
+	<BaseLayout>
+		<ContentLayoutStyle className={className}>
+			<Navbar />
+			<main>{children}</main>
+			<Footer />
+		</ContentLayoutStyle>
+	</BaseLayout>
 );
 
 export default ContentLayout;

inertia/components/layouts/dashboard_layout.tsx

@@ -4,18 +4,18 @@ import TransitionLayout from '~/components/layouts/_transition_layout';
 import BaseLayout from './_base_layout';
 
 const DashboardLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
-  position: 'relative',
-  height: '100%',
-  width: theme.media.medium_desktop,
-  maxWidth: '100%',
-  padding: '0.75em 1em',
-  overflow: 'hidden',
+	position: 'relative',
+	height: '100%',
+	width: theme.media.medium_desktop,
+	maxWidth: '100%',
+	padding: '0.75em 1em',
+	overflow: 'hidden',
 }));
 
 const DashboardLayout = ({ children }: { children: ReactNode }) => (
-  <BaseLayout>
-    <DashboardLayoutStyle>{children}</DashboardLayoutStyle>
-  </BaseLayout>
+	<BaseLayout>
+		<DashboardLayoutStyle>{children}</DashboardLayoutStyle>
+	</BaseLayout>
 );
 
 export default DashboardLayout;

inertia/components/layouts/form_layout.tsx

@@ -11,59 +11,59 @@ import { appendCollectionId } from '~/lib/navigation';
 import BaseLayout from './_base_layout';
 
 const FormLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
-  height: 'fit-content',
-  width: theme.media.mobile,
-  maxWidth: '100%',
-  marginTop: '10em',
-  paddingInline: '1em',
-  display: 'flex',
-  gap: '0.75em',
-  flexDirection: 'column',
+	height: 'fit-content',
+	width: theme.media.mobile,
+	maxWidth: '100%',
+	marginTop: '10em',
+	paddingInline: '1em',
+	display: 'flex',
+	gap: '0.75em',
+	flexDirection: 'column',
 }));
 
 interface FormLayoutProps {
-  title: string;
-  children: ReactNode;
+	title: string;
+	children: ReactNode;
 
-  canSubmit: boolean;
-  handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
-  textSubmitButton?: string;
+	canSubmit: boolean;
+	handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	textSubmitButton?: string;
 
-  disableHomeLink?: boolean;
-  submitBtnDanger?: boolean;
-  collectionId?: number;
+	disableHomeLink?: boolean;
+	submitBtnDanger?: boolean;
+	collectionId?: number;
 }
 
 export default function FormLayout({
-  title,
-  children,
+	title,
+	children,
 
-  canSubmit,
-  handleSubmit,
-  textSubmitButton = i18n.t('common:confirm'),
+	canSubmit,
+	handleSubmit,
+	textSubmitButton = i18n.t('common:confirm'),
 
-  disableHomeLink = false,
-  submitBtnDanger = false,
-  collectionId,
+	disableHomeLink = false,
+	submitBtnDanger = false,
+	collectionId,
 }: FormLayoutProps) {
-  const { t } = useTranslation('common');
-  return (
-    <BaseLayout>
-      <FormLayoutStyle>
-        <Head title={title} />
-        <h2>{title}</h2>
-        <Form onSubmit={handleSubmit}>
-          {children}
-          <Button type="submit" disabled={!canSubmit} danger={submitBtnDanger}>
-            {textSubmitButton}
-          </Button>
-        </Form>
-        {!disableHomeLink && (
-          <Link href={appendCollectionId(route('dashboard').url, collectionId)}>
-            {t('back-home')}
-          </Link>
-        )}
-      </FormLayoutStyle>
-    </BaseLayout>
-  );
+	const { t } = useTranslation('common');
+	return (
+		<BaseLayout>
+			<FormLayoutStyle>
+				<Head title={title} />
+				<h2>{title}</h2>
+				<Form onSubmit={handleSubmit}>
+					{children}
+					<Button type="submit" disabled={!canSubmit} danger={submitBtnDanger}>
+						{textSubmitButton}
+					</Button>
+				</Form>
+				{!disableHomeLink && (
+					<Link href={appendCollectionId(route('dashboard').url, collectionId)}>
+						{t('back-home')}
+					</Link>
+				)}
+			</FormLayoutStyle>
+		</BaseLayout>
+	);
 }

inertia/components/layouts/legal_content_layout.tsx

@@ -4,33 +4,33 @@ import ContentLayout from '~/components/layouts/content_layout';
 import LegalFooter from '~/components/legal/legal_footer';
 
 const LegalContentStyle = styled(ContentLayout)({
-  main: {
-    'h1, p': {
-      marginTop: '0.5em',
-    },
-    h2: {
-      marginTop: '1.5em',
-    },
-    h3: {
-      marginTop: '1em',
-    },
-    ul: {
-      marginLeft: '2em',
-    },
-  },
+	main: {
+		'h1, p': {
+			marginTop: '0.5em',
+		},
+		h2: {
+			marginTop: '1.5em',
+		},
+		h3: {
+			marginTop: '1em',
+		},
+		ul: {
+			marginLeft: '2em',
+		},
+	},
 });
 
 const LegalContentLayout = ({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: ReactNode;
-  className?: string;
+	children: ReactNode;
+	className?: string;
 }) => (
-  <LegalContentStyle className={className}>
-    {children}
-    <LegalFooter />
-  </LegalContentStyle>
+	<LegalContentStyle className={className}>
+		{children}
+		<LegalFooter />
+	</LegalContentStyle>
 );
 
 export default LegalContentLayout;