songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: upgrade tailwind to v4 (2) template components

Browse Source
This commit is contained in:
javayhu 2025-03-21 00:09:11 +08:00
parent 9a5d3a0067
commit 62413b37ba
12 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/[locale]/(marketing)/(pages)/about/page.tsx
View File

@ -33,7 +33,7 @@ export default async function AboutPage() {
return (
<div className="max-w-4xl mx-auto space-y-8">
{/* about section */}
<div className="relative max-w-screen-md mx-auto mb-24 mt-8 md:mt-16">
<div className="relative max-w-(--breakpoint-md) mx-auto mb-24 mt-8 md:mt-16">
<div className="mx-auto flex flex-col justify-between">
<div className="grid gap-8 sm:grid-cols-2">
{/* avatar and name */}

4
src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
View File

@ -109,7 +109,7 @@ export default async function BlogPostPage(props: NextPageProps) {
{/* Basic information */}
<div className="space-y-8">
{/* blog post image */}
<div className="group overflow-hidden relative aspect-[16/9] rounded-lg transition-all border">
<div className="group overflow-hidden relative aspect-16/9 rounded-lg transition-all border">
{post.image && (
<Image
src={post.image}
@ -158,7 +158,7 @@ export default async function BlogPostPage(props: NextPageProps) {
<div className="bg-muted/50 rounded-lg p-6">
<h2 className="text-lg font-semibold mb-4">{t('author')}</h2>
<div className="flex items-center gap-4">
<div className="relative h-8 w-8 flex-shrink-0">
<div className="relative h-8 w-8 shrink-0">
{post.author?.avatar && (
<Image
src={post.author.avatar}

4
src/app/[locale]/(marketing)/payment/cancel/page.tsx
View File

@ -33,13 +33,13 @@ export default function PaymentCancelPage() {
<div className="flex justify-center space-x-4">
<Link
href="/pricing"
className="inline-flex items-center justify-center px-6 py-2 font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
className="inline-flex items-center justify-center px-6 py-2 font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Try Again
</Link>
<Link
href="/contact"
className="inline-flex items-center justify-center px-6 py-2 font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
className="inline-flex items-center justify-center px-6 py-2 font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
>
Get Help
</Link>

2
src/components/auth/auth-card.tsx
View File

@ -31,7 +31,7 @@ export const AuthCard = ({
className,
}: AuthCardProps) => {
return (
<Card className={cn('shadow-sm border border-border', className)}>
<Card className={cn('shadow-xs border border-border', className)}>
<CardHeader className="items-center">
<LocaleLink href="/" prefetch={false}>
<Logo className="mb-2" />

6
src/components/auth/divider-with-text.tsx
View File

@ -14,11 +14,11 @@ export const DividerWithText = ({
}: DividerWithTextProps) => {
return (
<div className={cn('relative flex items-center', className)}>
<div className="flex-grow border-t border-border"></div>
<span className="flex-shrink mx-4 text-sm text-muted-foreground">
<div className="grow border-t border-border"></div>
<span className="shrink mx-4 text-sm text-muted-foreground">
{text}
</span>
<div className="flex-grow border-t border-border"></div>
<div className="grow border-t border-border"></div>
</div>
);
};

8
src/components/blog/blog-card.tsx
View File

@ -19,7 +19,7 @@ export default function BlogCard({ post }: BlogCardProps) {
<LocaleLink href={`/blog/${slugParts.join('/')}`} className="block h-full">
<div className="group flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
{/* Image container - fixed aspect ratio */}
<div className="group overflow-hidden relative aspect-[16/9] w-full">
<div className="group overflow-hidden relative aspect-16/9 w-full">
{post.image && (
<div className="relative w-full h-full">
<Image
@ -54,7 +54,7 @@ export default function BlogCard({ post }: BlogCardProps) {
{/* Post title */}
<h3 className="text-lg line-clamp-2 font-medium">
<span
className="bg-gradient-to-r from-green-200 to-green-100
className="bg-linear-to-r from-green-200 to-green-100
bg-[length:0px_10px] bg-left-bottom bg-no-repeat
transition-[background-size]
duration-500
@ -79,7 +79,7 @@ export default function BlogCard({ post }: BlogCardProps) {
{/* Author and date */}
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between space-x-4 text-muted-foreground">
<div className="flex items-center gap-2">
<div className="relative h-8 w-8 flex-shrink-0">
<div className="relative h-8 w-8 shrink-0">
{post?.author?.avatar && (
<Image
src={post?.author?.avatar}
@ -105,7 +105,7 @@ export default function BlogCard({ post }: BlogCardProps) {
export function BlogCardSkeleton() {
return (
<div className="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
<div className="overflow-hidden relative aspect-[16/9] w-full">
<div className="overflow-hidden relative aspect-16/9 w-full">
<Skeleton className="w-full h-full" />
</div>
<div className="p-4 flex flex-col justify-between flex-1">

2
src/components/dashboard/dashboard-header.tsx
View File

@ -24,7 +24,7 @@ interface DashboardHeaderProps {
export function DashboardHeader({ breadcrumbs, actions }: DashboardHeaderProps) {
return (
<header className="flex h-16 border-b shrink-0 items-center gap-2 sticky top-0 z-10 bg-background
transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />

2
src/components/dashboard/sidebar-user.tsx
View File

@ -110,7 +110,7 @@ export function SidebarUser() {
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
align="end"
sideOffset={4}

6
src/components/layout/navbar.tsx
View File

@ -34,7 +34,7 @@ const customNavigationMenuTriggerStyle = cn(
navigationMenuTriggerStyle(),
'relative bg-transparent text-muted-foreground',
'hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground',
'data-[active]:font-semibold data-[active]:bg-transparent data-[active]:text-foreground',
'data-active:font-semibold data-active:bg-transparent data-active:text-foreground',
'data-[state=open]:bg-transparent data-[state=open]:text-foreground'
);
@ -54,7 +54,7 @@ export function Navbar({ scroll }: NavBarProps) {
'sticky inset-x-0 top-0 z-40 py-4 transition-all duration-300',
scroll
? scrolled
? 'bg-background/80 backdrop-blur-md border-b supports-[backdrop-filter]:bg-background/60'
? 'bg-background/80 backdrop-blur-md border-b supports-backdrop-filter:bg-background/60'
: 'bg-background'
: 'border-b bg-background'
)}
@ -117,7 +117,7 @@ export function Navbar({ scroll }: NavBarProps) {
: undefined
}
className="group flex select-none flex-row items-center gap-4 rounded-md
p-2 leading-none no-underline outline-none transition-colors
p-2 leading-none no-underline outline-hidden transition-colors
hover:bg-accent hover:text-accent-foreground
focus:bg-accent focus:text-accent-foreground"
>

4
src/components/payment/pricing-card.tsx
View File

@ -115,7 +115,7 @@ export function PricingCard({
<CardTitle className="text-xl">{plan.name}</CardTitle>
<CardDescription className="min-h-12">{plan.description}</CardDescription>
</CardHeader>
<CardContent className="flex-grow">
<CardContent className="grow">
<div className="mb-3">
<span className="text-3xl font-bold">{formattedPrice}</span>
{priceLabel && (
@ -136,7 +136,7 @@ export function PricingCard({
<ul className="space-y-3 mb-6">
{plan.features.map((feature, i) => (
<li key={i} className="flex items-start">
<Check className="h-5 w-5 text-green-500 mr-2 flex-shrink-0" />
<Check className="h-5 w-5 text-green-500 mr-2 shrink-0" />
<span className="text-sm">{feature}</span>
</li>
))}

6
src/components/settings/billing/billing-card.tsx
View File

@ -276,7 +276,7 @@ export default function BillingCard() {
<CardTitle>{plan.name}</CardTitle>
<CardDescription>{plan.description}</CardDescription>
</CardHeader>
<CardContent className="flex-grow">
<CardContent className="grow">
<div className="mb-4">
<span className="text-3xl font-bold">
{formatPrice(price.amount, price.currency)}
@ -303,7 +303,7 @@ export default function BillingCard() {
{plan.features.map((feature, index) => (
<li key={index} className="flex items-start">
<svg
className="h-5 w-5 text-primary flex-shrink-0 mr-2"
className="h-5 w-5 text-primary shrink-0 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -354,7 +354,7 @@ export default function BillingCard() {
{plan.features.map((feature, index) => (
<li key={index} className="flex items-start">
<svg
className="h-5 w-5 text-primary flex-shrink-0 mr-2"
className="h-5 w-5 text-primary shrink-0 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"

4
src/components/shared/mdx-component.tsx
View File

@ -185,7 +185,7 @@ const components = {
code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
<code
className={cn(
'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm',
'relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm',
className
)}
{...props}
@ -237,7 +237,7 @@ const components = {
LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
<Link
className={cn(
'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10',
'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow-sm transition-colors hover:bg-muted/50 sm:p-10',
className
)}
{...props}