first commit
This commit is contained in:
AyrisAI
@@ -0,0 +1,103 @@
|
||||
import { Link } from '@/i18n/routing'
|
||||
import { useTranslations } from 'next-intl'
|
||||
|
||||
export default function Footer() {
|
||||
const t = useTranslations('footer')
|
||||
const nav = useTranslations('nav')
|
||||
|
||||
return (
|
||||
<footer className="bg-pine text-stone/70 border-t border-white/10 pt-16 pb-8 font-sans">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
|
||||
|
||||
{/* Logo & Info */}
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<Link href="/" className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full border-2 border-stone flex items-center justify-center relative bg-paper shrink-0">
|
||||
<div className="absolute inset-[2.5px] rounded-full border border-dashed border-turquoise" />
|
||||
<span className="font-heading font-extrabold text-pine text-xs tracking-tighter">ML</span>
|
||||
</div>
|
||||
<h2 className="font-heading font-extrabold text-lg text-stone tracking-tight leading-none lowercase">
|
||||
marmaris <span className="text-turquoise">local</span>
|
||||
</h2>
|
||||
</Link>
|
||||
<p className="text-xs text-stone/50 max-w-sm font-medium leading-relaxed">
|
||||
{t('about')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-heading font-semibold text-xs text-stone uppercase tracking-wider">
|
||||
{nav('home')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-xs">
|
||||
<li>
|
||||
<Link href="/restoranlar" className="hover:text-turquoise transition-colors">
|
||||
{nav('restaurants')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/apartlar" className="hover:text-turquoise transition-colors">
|
||||
{nav('aparts')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/isletmeler" className="hover:text-turquoise transition-colors">
|
||||
{nav('businesses')}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Guidelines */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-heading font-semibold text-xs text-stone uppercase tracking-wider">
|
||||
Marmaris Local
|
||||
</h3>
|
||||
<ul className="space-y-2 text-xs">
|
||||
<li>
|
||||
<Link href="/hakkinda" className="hover:text-turquoise transition-colors">
|
||||
{nav('about')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/iletisim" className="hover:text-turquoise transition-colors">
|
||||
{nav('contact')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/isletme-ekle" className="hover:text-turquoise transition-colors">
|
||||
{nav('addBusiness')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/login" className="hover:text-turquoise transition-colors">
|
||||
{nav('admin')}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Copyright & Branding */}
|
||||
<div className="border-t border-white/5 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-stone/40 gap-4">
|
||||
<p>{t('rights')}</p>
|
||||
<div className="flex items-center gap-1.5 font-medium">
|
||||
<span>Powered by</span>
|
||||
<a
|
||||
href="https://ayris.tech"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-stone hover:text-turquoise transition-colors border-b border-stone/20 hover:border-turquoise pb-0.5"
|
||||
>
|
||||
ayris.tech
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import Image from 'next/image'
|
||||
import { Link } from '@/i18n/routing'
|
||||
import { useLocale } from 'next-intl'
|
||||
import { Star } from 'lucide-react'
|
||||
|
||||
export interface Gallery {
|
||||
id: string
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
slug: string
|
||||
nameTr: string
|
||||
nameEn: string
|
||||
nameRu: string
|
||||
}
|
||||
|
||||
export interface Neighborhood {
|
||||
slug: string
|
||||
nameTr: string
|
||||
nameEn: string
|
||||
nameRu: string
|
||||
}
|
||||
|
||||
export interface Listing {
|
||||
id: string
|
||||
slug: string
|
||||
categoryId: string
|
||||
neighborhoodId: string
|
||||
nameTr: string
|
||||
nameEn: string
|
||||
nameRu: string
|
||||
descriptionTr: string
|
||||
descriptionEn: string
|
||||
descriptionRu: string
|
||||
address: string
|
||||
priceRange: number
|
||||
rating?: number | null
|
||||
isLocalApproved: boolean
|
||||
images: Gallery[]
|
||||
category?: Category
|
||||
neighborhood?: Neighborhood
|
||||
}
|
||||
|
||||
export default function ListingCard({ listing }: { listing: Listing }) {
|
||||
const locale = useLocale()
|
||||
|
||||
const name =
|
||||
locale === 'ru'
|
||||
? listing.nameRu
|
||||
: locale === 'en'
|
||||
? listing.nameEn
|
||||
: listing.nameTr
|
||||
|
||||
const description =
|
||||
locale === 'ru'
|
||||
? listing.descriptionRu
|
||||
: locale === 'en'
|
||||
? listing.descriptionEn
|
||||
: listing.descriptionTr
|
||||
|
||||
const categoryName = listing.category
|
||||
? locale === 'ru'
|
||||
? listing.category.nameRu
|
||||
: locale === 'en'
|
||||
? listing.category.nameEn
|
||||
: listing.category.nameTr
|
||||
: ''
|
||||
|
||||
const neighborhoodName = listing.neighborhood
|
||||
? locale === 'ru'
|
||||
? listing.neighborhood.nameRu
|
||||
: locale === 'en'
|
||||
? listing.neighborhood.nameEn
|
||||
: listing.neighborhood.nameTr
|
||||
: ''
|
||||
|
||||
const priceSymbols = '₺'.repeat(listing.priceRange)
|
||||
const categorySlug = listing.category?.slug || 'isletme'
|
||||
|
||||
const mainImageUrl =
|
||||
listing.images && listing.images.length > 0
|
||||
? listing.images[0].url
|
||||
: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&auto=format&fit=crop&q=80'
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/${categorySlug}/${listing.slug}`}
|
||||
className="group bg-paper rounded-2xl border border-pine/8 overflow-hidden flex flex-col relative shadow-sm hover:shadow-md hover:border-turquoise/35 transition-all duration-300 transform hover:-translate-y-0.5"
|
||||
>
|
||||
{/* Local Approved Seal */}
|
||||
{listing.isLocalApproved && (
|
||||
<div className="absolute top-4 right-4 z-10 w-[52px] h-[52px] rounded-full border-[1.5px] border-turquoise bg-paper flex items-center justify-center -rotate-12 shadow-sm shrink-0">
|
||||
<div className="absolute inset-[2.5px] rounded-full border border-dashed border-turquoise/60" />
|
||||
<span className="font-mono text-[7px] text-center font-bold text-turquoise tracking-tight leading-[1.1] uppercase">
|
||||
YEREL<br />ONAYLI
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Image Preview */}
|
||||
<div className="aspect-[4/3] w-full relative bg-stone-deep overflow-hidden">
|
||||
<Image
|
||||
src={mainImageUrl}
|
||||
alt={name}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-pine/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
</div>
|
||||
|
||||
{/* Content Details */}
|
||||
<div className="p-5 flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
{/* Category */}
|
||||
<div className="text-[10px] font-mono text-bougainvillea font-bold uppercase tracking-wider mb-2">
|
||||
{categoryName}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-heading font-bold text-lg text-pine leading-tight mb-2 group-hover:text-turquoise transition-colors line-clamp-1">
|
||||
{name}
|
||||
</h3>
|
||||
|
||||
{/* Neighborhood */}
|
||||
<div className="text-xs text-ink/60 font-medium mb-4">
|
||||
{neighborhoodName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer info (price range, rating) */}
|
||||
<div className="border-t border-dashed border-pine/12 pt-3.5 mt-auto flex items-center justify-between text-xs font-mono">
|
||||
<span className="text-pine font-semibold">{priceSymbols}</span>
|
||||
|
||||
{listing.rating && (
|
||||
<div className="flex items-center gap-1 text-gold font-bold">
|
||||
<Star className="w-3.5 h-3.5 fill-gold stroke-gold" />
|
||||
<span>★ {listing.rating.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Link, usePathname, useRouter } from '@/i18n/routing'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import { Menu, X, Globe, PlusCircle } from 'lucide-react'
|
||||
|
||||
export default function Navbar() {
|
||||
const t = useTranslations('nav')
|
||||
const activeLocale = useLocale()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
const [langMenuOpen, setLangMenuOpen] = useState(false)
|
||||
|
||||
const languages = [
|
||||
{ code: 'tr', label: 'Türkçe' },
|
||||
{ code: 'en', label: 'English' },
|
||||
{ code: 'ru', label: 'Русский' }
|
||||
]
|
||||
|
||||
const navItems = [
|
||||
{ name: t('home'), href: '/' },
|
||||
{ name: t('restaurants'), href: '/restoranlar' },
|
||||
{ name: t('aparts'), href: '/apartlar' },
|
||||
{ name: t('businesses'), href: '/isletmeler' },
|
||||
{ name: t('about'), href: '/hakkinda' },
|
||||
{ name: t('contact'), href: '/iletisim' }
|
||||
]
|
||||
|
||||
const handleLanguageChange = (localeCode: string) => {
|
||||
setLangMenuOpen(false)
|
||||
router.replace(pathname, { locale: localeCode })
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="bg-pine text-stone border-b border-white/10 sticky top-0 z-40">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
|
||||
{/* Logo & Wordmark */}
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-11 h-11 rounded-full border-2 border-stone flex items-center justify-center relative bg-paper shrink-0 shadow-sm transition-transform group-hover:scale-105">
|
||||
<div className="absolute inset-[3px] rounded-full border border-dashed border-turquoise" />
|
||||
<span className="font-heading font-extrabold text-pine text-sm tracking-tighter">ML</span>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="font-heading font-extrabold text-lg text-stone tracking-tight leading-none lowercase">
|
||||
marmaris <span className="text-turquoise">local</span>
|
||||
</h1>
|
||||
<p className="text-[9px] font-mono text-shutter tracking-wider mt-0.5 uppercase">
|
||||
local knowledge
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-6">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`text-sm font-medium transition-colors hover:text-turquoise ${
|
||||
isActive ? 'text-turquoise font-semibold' : 'text-stone/80'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Action Items */}
|
||||
<div className="hidden lg:flex items-center gap-4">
|
||||
{/* Language Selector */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setLangMenuOpen(!langMenuOpen)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-stone/20 hover:border-turquoise transition text-xs font-mono"
|
||||
>
|
||||
<Globe className="w-3.5 h-3.5 text-turquoise" />
|
||||
{activeLocale.toUpperCase()}
|
||||
</button>
|
||||
|
||||
{langMenuOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setLangMenuOpen(false)} />
|
||||
<div className="absolute right-0 mt-2 w-36 rounded-xl bg-paper text-ink shadow-lg ring-1 ring-black/5 z-20 py-1.5 overflow-hidden">
|
||||
{languages.map((lang) => (
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => handleLanguageChange(lang.code)}
|
||||
className={`w-full text-left px-4 py-2 text-xs hover:bg-stone transition flex items-center justify-between ${
|
||||
activeLocale === lang.code ? 'font-bold text-turquoise bg-stone/40' : 'text-ink/80'
|
||||
}`}
|
||||
>
|
||||
{lang.label}
|
||||
<span className="font-mono text-[10px] text-shutter">{lang.code.toUpperCase()}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add Business Button */}
|
||||
<Link
|
||||
href="/isletme-ekle"
|
||||
className="flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper font-medium text-xs py-2 px-4 rounded-full transition-transform active:scale-95 shadow-sm"
|
||||
>
|
||||
<PlusCircle className="w-3.5 h-3.5" />
|
||||
{t('addBusiness')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="flex items-center gap-3 lg:hidden">
|
||||
{/* Lang menu for mobile */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setLangMenuOpen(!langMenuOpen)}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border border-stone/20 text-xs font-mono"
|
||||
>
|
||||
<Globe className="w-3.5 h-3.5 text-turquoise" />
|
||||
{activeLocale.toUpperCase()}
|
||||
</button>
|
||||
{langMenuOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-10" onClick={() => setLangMenuOpen(false)} />
|
||||
<div className="absolute right-0 mt-2 w-32 rounded-xl bg-paper text-ink shadow-lg ring-1 ring-black/5 z-20 py-1">
|
||||
{languages.map((lang) => (
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => handleLanguageChange(lang.code)}
|
||||
className="w-full text-left px-3 py-1.5 text-xs hover:bg-stone"
|
||||
>
|
||||
{lang.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="text-stone hover:text-turquoise focus:outline-none"
|
||||
>
|
||||
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="lg:hidden border-t border-white/10 bg-pine py-4 px-4 space-y-3">
|
||||
<nav className="flex flex-col gap-3">
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className={`text-sm font-medium py-2 px-3 rounded-lg transition-colors ${
|
||||
isActive ? 'bg-white/10 text-turquoise' : 'text-stone/80 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
<div className="pt-4 border-t border-white/10">
|
||||
<Link
|
||||
href="/isletme-ekle"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="w-full flex items-center justify-center gap-2 bg-turquoise hover:bg-turquoise/90 text-paper font-medium py-3 rounded-lg text-sm transition"
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" />
|
||||
{t('addBusiness')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
Reference in New Issue
Block a user