mirror of
https://github.com/Lapikud/tipilan.git
synced 2026-08-08 17:49:13 +00:00
Adjustments to fit within Figma design
This commit is contained in:
@@ -11,7 +11,7 @@ const Footer = () => {
|
||||
<div className="flex flex-col justify-center sm:justify-between px-6 py-6 md:px-12 md:py-8 gap-4 border-t-3 border-[#1F5673]">
|
||||
<div className="flex flex-col">
|
||||
<h2
|
||||
className={`text-3xl sm:text-4xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mb-4`}
|
||||
className={`text-3xl sm:text-4xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mb-4 text-center sm:text-left`}
|
||||
>
|
||||
{t("footer.contact")}
|
||||
</h2>
|
||||
@@ -30,7 +30,7 @@ const Footer = () => {
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 items-center text-center sm:justify-self-center">
|
||||
<div className="flex flex-row gap-2">
|
||||
<span className="material-symbols-outlined !font-bold text-[#007CAB] dark:text-[#00A3E0]">
|
||||
<span className="material-symbols-outlined font-bold! text-[#007CAB] dark:text-[#00A3E0]">
|
||||
mail
|
||||
</span>
|
||||
<a href="mailto:tipilaninfogmail.com" className="underline">
|
||||
@@ -38,7 +38,7 @@ const Footer = () => {
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2">
|
||||
<span className="material-symbols-outlined !font-bold text-[#007CAB] dark:text-[#00A3E0]">
|
||||
<span className="material-symbols-outlined font-bold! text-[#007CAB] dark:text-[#00A3E0]">
|
||||
phone
|
||||
</span>
|
||||
<a href="tel:+37256931193" className="underline">
|
||||
|
||||
@@ -49,10 +49,11 @@ const Header = ({ navItems }: HeaderProps) => {
|
||||
"/ajakava": "event_note",
|
||||
"/piletid": "local_activity",
|
||||
"/turniirid": "rewarded_ads",
|
||||
"/kodukord": "gavel",
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const largeScreenQuery = window.matchMedia("(min-width: 1024px)");
|
||||
const largeScreenQuery = window.matchMedia("(min-width: 1280px)");
|
||||
|
||||
const handleScaleOrViewportChange = (event: MediaQueryListEvent) => {
|
||||
if (event.matches) {
|
||||
@@ -79,7 +80,7 @@ const Header = ({ navItems }: HeaderProps) => {
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<header className="px-4 py-2 md:px-8 flex items-center bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between">
|
||||
<header className="px-4 sm:px-8 md:px-12 lg:px-16 py-3 flex items-center bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="shrink-0">
|
||||
<Image
|
||||
@@ -92,9 +93,9 @@ const Header = ({ navItems }: HeaderProps) => {
|
||||
</Link>
|
||||
|
||||
{/* Right side - Navigation + controls */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-12">
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-3">
|
||||
<nav className="hidden xl:flex items-center gap-12">
|
||||
{mainNavItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
|
||||
@@ -127,7 +128,7 @@ const Header = ({ navItems }: HeaderProps) => {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden size-10 cursor-pointer"
|
||||
className="xl:hidden size-10 cursor-pointer"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<MdClose className="size-10 text-[#EEE5E5]" />
|
||||
@@ -139,7 +140,8 @@ const Header = ({ navItems }: HeaderProps) => {
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="lg:hidden w-72 translate-x-2 translate-y-0 rounded-none border-3 border-[#1F5673] bg-[#0E0F19] p-0"
|
||||
sideOffset={0}
|
||||
className="xl:hidden w-screen sm:w-72 translate-x-0 sm:translate-x-4 translate-y-3 rounded-none border-3 border-[#1F5673] bg-[#0E0F19] p-0"
|
||||
>
|
||||
{dropdownNavItems.map((item, index) => {
|
||||
const isActive = pathname === item.href;
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
import { useLocale } from "next-intl";
|
||||
import { useRouter, usePathname } from "@/i18n/routing";
|
||||
import { routing } from "@/i18n/routing";
|
||||
import Image from "next/image";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { vipnagorgialla } from "@/components/Vipnagorgialla";
|
||||
|
||||
export default function LanguageSwitcher() {
|
||||
const locale = useLocale();
|
||||
@@ -17,15 +17,15 @@ export default function LanguageSwitcher() {
|
||||
return routing.locales[nextIndex] as "et" | "en";
|
||||
};
|
||||
|
||||
const getNextLanguageName = () => {
|
||||
const getNextLanguageFlag = () => {
|
||||
const nextLocale = getNextLocale();
|
||||
switch (nextLocale) {
|
||||
case "et":
|
||||
return "EST";
|
||||
return { src: "/flags/est.svg", alt: "Estonian flag" };
|
||||
case "en":
|
||||
return "ENG";
|
||||
return { src: "/flags/eng.svg", alt: "English flag" };
|
||||
default:
|
||||
return nextLocale;
|
||||
return { src: "/flags/est.svg", alt: nextLocale };
|
||||
}
|
||||
};
|
||||
|
||||
@@ -38,10 +38,16 @@ export default function LanguageSwitcher() {
|
||||
<Button
|
||||
onClick={handleLanguageSwitch}
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className={`${vipnagorgialla.className} text-3xl font-bold italic uppercase cursor-pointer hover:bg-[#007CAB]/10 dark:hover:bg-[#00A3E0]/10 text-[#007CAB] dark:text-[#00A3E0] hover:text-[#2A2C3F] dark:hover:text-[#EEE5E5] transition-colors`}
|
||||
size="icon"
|
||||
className="cursor-pointer hover:bg-[#007CAB]/10 dark:hover:bg-[#00A3E0]/10 transition-colors rounded-md"
|
||||
>
|
||||
{getNextLanguageName()}
|
||||
<Image
|
||||
src={getNextLanguageFlag().src}
|
||||
alt={getNextLanguageFlag().alt}
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-sm"
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -61,16 +61,23 @@ export default function RuleNav({ sections }: RuleNavProps) {
|
||||
|
||||
return (
|
||||
<aside className="hidden lg:block">
|
||||
<nav className="sticky top-24 border-l border-[#1F5673] pl-6">
|
||||
<ul className="flex flex-col gap-2">
|
||||
<nav className="sticky top-24">
|
||||
<ul className="flex flex-col">
|
||||
{sections.map((section) => (
|
||||
<li key={section.id}>
|
||||
<li
|
||||
key={section.id}
|
||||
className={`border-l-2 pl-4 py-1 transition ${
|
||||
activeSection === section.id
|
||||
? "border-[#00A3E0]"
|
||||
: "border-white hover:border-[#00A3E0]"
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href={`#${section.id}`}
|
||||
className={`transition ${
|
||||
activeSection === section.id
|
||||
? "text-[#EEE5E5] font-bold"
|
||||
: "text-[#00A3E0] hover:text-[#EEE5E5]"
|
||||
? "text-[#00A3E0] font-bold"
|
||||
: "text-white hover:text-[#00A3E0]"
|
||||
}`}
|
||||
>
|
||||
{section.label}
|
||||
|
||||
@@ -25,24 +25,24 @@ function RuleItem({
|
||||
}) {
|
||||
if (typeof rule === "string") {
|
||||
return (
|
||||
<li className="text-[#EEE5E5]/80 mb-2">
|
||||
<span className="text-[#00A3E0] mr-2">{index}.</span>
|
||||
<li className="text-white mb-2">
|
||||
<span className="text-white mr-2">{index}.</span>
|
||||
{rule}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li className="text-[#EEE5E5]/80 mb-3">
|
||||
<span className="text-[#00A3E0] mr-2">{index}.</span>
|
||||
<li className="text-white mb-3">
|
||||
<span className="text-white mr-2">{index}.</span>
|
||||
{rule.main}
|
||||
{rule.sub && rule.sub.length > 0 && (
|
||||
<ol className="ml-6 mt-2">
|
||||
{rule.sub.map((subRule, subIndex) => {
|
||||
if (typeof subRule === "string") {
|
||||
return (
|
||||
<li key={subIndex} className="text-[#EEE5E5]/70 mb-1">
|
||||
<span className="text-[#00A3E0]/70 mr-2">
|
||||
<li key={subIndex} className="text-white mb-1">
|
||||
<span className="text-white mr-2">
|
||||
{index}.{subIndex + 1}.
|
||||
</span>
|
||||
{subRule}
|
||||
@@ -50,16 +50,16 @@ function RuleItem({
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li key={subIndex} className="text-[#EEE5E5]/70 mb-2">
|
||||
<span className="text-[#00A3E0]/70 mr-2">
|
||||
<li key={subIndex} className="text-white mb-2">
|
||||
<span className="text-white mr-2">
|
||||
{index}.{subIndex + 1}.
|
||||
</span>
|
||||
{subRule.main}
|
||||
{subRule.sub && subRule.sub.length > 0 && (
|
||||
<ol className="ml-6 mt-1">
|
||||
{subRule.sub.map((subSubRule, subSubIndex) => (
|
||||
<li key={subSubIndex} className="text-[#EEE5E5]/60 mb-1">
|
||||
<span className="text-[#00A3E0]/50 mr-2">
|
||||
<li key={subSubIndex} className="text-white/80 mb-1">
|
||||
<span className="text-white/80 mr-2">
|
||||
{index}.{subIndex + 1}.{subSubIndex + 1}.
|
||||
</span>
|
||||
{subSubRule}
|
||||
@@ -82,7 +82,7 @@ export default function RulesContent({ sections }: RulesContentProps) {
|
||||
{sections.map((section, sectionIndex) => (
|
||||
<div key={sectionIndex} className="mb-8">
|
||||
<h3
|
||||
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-4`}
|
||||
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-4`}
|
||||
>
|
||||
{sectionIndex + 1}) {section.title}
|
||||
</h3>
|
||||
|
||||
@@ -94,7 +94,7 @@ export default function TeaserCarousel() {
|
||||
return (
|
||||
<div className="border-b-3 border-[#1F5673]">
|
||||
{/* Slides (fade transition + hero lift effect) */}
|
||||
<div className="relative h-[729px] overflow-hidden">
|
||||
<div className="relative h-182.25 overflow-hidden">
|
||||
{slides.map((slide, i) => {
|
||||
const title = t(`${slide.key}.title`);
|
||||
const description = t(`${slide.key}.description`);
|
||||
@@ -117,7 +117,7 @@ export default function TeaserCarousel() {
|
||||
|
||||
{/* Overlay */}
|
||||
<div
|
||||
className={`absolute inset-0 ${slide.fullBrightness ? "" : "bg-gradient-to-r from-[#0E0F19]/90 via-[#0E0F19]/60 to-[#0E0F19]/20"}`}
|
||||
className={`absolute inset-0 ${slide.fullBrightness ? "" : "bg-linear-to-r from-[#0E0F19]/90 via-[#0E0F19]/60 to-[#0E0F19]/20"}`}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
@@ -174,7 +174,7 @@ export default function TeaserCarousel() {
|
||||
{/* Floating heading (mobile) */}
|
||||
<div className="absolute top-5 inset-x-0 px-8 z-20 md:hidden pointer-events-none">
|
||||
<h2
|
||||
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,1.5rem+4.6vw,3rem)] leading-[0.95] tracking-normal uppercase text-[#EEE5E5] whitespace-normal break-words text-left max-w-[12ch]`}
|
||||
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,1.5rem+4.6vw,3rem)] leading-[0.95] tracking-normal uppercase text-[#EEE5E5] whitespace-normal wrap-break-word text-left max-w-[12ch]`}
|
||||
>
|
||||
{highlightLAN(t("heading"))}
|
||||
</h2>
|
||||
@@ -187,7 +187,7 @@ export default function TeaserCarousel() {
|
||||
style={{ flexGrow: headingOnRight ? 1 : 0 }}
|
||||
/>
|
||||
<h2
|
||||
className={`${vipnagorgialla.className} font-bold italic text-[64px] leading-none tracking-normal uppercase text-[#EEE5E5] whitespace-normal [overflow-wrap:anywhere] text-center shrink`}
|
||||
className={`${vipnagorgialla.className} font-bold italic text-[64px] leading-none tracking-normal uppercase text-[#EEE5E5] whitespace-normal wrap-anywhere text-center shrink`}
|
||||
>
|
||||
{highlightLAN(t("heading"))}
|
||||
</h2>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
@@ -17,7 +17,7 @@ function DropdownMenuPortal({
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
@@ -28,7 +28,7 @@ function DropdownMenuTrigger({
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
@@ -42,13 +42,13 @@ function DropdownMenuContent({
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
@@ -56,7 +56,7 @@ function DropdownMenuGroup({
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
@@ -65,8 +65,8 @@ function DropdownMenuItem({
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
inset?: boolean;
|
||||
variant?: "default" | "destructive";
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
@@ -74,12 +74,12 @@ function DropdownMenuItem({
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
@@ -92,8 +92,8 @@ function DropdownMenuCheckboxItem({
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
@@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
@@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
@@ -128,8 +128,8 @@ function DropdownMenuRadioItem({
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
@@ -148,19 +148,19 @@ function DropdownMenuLabel({
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
"px-2 py-1.5 text-sm font-medium data-inset:pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
@@ -173,7 +173,7 @@ function DropdownMenuSeparator({
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
@@ -185,17 +185,17 @@ function DropdownMenuShortcut({
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
@@ -204,22 +204,22 @@ function DropdownMenuSubTrigger({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
||||
className
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
@@ -230,12 +230,12 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
@@ -254,4 +254,4 @@ export {
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user