neodyland/tksm-ndy-mc-proj-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance animations and transitions for announcements and layout components

Browse Source
This commit is contained in:
tuna2134
2026-03-29 05:05:45 +00:00
parent 47876ad3d0
commit 88bfefd09c
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/announcements/[slug]/page.tsx
View File

@@ -43,7 +43,7 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
return (
<article className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
<Badge variant="outline" className="mb-3">
お知らせ詳細
</Badge>
@@ -51,14 +51,14 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
<h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1>
</header>
<section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
<section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
<div
className="markdown-body space-y-4 text-sm leading-7 sm:text-base [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc"
dangerouslySetInnerHTML={{ __html: announcement.contentHtml }}
/>
</section>
<Link href="/announcements" className="text-sm text-primary underline underline-offset-4">
<Link href="/announcements" className="text-sm text-primary underline underline-offset-4 transition-transform duration-200 hover:-translate-y-0.5">
お知らせ一覧へ戻る
</Link>
</article>