Refactor i18n initialization and make UI adjustments

Converted the `initializeI18nClient` function to an asynchronous function for a more straightforward implementation. Simultaneously, made some tweaks to the UI components, such as altering dimensions in `site-footer.tsx` and `site-page-header.tsx`, and refactoring the `FooterSectionHeading` component for easier maintenance and improved readability.
This commit is contained in:
giancarlo
2024-04-16 21:06:28 +08:00
parent cad729670f
commit 1f3c4805f0
3 changed files with 51 additions and 57 deletions

View File

@@ -1,5 +1,6 @@
import Link from 'next/link';
import { Heading } from '@kit/ui/heading';
import { Trans } from '@kit/ui/trans';
import { AppLogo } from '~/components/app-logo';
@@ -10,7 +11,7 @@ const YEAR = new Date().getFullYear();
export function SiteFooter() {
return (
<footer className={'border-t py-8 xl:py-12 2xl:py-14'}>
<div className={'container mx-auto'}>
<div className={'px-8'}>
<div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
<div
className={
@@ -20,10 +21,10 @@ export function SiteFooter() {
>
<div className={'flex flex-col space-y-4'}>
<div>
<AppLogo className={'w-[85px] md:w-[115px]'} />
<AppLogo className={'w-[85px] md:w-[95px]'} />
</div>
<div className={'flex flex-col space-y-2'}>
<div className={'flex flex-col space-y-4'}>
<div>
<p className={'text-sm text-muted-foreground'}>
Add a short tagline about your product
@@ -42,8 +43,7 @@ export function SiteFooter() {
<div
className={
'flex flex-col space-y-8 lg:space-x-6 lg:space-y-0' +
' xl:space-x-16 2xl:space-x-20' +
' w-full lg:flex-row lg:justify-end'
' w-full lg:flex-row lg:justify-end xl:space-x-16'
}
>
<div>
@@ -116,11 +116,7 @@ export function SiteFooter() {
}
function FooterSectionHeading(props: React.PropsWithChildren) {
return (
<p>
<span className={'font-semibold'}>{props.children}</span>
</p>
);
return <Heading level={6}>{props.children}</Heading>;
}
function FooterSectionList(props: React.PropsWithChildren) {

View File

@@ -6,7 +6,7 @@ export function SitePageHeader(props: {
className?: string;
}) {
return (
<div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
<div className={cn('border-b py-8 xl:py-10 2xl:py-12', props.className)}>
<div className={'container flex flex-col space-y-2 lg:space-y-4'}>
<h1 className={'font-base font-heading text-3xl xl:text-5xl'}>
{props.title}