zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify workspace dropdowns; Update layouts (#458)

Browse Source 
Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant
This commit is contained in:
Giancarlo Buomprisco
2026-03-11 14:45:42 +08:00
committed by GitHub
parent ca585e09be
commit 4bc8448a1d
530 changed files with 14398 additions and 11198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web/app/(marketing)/blog/_components/blog-pagination.tsx
View File

@@ -1,58 +0,0 @@
'use client';
import { usePathname, useRouter } from 'next/navigation';
import { ArrowLeft, ArrowRight } from 'lucide-react';
import { Button } from '@kit/ui/button';
import { If } from '@kit/ui/if';
import { Trans } from '@kit/ui/trans';
export function BlogPagination(props: {
currentPage: number;
canGoToNextPage: boolean;
canGoToPreviousPage: boolean;
}) {
const navigate = useGoToPage();
return (
<div className={'flex items-center space-x-2'}>
<If condition={props.canGoToPreviousPage}>
<Button
variant={'outline'}
onClick={() => {
navigate(props.currentPage - 1);
}}
>
<ArrowLeft className={'mr-2 h-4'} />
<Trans i18nKey={'marketing:blogPaginationPrevious'} />
</Button>
</If>
<If condition={props.canGoToNextPage}>
<Button
variant={'outline'}
onClick={() => {
navigate(props.currentPage + 1);
}}
>
<Trans i18nKey={'marketing:blogPaginationNext'} />
<ArrowRight className={'ml-2 h-4'} />
</Button>
</If>
</div>
);
}
function useGoToPage() {
const router = useRouter();
const path = usePathname();
return (page: number) => {
const searchParams = new URLSearchParams({
page: page.toString(),
});
router.push(path + '?' + searchParams.toString());
};
}

24
apps/web/app/(marketing)/blog/_components/cover-image.tsx
View File

@@ -1,24 +0,0 @@
import Image from 'next/image';
import { cn } from '@kit/ui/utils';
type Props = {
title: string;
src: string;
preloadImage?: boolean;
className?: string;
};
export function CoverImage({ title, src, preloadImage, className }: Props) {
return (
<Image
className={cn('block rounded-md object-cover', {
className,
})}
src={src}
priority={preloadImage}
alt={`Cover Image for ${title}`}
fill
/>
);
}

11
apps/web/app/(marketing)/blog/_components/date-formatter.tsx
View File

@@ -1,11 +0,0 @@
import { format, parseISO } from 'date-fns';
type Props = {
dateString: string;
};
export const DateFormatter = ({ dateString }: Props) => {
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'PP')}</time>;
};

9
apps/web/app/(marketing)/blog/_components/draft-post-badge.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
export function DraftPostBadge({ children }: React.PropsWithChildren) {
return (
<span className="dark:text-dark-800 rounded-md bg-yellow-200 px-4 py-2 font-semibold">
{children}
</span>
);
}

50
apps/web/app/(marketing)/blog/_components/post-header.tsx
View File

@@ -1,50 +0,0 @@
import { Cms } from '@kit/cms';
import { If } from '@kit/ui/if';
import { cn } from '@kit/ui/utils';
import { CoverImage } from './cover-image';
import { DateFormatter } from './date-formatter';
export function PostHeader({ post }: { post: Cms.ContentItem }) {
const { title, publishedAt, description, image } = post;
return (
<div className={'flex flex-1 flex-col'}>
<div className={cn('border-border/50 border-b py-8')}>
<div className={'mx-auto flex max-w-3xl flex-col gap-y-2.5'}>
<div>
<span className={'text-muted-foreground text-xs'}>
<DateFormatter dateString={publishedAt} />
</span>
</div>
<h1
className={
'font-heading text-2xl font-medium tracking-tighter xl:text-4xl dark:text-white'
}
>
{title}
</h1>
<h2
className={'text-muted-foreground text-base'}
dangerouslySetInnerHTML={{ __html: description ?? '' }}
></h2>
</div>
</div>
<If condition={image}>
{(imageUrl) => (
<div className="relative mx-auto mt-8 flex h-[378px] w-full max-w-3xl justify-center">
<CoverImage
preloadImage
className="rounded-md"
title={title}
src={imageUrl}
/>
</div>
)}
</If>
</div>
);
}

68
apps/web/app/(marketing)/blog/_components/post-preview.tsx
View File

@@ -1,68 +0,0 @@
import Link from 'next/link';
import { Cms } from '@kit/cms';
import { If } from '@kit/ui/if';
import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
type Props = {
post: Cms.ContentItem;
preloadImage?: boolean;
imageHeight?: string | number;
};
const DEFAULT_IMAGE_HEIGHT = 220;
export function PostPreview({
post,
preloadImage,
imageHeight,
}: React.PropsWithChildren<Props>) {
const { title, image, publishedAt, description } = post;
const height = imageHeight ?? DEFAULT_IMAGE_HEIGHT;
const slug = `/blog/${post.slug}`;
return (
<Link
href={slug}
className="hover:bg-muted/50 active:bg-muted flex flex-col gap-y-2.5 rounded-md p-4 transition-all"
>
<If condition={image}>
{(imageUrl) => (
<div className="relative mb-2 w-full" style={{ height }}>
<CoverImage
preloadImage={preloadImage}
title={title}
src={imageUrl}
/>
</div>
)}
</If>
<div className={'flex flex-col space-y-2'}>
<div className={'flex flex-col space-y-2'}>
<div className="flex flex-row items-center gap-x-3 text-xs">
<div className="text-muted-foreground">
<DateFormatter dateString={publishedAt} />
</div>
</div>
<h2 className="text-lg leading-snug font-medium tracking-tight">
<span className="hover:underline">{title}</span>
</h2>
</div>
<p
className="text-muted-foreground mb-4 text-sm leading-relaxed"
dangerouslySetInnerHTML={{ __html: trimText(description ?? '', 200) }}
/>
</div>
</Link>
);
}
function trimText(text: string, maxLength: number) {
return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
}

24
apps/web/app/(marketing)/blog/_components/post.tsx
View File

@@ -1,24 +0,0 @@
import type { Cms } from '@kit/cms';
import { ContentRenderer } from '@kit/cms';
import { PostHeader } from './post-header';
export function Post({
post,
content,
}: {
post: Cms.ContentItem;
content: unknown;
}) {
return (
<div>
<PostHeader post={post} />
<div className={'mx-auto flex max-w-3xl flex-col space-y-6 py-8'}>
<article className="markdoc">
<ContentRenderer content={content} />
</article>
</div>
</div>
);
}