lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-05-08 18:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjustments to fit within Figma design

Browse Source
This commit is contained in:
Randel Mandre
2026-05-06 18:14:23 +03:00
parent 7082fe196f
commit 376e9e7f28
20 changed files with 262 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/[locale]/ajakava/page.tsx
View File

@@ -13,12 +13,12 @@ export default async function Timetable({
return (
<div className="bg-[#0E0F19] min-h-screen flex flex-col items-center justify-center">
<h1
className={`${vipnagorgialla.className} font-bold italic text-4xl md:text-5xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.75rem,5vw,3rem)] text-[#EEE5E5] uppercase mb-4 text-center`}
>
{t("schedule.title")}
</h1>
<p
className={`${vipnagorgialla.className} font-bold italic text-5xl md:text-7xl text-[#EEE5E5] uppercase`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,8vw,4.5rem)] text-[#EEE5E5] uppercase text-center`}
>
{t("schedule.comingSoon")}
</p>

116
src/app/[locale]/kodukord/page.tsx
View File

@@ -1,10 +1,15 @@
// app/kodukord/page.tsx (App Router)
import ReactMarkdown, { Components } from "react-markdown";
import { vipnagorgialla } from "@/components/Vipnagorgialla";
import SectionDivider from "@/components/SectionDivider";
import RuleNav from "@/components/RuleNav";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { loadRulesBun } from "@/lib/loadRules";
const sectionKeys = [
{ id: "reminder", labelKey: "rules.reminder" },
{ id: "code", labelKey: "rules.code" },
];
export default async function Page({
params,
}: {
@@ -15,50 +20,77 @@ export default async function Page({
const t = await getTranslations({ locale });
const content = await loadRulesBun("kodukord", locale as "et" | "en");
return (
<div>
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
{/* Page title (separate from markdown headings) */}
<h1
className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 uppercase`}
>
{t("rules.houseRules")}
</h1>
const sections = sectionKeys.map((section) => ({
id: section.id,
label: t(section.labelKey),
}));
<div className="prose prose-lg dark:prose-invert max-w-none">
<ReactMarkdown
components={
{
h1: (props) => (
<h1 className="text-3xl md:text-4xl font-bold my-4">
{props.children}
</h1>
),
h2: (props) => (
<h2 className="text-2xl md:text-3xl font-semibold my-3">
{props.children}
</h2>
),
ol: (props) => (
<ol className="list-decimal ml-6 md:text-xl">
{props.children}
</ol>
),
ul: (props) => (
<ul className="list-disc ml-6 md:text-xl">
{props.children}
</ul>
),
p: (props) => <p className="md:text-xl">{props.children}</p>,
} as Components
}
>
{content}
</ReactMarkdown>
// Track heading count for ID assignment
let headingCount = 0;
return (
<div className="bg-[#0E0F19] min-h-screen pt-16 md:pt-20">
<div className="max-w-480 mx-auto px-6 md:px-12 py-8 md:py-16">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8 lg:gap-16">
{/* Main content */}
<div>
{/* Page title */}
<h1
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+3vw,4rem)] leading-tight text-[#00A3E0] uppercase mb-8`}
>
{t("rules.houseRules")}
</h1>
<ReactMarkdown
components={
{
h1: (props) => {
const id =
sections[headingCount]?.id || `section-${headingCount}`;
headingCount++;
return (
<h1
id={id}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4 mt-12 first:mt-0 scroll-mt-24 md:scroll-mt-28`}
>
{props.children}
</h1>
);
},
h2: (props) => (
<h2
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2 mt-6`}
>
{props.children}
</h2>
),
ol: (props) => (
<ol className="list-decimal list-inside text-white mb-4">
{props.children}
</ol>
),
ul: (props) => (
<ul className="list-disc list-inside text-white mb-4">
{props.children}
</ul>
),
p: (props) => (
<p className="text-white mb-4">{props.children}</p>
),
li: (props) => (
<li className="text-white mb-2">{props.children}</li>
),
} as Components
}
>
{content}
</ReactMarkdown>
</div>
{/* Sidebar navigation */}
<RuleNav sections={sections} />
</div>
</div>
<SectionDivider />
</div>
);
}

4
src/app/[locale]/messiala/page.tsx
View File

@@ -13,12 +13,12 @@ export default async function Expo({
return (
<div className="bg-[#0E0F19] min-h-screen flex flex-col items-center justify-center">
<h1
className={`${vipnagorgialla.className} font-bold italic text-4xl md:text-5xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.75rem,5vw,3rem)] text-[#EEE5E5] uppercase mb-4 text-center`}
>
{t("expo.title")}
</h1>
<p
className={`${vipnagorgialla.className} font-bold italic text-5xl md:text-7xl text-[#EEE5E5] uppercase`}
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2rem,8vw,4.5rem)] text-[#EEE5E5] uppercase text-center`}
>
{t("expo.comingSoon")}
</p>

8
src/app/[locale]/page.tsx
View File

@@ -29,7 +29,7 @@ export default async function Home({
>
<div className="flex flex-col gap-4">
<span
className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]"
className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]"
style={{
fontVariationSettings:
'"FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24',
@@ -44,7 +44,7 @@ export default async function Home({
>
{t("navigation.tickets")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
@@ -55,7 +55,7 @@ export default async function Home({
className="px-8 md:px-12 py-8 flex flex-col justify-center gap-4 group border-[#1F5673] hover:bg-[#007CAB] dark:hover:bg-[#00A3E0] transition"
>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
rewarded_ads
</span>
</div>
@@ -65,7 +65,7 @@ export default async function Home({
>
{t("navigation.tournaments")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>

6
src/app/[locale]/piletid/page.tsx
View File

@@ -28,7 +28,7 @@ function TicketCard({
}: TicketCardProps) {
return (
<div
className={`relative bg-[#0E0F19] border-[#1F5673] p-8 flex flex-col min-h-87.5 h-full ${className}`}
className={`relative bg-[#0E0F19] border-[#1F5673] px-12 py-16 flex flex-col min-h-87.5 h-full ${className}`}
>
{backgroundImage && (
<Image
@@ -46,7 +46,7 @@ function TicketCard({
{title}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl text-[#EEE5E5] uppercase mb-4`}
>
{subtitle}
</h3>
@@ -66,7 +66,7 @@ function TicketCard({
</span>
))}
</p>
<ul className="flex flex-col gap-1 mb-6 grow">
<ul className="flex flex-col gap-2 mb-6 grow">
{features.map((feature, index) => (
<li
key={index}

16
src/app/[locale]/striim/page.tsx
View File

@@ -41,12 +41,12 @@ export default async function Home({
>
{t("navigation.schedule")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
event_note
</span>
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
@@ -61,7 +61,7 @@ export default async function Home({
src="https://player.twitch.tv/?channel=tipilan_ee&parent=localhost&parent=tipilan.ee"
height="100%"
width="100%"
className="w-full h-full min-h-[400px]"
className="w-full h-full min-h-100"
allow="autoplay; encrypted-media"
></iframe>
</div>
@@ -78,13 +78,13 @@ export default async function Home({
>
{t("navigation.tournaments")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
trophy
</span>
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
@@ -102,12 +102,12 @@ export default async function Home({
>
{t("navigation.expo")}
</h2>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] group-hover:translate-x-2 dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>
<div className="flex flex-col gap-4">
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! text-[#007CAB] dark:text-[#00A3E0] dark:group-hover:text-[#EEE5E5] group-hover:text-[#EEE5E5]">
weekend
</span>
<p className="text-[clamp(0.875rem,0.75rem+0.5vw,1.25rem)] tracking-[-0.045rem] dark:group-hover:text-[#2A2C3F] group-hover:text-black">
@@ -125,7 +125,7 @@ export default async function Home({
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] dark:group-hover:text-[#2A2C3F] text-[#2A2C3F] group-hover:text-black">
{t("home.sections.reserveSpot")}
</h3>
<span className="material-symbols-outlined !text-[clamp(2rem,1.5rem+1.5vw,3.5rem)] !font-bold text-[#007CAB] dark:text-[#00A3E0] hidden md:block group-hover:translate-x-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition">
<span className="material-symbols-outlined text-[clamp(2rem,1.5rem+1.5vw,3.5rem)]! font-bold! text-[#007CAB] dark:text-[#00A3E0] hidden md:block group-hover:translate-x-2 group-hover:text-[#EEE5E5] dark:group-hover:text-[#EEE5E5] transition">
arrow_right_alt
</span>
</div>

70
src/app/[locale]/turniirid/cs2/page.tsx
View File

@@ -62,21 +62,21 @@ export default async function CS2Tournament({
{/* SISSEJUHATUS */}
<section id="intro" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.intro.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("cs2page.intro.description")}
</p>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("cs2page.intro.previousWinners")}
</h3>
<p className="text-[#EEE5E5]/80 font-bold">2025</p>
<ol className="text-[#EEE5E5]/80 list-decimal list-inside mb-4">
<p className="text-white font-bold">2025</p>
<ol className="text-white list-decimal list-inside mb-4">
<li>RAID (Eesti)</li>
<li>hypewrld (Läti)</li>
<li>CSDIILIT (Soome/Eesti)</li>
@@ -86,29 +86,27 @@ export default async function CS2Tournament({
{/* ÜLDINE INFO */}
<section id="info" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.info.title")}
</h2>
<p className="text-[#EEE5E5]/80">
{t("cs2page.info.description")}
</p>
<p className="text-white">{t("cs2page.info.description")}</p>
</section>
{/* AUHINNAFOND */}
<section id="prizes" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.prizes.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("cs2page.prizes.mainTitle")}
</h3>
<ul className="text-[#EEE5E5]/80 mb-2">
<ul className="text-white mb-2">
<li>
1. koht - 3000€, 600€ inimese kohta, 50% ehk 1/2
auhinnafondist.
@@ -122,16 +120,16 @@ export default async function CS2Tournament({
auhinnafondist.
</li>
</ul>
<p className="text-[#EEE5E5]/60 text-sm mb-6">
<p className="text-white/80 text-sm mb-6">
{t("cs2page.prizes.mainNote")}
</p>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("cs2page.prizes.secondTitle")}
</h3>
<ul className="text-[#EEE5E5]/80 mb-2">
<ul className="text-white mb-2">
<li>
1. koht - 500€, 100€ inimese kohta, 66.6...(6)% ehk 2/3
auhinnafondist.
@@ -141,7 +139,7 @@ export default async function CS2Tournament({
auhinnafondist.
</li>
</ul>
<p className="text-[#EEE5E5]/60 text-sm">
<p className="text-white/80 text-sm">
{t("cs2page.prizes.secondNote")}
</p>
</section>
@@ -149,45 +147,41 @@ export default async function CS2Tournament({
{/* TURNIIRI FORMAAT */}
<section id="format" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.format.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("cs2page.format.description")}
</p>
<p className="text-[#EEE5E5]/80">{t("cs2page.format.day1")}</p>
<p className="text-[#EEE5E5]/80">{t("cs2page.format.day23")}</p>
<p className="text-white">{t("cs2page.format.day1")}</p>
<p className="text-white">{t("cs2page.format.day23")}</p>
</section>
{/* VRS INFO */}
<section id="vrs" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.vrs.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-4">
{t("cs2page.vrs.description1")}
</p>
<p className="text-[#EEE5E5]/80">
{t("cs2page.vrs.description2")}
</p>
<p className="text-white mb-4">{t("cs2page.vrs.description1")}</p>
<p className="text-white">{t("cs2page.vrs.description2")}</p>
</section>
{/* FAQ - commented out until content is ready
<section id="faq" className="mb-12">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.faq.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-lg text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-lg text-white uppercase mb-2`}
>
{t("cs2page.faq.q1")}
</h3>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("cs2page.faq.a1")}
</p>
</section>
@@ -196,32 +190,28 @@ export default async function CS2Tournament({
{/* REEGLID */}
<section id="rules" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("cs2page.rules.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("cs2page.rules.description")}
</p>
<RulesContent sections={t.raw("cs2page.rules.sections")} />
<div className="mt-8">
<p className="text-[#EEE5E5]/80 mb-2">
{t("cs2page.rules.contact")}
</p>
<p className="text-white mb-2">{t("cs2page.rules.contact")}</p>
<p className="text-[#00A3E0] font-bold">
{t("cs2page.rules.contactName")}
</p>
<p className="text-[#EEE5E5]/70">
{t("cs2page.rules.contactRole")}
</p>
<p className="text-[#EEE5E5]/70">
<p className="text-white">{t("cs2page.rules.contactRole")}</p>
<p className="text-white">
Discord:{" "}
<a
href="https://discord.com/users/292372329747710013"
target="_blank"
className="text-[#00A3E0] hover:text-[#EEE5E5] transition"
className="text-[#00A3E0] hover:text-white transition"
>
hrkruger
</a>

54
src/app/[locale]/turniirid/lol/page.tsx
View File

@@ -54,21 +54,21 @@ export default async function LoLTournament({
{/* SISSEJUHATUS */}
<section id="intro" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.intro.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("lolpage.intro.description")}
</p>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("lolpage.intro.previousWinners")}
</h3>
<p className="text-[#EEE5E5]/80 font-bold">2025</p>
<ol className="text-[#EEE5E5]/80 list-decimal list-inside mb-4">
<p className="text-white font-bold">2025</p>
<ol className="text-white list-decimal list-inside mb-4">
<li>Ükssilm (Eesti)</li>
<li>Eesti Rästikud (Eesti)</li>
<li>LOMiks (Läti)</li>
@@ -78,34 +78,32 @@ export default async function LoLTournament({
{/* ÜLDINE INFO */}
<section id="info" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.info.title")}
</h2>
<p className="text-[#EEE5E5]/80">
{t("lolpage.info.description")}
</p>
<p className="text-white">{t("lolpage.info.description")}</p>
</section>
{/* AUHINNAFOND */}
<section id="prizes" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.prizes.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-xl text-[#00A3E0] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-xl text-white uppercase mb-2`}
>
{t("lolpage.prizes.mainTitle")}
</h3>
<ul className="text-[#EEE5E5]/80 mb-2">
<ul className="text-white mb-2">
<li>{t("lolpage.prizes.place1")}</li>
<li>{t("lolpage.prizes.place2")}</li>
<li>{t("lolpage.prizes.place3")}</li>
</ul>
<p className="text-[#EEE5E5]/60 text-sm">
<p className="text-white/80 text-sm">
{t("lolpage.prizes.note")}
</p>
</section>
@@ -113,30 +111,30 @@ export default async function LoLTournament({
{/* TURNIIRI FORMAAT */}
<section id="format" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.format.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("lolpage.format.description")}
</p>
<p className="text-[#EEE5E5]/80">{t("lolpage.format.day1")}</p>
<p className="text-[#EEE5E5]/80">{t("lolpage.format.day2")}</p>
<p className="text-white">{t("lolpage.format.day1")}</p>
<p className="text-white">{t("lolpage.format.day2")}</p>
</section>
{/* FAQ - commented out until content is ready
<section id="faq" className="mb-12">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.faq.title")}
</h2>
<h3
className={`${vipnagorgialla.className} font-bold italic text-lg text-[#EEE5E5] uppercase mb-2`}
className={`${vipnagorgialla.className} font-bold italic text-lg text-white uppercase mb-2`}
>
{t("lolpage.faq.q1")}
</h3>
<p className="text-[#EEE5E5]/80 mb-4">
<p className="text-white mb-4">
{t("lolpage.faq.a1")}
</p>
</section>
@@ -145,32 +143,28 @@ export default async function LoLTournament({
{/* REEGLID */}
<section id="rules" className="mb-12 scroll-mt-24 md:scroll-mt-28">
<h2
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-[#EEE5E5] uppercase mb-4`}
className={`${vipnagorgialla.className} font-bold italic text-2xl md:text-3xl text-white uppercase mb-4`}
>
{t("lolpage.rules.title")}
</h2>
<p className="text-[#EEE5E5]/80 mb-6">
<p className="text-white mb-6">
{t("lolpage.rules.description")}
</p>
<RulesContent sections={t.raw("lolpage.rules.sections")} />
<div className="mt-8">
<p className="text-[#EEE5E5]/80 mb-2">
{t("lolpage.rules.contact")}
</p>
<p className="text-white mb-2">{t("lolpage.rules.contact")}</p>
<p className="text-[#00A3E0] font-bold">
{t("lolpage.rules.contactName")}
</p>
<p className="text-[#EEE5E5]/70">
{t("lolpage.rules.contactRole")}
</p>
<p className="text-[#EEE5E5]/70">
<p className="text-white">{t("lolpage.rules.contactRole")}</p>
<p className="text-white">
Discord:{" "}
<a
href="https://discord.com/users/125585160761638912"
target="_blank"
className="text-[#00A3E0] hover:text-[#EEE5E5] transition"
className="text-[#00A3E0] hover:text-white transition"
>
Kukkel
</a>

4
src/app/globals.css
View File

@@ -56,7 +56,7 @@ body {
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--background: #0a121f;
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
@@ -90,7 +90,7 @@ body {
}
.dark {
--background: oklch(0.145 0 0);
--background: #0a121f;
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);

6
src/components/Footer.tsx
View File

@@ -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">

14
src/components/Header.tsx
View File

@@ -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;

22
src/components/LanguageSwitcher.tsx
View File

@@ -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>
);
}

17
src/components/RuleNav.tsx
View File

@@ -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}

22
src/components/RulesContent.tsx
View File

@@ -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>

8
src/components/TeaserCarousel.tsx
View File

@@ -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>

80
src/components/ui/dropdown-menu.tsx
View File

@@ -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,
}
};