refactor: merge <main> from pages in to one in App.tsx

This commit is contained in:
Kentai Radiquum 2024-08-23 00:09:19 +05:00
parent 7ab0befa5e
commit 32ff8bce0c
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
15 changed files with 109 additions and 109 deletions

View file

@ -60,7 +60,9 @@ export const App = (props) => {
className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}
>
<Navbar />
{props.children}
<main className="container px-2 pt-4 pb-24 mx-auto sm:pb-0">
{props.children}
</main>
<ChangelogModal
isOpen={showChangelog && preferencesStore.flags.showChangelog}
setIsOpen={() => {

View file

@ -39,7 +39,7 @@ export function BookmarksPage() {
}, [authState, token]);
return (
<main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
{authState === "loading" &&
(!watchingData ||
!plannedData ||
@ -89,6 +89,6 @@ export function BookmarksPage() {
content={abandonedData.content}
/>
)}
</main>
</>
);
}

View file

@ -79,7 +79,7 @@ export function BookmarksCategoryPage(props: any) {
}, [authState, token]);
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.SectionTitleMapping[props.slug]}
@ -133,6 +133,6 @@ export function BookmarksCategoryPage(props: any) {
</div>
</Button>
)}
</main>
</>
);
}

View file

@ -38,7 +38,7 @@ export function CollectionsPage() {
}, [userStore.state, userStore.token]);
return (
<main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
{userStore.state === "loading" &&
(!userCollections || !favoriteCollections) && (
<div className="flex items-center justify-center min-w-full min-h-screen">
@ -63,6 +63,6 @@ export function CollectionsPage() {
content={favoriteCollections.content}
/>
)}
</main>
</>
);
}

View file

@ -89,7 +89,7 @@ export function CollectionsFullPage(props: {
}, [userStore.state, userStore.token]);
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
{content && content.length > 0 ? (
<CollectionsSection
sectionTitle={props.title}
@ -122,6 +122,6 @@ export function CollectionsFullPage(props: {
</div>
</Button>
)}
</main>
</>
);
}

View file

@ -225,7 +225,7 @@ export const CreateCollectionPage = () => {
}
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
<Card>
<p className="text-xl font-bold">
{edit ? "Редактирование коллекции" : "Создание коллекции"}
@ -400,7 +400,7 @@ export const CreateCollectionPage = () => {
width={600}
height={337}
/>
</main>
</>
);
};

View file

@ -76,7 +76,7 @@ export function FavoritesPage() {
}, [authState, token]);
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
Избранное
@ -128,6 +128,6 @@ export function FavoritesPage() {
</div>
</Button>
)}
</main>
</>
);
}

View file

@ -68,7 +68,7 @@ export function HistoryPage() {
}, [authState, token]);
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-4">
<>
{content && content.length > 0 ? (
<>
<ReleaseSection sectionTitle="История" content={content} />
@ -95,6 +95,6 @@ export function HistoryPage() {
<p>В истории пока ничего нет...</p>
</div>
)}
</main>
</>
);
}

View file

@ -40,7 +40,7 @@ export function IndexPage() {
}, [token]);
return (
<main className="container flex flex-col pt-2 pb-20 mx-auto sm:pt-4 sm:pb-0">
<>
{lastReleasesData ? (
<ReleaseCourusel
sectionTitle="Последние релизы"
@ -89,6 +89,6 @@ export function IndexPage() {
<h1 className="text-2xl">Ошибка загрузки контента...</h1>
</div>
)}
</main>
</>
);
}

View file

@ -48,7 +48,7 @@ export function IndexCategoryPage(props) {
// if (error) return <div>failed to load</div>;
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
{content && content.length > 0 ? (
<ReleaseSection
sectionTitle={props.SectionTitleMapping[props.slug]}
@ -76,6 +76,6 @@ export function IndexCategoryPage(props) {
<span className="text-lg">Загрузить ещё</span>
</div>
</Button>
</main>
</>
);
}

View file

@ -52,89 +52,87 @@ export function LoginPage() {
}, [userStore.user]);
return (
<main className="container mx-auto">
<section className="bg-gray-50 dark:bg-gray-900">
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Вход в аккаунт Anixart
</h1>
<form
className="space-y-4 md:space-y-6"
method="POST"
onSubmit={submit}
>
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Логин или эл. почта
</label>
<input
type="text"
name="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@company.com"
value={login}
onChange={(e) => setLogin(e.target.value)}
required={true}
/>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Пароль
</label>
<input
type="password"
name="password"
id="password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required={true}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-start">
<div className="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required={true}
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
/>
</div>
<div className="ml-3 text-sm">
<label
htmlFor="remember"
className="text-gray-500 dark:text-gray-300"
>
Запомнить вход
</label>
</div>
<section className="bg-gray-50 dark:bg-gray-900">
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Вход в аккаунт Anixart
</h1>
<form
className="space-y-4 md:space-y-6"
method="POST"
onSubmit={submit}
>
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Логин или эл. почта
</label>
<input
type="text"
name="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@company.com"
value={login}
onChange={(e) => setLogin(e.target.value)}
required={true}
/>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Пароль
</label>
<input
type="password"
name="password"
id="password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required={true}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-start">
<div className="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required={true}
checked={remember}
onChange={(e) => setRemember(e.target.checked)}
/>
</div>
<div className="ml-3 text-sm">
<label
htmlFor="remember"
className="text-gray-500 dark:text-gray-300"
>
Запомнить вход
</label>
</div>
</div>
<button
type="submit"
className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Войти
</button>
</form>
</div>
</div>
<button
type="submit"
className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Войти
</button>
</form>
</div>
</div>
</section>
</main>
</div>
</section>
);
}

View file

@ -57,7 +57,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {
}, [scrollPosition]);
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
Франшиза {props.title}
@ -86,6 +86,6 @@ export function RelatedPage(props: {id: number|string, title: string}) {
<span className="text-lg">Загрузить ещё</span>
</button>
)}
</main>
</>
);
}

View file

@ -46,7 +46,7 @@ export const ReleasePage = (props: any) => {
}, [data]);
return data ? (
<main className="container px-4 pt-4 pb-24 mx-auto sm:pb-4">
<>
<div className="flex flex-col lg:grid lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
<div className="[grid-column:1] [grid-row:span_2]">
<ReleaseInfoBasics
@ -148,10 +148,10 @@ export const ReleasePage = (props: any) => {
/>
</div>
</div>
</main>
</>
) : (
<main className="flex h-[100dvh] w-full justify-center items-center">
<div className="flex h-[100dvh] w-full justify-center items-center">
<Spinner />
</main>
</div>
);
};

View file

@ -90,7 +90,7 @@ export function SearchPage() {
if (error) return <div>failed to load</div>;
return (
<main className="container px-2 pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
<div>
<form
className="max-w-full mx-auto"
@ -179,6 +179,6 @@ export function SearchPage() {
</div>
</Button>
)}
</main>
</>
);
}

View file

@ -89,7 +89,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
}, [scrollPosition]);
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
<>
{collectionInfoIsLoading ? (
<div className="flex items-center justify-center w-full h-screen">
<Spinner />
@ -150,6 +150,6 @@ export const ViewCollectionPage = (props: { id: number }) => {
</>
)
)}
</main>
</>
);
};