lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-03-23 21:34:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

React19 update broke components using ref

Browse Source
This commit is contained in:
Randel Mandre
2025-08-19 05:29:15 +03:00
parent 018c7c53e5
commit deb07df397
9 changed files with 382 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.ts
View File

@@ -9,7 +9,7 @@ const nextConfig: NextConfig = {
{ {
key: "Content-Security-Policy", key: "Content-Security-Policy",
value: value:
"frame-src 'self' https://player.twitch.tv https://embed.twitch.tv; frame-ancestors 'self';", "frame-src 'self' https://tipilan.ee https://player.twitch.tv https://embed.twitch.tv; frame-ancestors 'self' https://tipilan.ee;",
}, },
{ {
key: "X-Frame-Options", key: "X-Frame-Options",

2
package.json
View File

@@ -27,7 +27,6 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"drizzle-orm": "^0.44.2", "drizzle-orm": "^0.44.2",
"gray-matter": "^4.0.3",
"lucide-react": "^0.522.0", "lucide-react": "^0.522.0",
"material-symbols": "^0.31.8", "material-symbols": "^0.31.8",
"next": "15.3.0", "next": "15.3.0",
@@ -36,7 +35,6 @@
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"remark-gfm": "^4.0.1",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
"three": "^0.178.0", "three": "^0.178.0",
"tw-animate-css": "^1.3.4" "tw-animate-css": "^1.3.4"

97
src/app/kodukord/page.tsx
View File

@@ -1,55 +1,56 @@
// app/kodukord/page.tsx (App Router) // app/kodukord/page.tsx (App Router)
import fs from "node:fs"; import ReactMarkdown, { Components } from "react-markdown";
import path from "node:path"; import { vipnagorgialla } from "@/components/Vipnagorgialla";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import {vipnagorgialla} from "@/components/Vipnagorgialla";
import SectionDivider from "@/components/SectionDivider"; import SectionDivider from "@/components/SectionDivider";
export const runtime = "nodejs"; // ensure fs is available (not Edge) export default async function Page() {
export const dynamic = "force-static"; // read at build time const file = Bun.file("src/data/kodukord.md");
const content = await file.text();
export default function Page() { return (
const filePath = path.join(process.cwd(), "src/data", "kodukord.md"); <div>
const content = fs.readFileSync(filePath, "utf8"); <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`}
>
Kodukord
</h1>
return ( <div className="prose prose-lg dark:prose-invert max-w-none">
<div> <ReactMarkdown
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16"> components={
{/* Page title (separate from markdown headings) */} {
<h1 h1: (props) => (
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`} <h1 className="text-3xl md:text-4xl font-bold my-4">
> {props.children}
Kodukord </h1>
</h1> ),
h2: (props) => (
<div className="prose prose-lg dark:prose-invert max-w-none"> <h2 className="text-2xl md:text-3xl font-semibold my-3">
<ReactMarkdown {props.children}
remarkPlugins={[remarkGfm]} </h2>
components={{ ),
h1: ({node, ...props}) => ( ol: (props) => (
<h1 className="text-3xl md:text-4xl font-bold my-4" {...props} /> <ol className="list-decimal ml-6 md:text-xl">
), {props.children}
h2: ({node, ...props}) => ( </ol>
<h2 className="text-2xl md:text-3xl font-semibold my-3" {...props} /> ),
), ul: (props) => (
ol: ({node, ...props}) => ( <ul className="list-disc ml-6 md:text-xl">
<ol className="list-decimal ml-6 md:text-xl" {...props} /> {props.children}
), </ul>
ul: ({node, ...props}) => ( ),
<ul className="list-disc ml-6 md:text-xl" {...props} /> p: (props) => <p className="md:text-xl">{props.children}</p>,
), } as Components
p: ({node, ...props}) => ( }
<p className="md:text-xl" {...props} /> >
), {content}
}} </ReactMarkdown>
>
{content}
</ReactMarkdown>
</div>
</div>
<SectionDivider/>
</div> </div>
); </div>
<SectionDivider />
</div>
);
} }

142
src/app/reeglid/[slug]/page.tsx
View File

@@ -1,49 +1,103 @@
import {vipnagorgialla} from "@/components/Vipnagorgialla"; import { notFound } from "next/navigation";
import path from "node:path"; import ReactMarkdown, { Components } from "react-markdown";
import fs from "node:fs/promises"; import { vipnagorgialla } from "@/components/Vipnagorgialla";
import ReactMarkdown from "react-markdown";
import SectionDivider from "@/components/SectionDivider"; import SectionDivider from "@/components/SectionDivider";
type Props = { // Map of valid slugs to their corresponding file paths and titles
params: Promise<{ slug: string }>; const rulesMap = {
}; lol: {
filePath: "src/data/rules/lol.md",
title: "LOL Reeglid",
},
cs2: {
filePath: "src/data/rules/cs2.md",
title: "CS2 Reeglid",
},
} as const;
export default async function RulePage({params}: Props) { type RuleSlug = keyof typeof rulesMap;
const {slug} = await params;
const filePath = path.join(process.cwd(), "src/data/rules", `${slug}.md`); interface PageProps {
let file: string; params: Promise<{ slug: string }>;
}
try {
file = await fs.readFile(filePath, "utf8"); async function getRuleContent(slug: string) {
} catch { if (!Object.keys(rulesMap).includes(slug)) {
file = `# ${slug.toUpperCase()} REEGLID\n\nSisu hetkel puudub.`; return null;
} }
const data = {title: undefined as string | undefined}; const ruleConfig = rulesMap[slug as RuleSlug];
return ( try {
<> const file = Bun.file(ruleConfig.filePath);
<div className="mb-16"> const content = await file.text();
<h1 return {
className={`not-prose ${vipnagorgialla.className} font-bold italic uppercase text-[64px] leading-[96px] tracking-[-0.02em] text-[#2A2C3F] dark:text-[#EEE5E5] mx-auto mt-16 mb-6 px-8`} content,
> title: ruleConfig.title,
{data.title || `${slug.toUpperCase()} REEGLID`} };
</h1> } catch (error) {
console.error(`Error reading rule file for slug ${slug}:`, error);
<div return null;
className={`mx-auto px-8 font-worksans }
[&_ol]:ml-6 }
[&_ol_ol]:ml-10
[&_ol_ol_ol]:ml-14 export default async function RulePage({ params }: PageProps) {
[&_h2]:font-bold const { slug } = await params;
`} const ruleData = await getRuleContent(slug);
>
<ReactMarkdown>{file}</ReactMarkdown> if (!ruleData) {
</div> notFound();
</div> }
<SectionDivider/> const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold uppercase italic text-[#2A2C3F] dark:text-[#EEE5E5]`;
</>
); return (
<div>
<div className="flex flex-col min-h-[90vh] m-6 mt-16 md:m-16">
<h1 className={`${headingStyle} mt-8 md:mt-16 mb-4`}>
{ruleData.title}
</h1>
<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-none 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
}
>
{ruleData.content}
</ReactMarkdown>
</div>
</div>
<SectionDivider />
</div>
);
}
export async function generateStaticParams() {
return Object.keys(rulesMap).map((slug) => ({
slug,
}));
} }

94
src/app/reeglid/page.tsx
View File

@@ -1,64 +1,52 @@
import {vipnagorgialla} from "@/components/Vipnagorgialla"; import { vipnagorgialla } from "@/components/Vipnagorgialla";
import Link from "next/link"; import Link from "next/link";
import SectionDivider from "@/components/SectionDivider"; import SectionDivider from "@/components/SectionDivider";
export default function RulesMenu() { export default function RulesMenu() {
const headingStyle = `text-5xl sm:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5]`; const headingStyle = `text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] uppercase`;
const boxStyle = `-skew-x-2 md:-skew-x-5 text-white md:px-12 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]`;
const boxTextStyle = `text-3xl ${vipnagorgialla.className} font-bold uppercase text-[#EEE5E5] pb-2`;
// const SectionDivider = () => <div className="border-b-[3px] border-[#1F5673] w-full"/>; const boxStyle = `-skew-x-2 md:-skew-x-5 text-white md:px-12 hover:scale-103 transition-all duration-150 w-full md:w-xl lg:w-[400px]`;
return ( const boxTextStyle = `text-3xl ${vipnagorgialla.className} font-bold uppercase text-[#EEE5E5] pb-2`;
<div>
<div className="flex flex-col md:m-16">
<h1 className={`${headingStyle} mt-8 md:mt-16`}>
REEGLID
</h1>
<div className='flex flex-wrap flex-row lg:mt-16 justify-center lg:items-start gap-12 flex-grow mb-8'> // const SectionDivider = () => <div className="border-b-[3px] border-[#1F5673] w-full"/>;
<Link href="/kodukord">
<div className={`${boxStyle} bg-[#007CAB] py-20`}>
<h2 className={`${boxTextStyle}`}>
Kodukord
</h2>
</div>
</Link>
<Link href="/reeglid/cs2"> return (
<div className={`${boxStyle} bg-[#1F5673] py-20`}> <div>
<h2 className={`${boxTextStyle}`}> <div className="flex flex-col md:m-16">
CS2 reeglid <h1 className={`${headingStyle} ml-3 mt-24 md:ml-0 md:mt-16 mb-4 px-4`}>
</h2> REEGLID
</div> </h1>
</Link>
<div className="flex flex-wrap flex-row lg:mt-16 justify-center lg:items-start gap-12 flex-grow mb-8">
<Link href="reeglid/lol"> <Link href="/kodukord">
<div className={`${boxStyle} bg-[#007CAB] py-20`}> <div className={`${boxStyle} bg-[#007CAB] py-20 px-8`}>
<h2 className={`${boxTextStyle}`}> <h2 className={`${boxTextStyle}`}>Kodukord</h2>
LoL reeglid
</h2>
</div>
</Link>
{/* Minitourn. link coming soon*/}
{/*<Link href="">*/}
<div
className={`${boxStyle} bg-[#1F5673] py-16`}>
<h2 className={`${boxTextStyle}`}>
Miniturniiride reeglid
</h2>
</div>
{/*</Link>*/}
</div>
</div> </div>
</Link>
<SectionDivider />
<Link href="/reeglid/cs2">
<div className={`${boxStyle} bg-[#1F5673] py-20 px-8`}>
<h2 className={`${boxTextStyle}`}>CS2 reeglid</h2>
</div>
</Link>
<Link href="reeglid/lol">
<div className={`${boxStyle} bg-[#007CAB] py-20 px-8`}>
<h2 className={`${boxTextStyle}`}>LoL reeglid</h2>
</div>
</Link>
{/* Minitourn. link coming soon*/}
{/*<Link href="">*/}
<div className={`${boxStyle} bg-[#1F5673] py-16 px-8`}>
<h2 className={`${boxTextStyle}`}>Miniturniiride reeglid</h2>
</div>
{/*</Link>*/}
</div> </div>
); </div>
}
<SectionDivider />
</div>
);
}

2
src/app/striim/page.tsx
View File

@@ -50,7 +50,7 @@ export default function Home() {
{/* Stream iframe from Twitch */} {/* Stream iframe from Twitch */}
<div className="border-[#1F5673] -ml-0.75 border-l-0 md:border-l-3 border-b-3 h-full pt-0 md:pt-16"> <div className="border-[#1F5673] -ml-0.75 border-l-0 md:border-l-3 border-b-3 h-full pt-0 md:pt-16">
<iframe <iframe
src="https://player.twitch.tv/?channel=shroud&parent=localhost&parent=tipilan.ee" src="https://player.twitch.tv/?channel=tipilan_ee&parent=localhost&parent=tipilan.ee"
height="100%" height="100%"
width="100%" width="100%"
className="w-full h-full min-h-[400px]" className="w-full h-full min-h-[400px]"

340
src/app/turniirid/page.tsx
View File

@@ -4,182 +4,178 @@ import Image from "next/image";
import SectionDivider from "@/components/SectionDivider"; import SectionDivider from "@/components/SectionDivider";
export default function Tourney() { export default function Tourney() {
const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`; const headingStyle = `text-3xl md:text-5xl lg:text-5xl ${vipnagorgialla.className} font-bold uppercase text-[#2A2C3F] dark:text-[#EEE5E5] -skew-x-2 md:-skew-x-5`;
// const SectionDivider = () => <hr className="border-t-[3px] border-[#1F5673]" />; // const SectionDivider = () => <hr className="border-t-[3px] border-[#1F5673]" />;
return ( return (
<div className="flex flex-col min-h-[90vh] mt-16"> <div className="flex flex-col min-h-[90vh] mt-16">
<h1 <h1
className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 m-6 md:m-16`} className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic uppercase text-[#2A2C3F] dark:text-[#EEE5E5] mt-8 md:mt-16 mb-4 m-6 md:m-16`}
> >
Turniirid Turniirid
</h1> </h1>
{/*<p className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5]">*/} {/*<p className="text-2xl text-[#2A2C3F] dark:text-[#EEE5E5]">*/}
{/* Kui tahate oma oskusi proovile panna, siis vaadake siia tagasi! Rohkem*/} {/* Kui tahate oma oskusi proovile panna, siis vaadake siia tagasi! Rohkem*/}
{/* infot lähiajal.*/} {/* infot lähiajal.*/}
{/*</p>*/} {/*</p>*/}
<div className="flex flex-col gap-8 md:gap-16">
{/* CS2 turniir */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="-skew-x-2 md:-skew-x-5">
<h2 className={`${headingStyle}`}>
CS2 turniir
</h2>
<p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel
</p>
<p className="text-balance">
TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire juba sel sügisel. Haara kaasa
sõbrad ja
saa osa adrenaliinirohkest kogemusest!
</p>
<br />
<p className="text-balance">
Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
vastavalt
saavutatud kohale auhinnaks kas 600€, 300€ või 150€.
</p>
<br />
<div className={"flex flex-row flex-wrap gap-8"}> <div className="flex flex-col gap-8 md:gap-16">
<Link href="/reeglid/cs2" target="_blank"> {/* CS2 turniir */}
<button <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`} <div className="-skew-x-2 md:-skew-x-5">
> <h2 className={`${headingStyle}`}>CS2 turniir</h2>
LOE REEGLEID <p className={"text-2xl mb-4 text-neutral-500"}>
</button> Toimumisaeg veel selgumisel
</Link> </p>
<a href="https://fienta.com/et/tipilan" target="_blank"> <p className="text-balance">
<button TipiLANil toimub Eesti ühe suurima auhinnafondiga CS2 turniire
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`} juba sel sügisel. Haara kaasa sõbrad ja saa osa adrenaliinirohkest
> kogemusest!
OSTA PILET </p>
</button> <br />
</a> <p className="text-balance">
</div> Auhinnafond on suuruses 5250€, mis jaotatakse TOP3 meeskonna vahel
</div> ära. Iga tiimiliige saab vastavalt saavutatud kohale auhinnaks kas
<div className="hidden md:block"> 600€, 300€ või 150€.
<div> </p>
{/* Outside div needs to remain so that overflow won't occur*/} <br />
<Image
src="/images/cs2_tournament_logo.png"
alt="CS2 tournament"
width={600}
height={400}
/>
</div>
</div>
</div>
<SectionDivider /> <div className={"flex flex-row flex-wrap gap-8"}>
<Link href="/reeglid/cs2" target="_blank">
{/* LoL turniir */} <button
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48"> className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
<div className="hidden md:block"> >
<div> LOE REEGLEID
{/* Outside div needs to remain so that overflow won't occur*/} </button>
<Image </Link>
src="/images/lol_tournament_logo.png" <a href="https://fienta.com/et/tipilan" target="_blank">
alt="LoL tournament" <button
width={600} className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
height={400} >
/> OSTA PILET
</div> </button>
</div> </a>
<div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
<h2 className={`${headingStyle}`}>
LoL turniir
</h2>
<p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel
</p>
<p className="text-balance">
TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire juba sel sügisel.
Haara kaasa sõbrad ja saa osa adrenaliinirohkest kogemusest!
</p>
<br />
<p className="text-balance">
Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel ära. Iga tiimiliige saab
vastavalt saavutatud kohale auhinnaks kas 400€, 200€ või 100€.
</p>
<br />
<div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
<Link href="/kodukord" target="_blank">
<button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
>
LOE REEGLEID
</button>
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
>
OSTA PILET
</button>
</a>
</div>
</div>
</div>
<SectionDivider />
{/* Mini-turniirid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="-skew-x-2 md:-skew-x-5">
<h2 className={`${headingStyle}`}>
Mini&shy;turniirid
</h2>
<p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel
</p>
<p className="text-balance">
TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu tekitavaid miniturniire.
Miniturniirid toimuvad järgnevates mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars,
Buckshot Roulette, LostGamer ja palju muud.
</p>
<br />
<p className="text-balance">
Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab rahalise auhinna miniturniiri võitja.
</p>
<br />
<div className="flex flex-row flex-wrap gap-4 md:gap-8">
<Link href="/kodukord" target="_blank">
<button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
>
LOE REEGLEID
</button>
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic`}
>
OSTA PILET
</button>
</a>
</div>
</div>
<div className="hidden md:block">
<div>
{/* Outside div needs to remain so that overflow won't occur*/}
<Image
src="/images/minitournament_logo.png"
alt="mini tournaments"
width={600}
height={400}
/>
</div>
</div>
</div>
<SectionDivider />
</div> </div>
</div>
<div className="hidden md:block">
<div>
{/* Outside div needs to remain so that overflow won't occur*/}
<Image
src="/images/cs2_tournament_logo.png"
alt="CS2 tournament"
width={600}
height={400}
/>
</div>
</div>
</div> </div>
);
} <SectionDivider />
{/* LoL turniir */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="hidden md:block">
<div>
{/* Outside div needs to remain so that overflow won't occur*/}
<Image
src="/images/lol_tournament_logo.png"
alt="LoL tournament"
width={600}
height={400}
/>
</div>
</div>
<div className="flex-auto text-right -skew-x-2 md:-skew-x-5">
<h2 className={`${headingStyle}`}>LoL turniir</h2>
<p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel
</p>
<p className="text-balance">
TipiLANil toimub Eesti ühe suurima auhinnafondiga LoL turniire
juba sel sügisel. Haara kaasa sõbrad ja saa osa adrenaliinirohkest
kogemusest!
</p>
<br />
<p className="text-balance">
Auhinnafond on suuruses 3500€, mis jaotatakse TOP3 meeskonna vahel
ära. Iga tiimiliige saab vastavalt saavutatud kohale auhinnaks kas
400€, 200€ või 100€.
</p>
<br />
<div className="flex flex-row flex-wrap gap-4 md:gap-8 justify-end">
<Link href="/kodukord" target="_blank">
<button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
LOE REEGLEID
</button>
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
OSTA PILET
</button>
</a>
</div>
</div>
</div>
<SectionDivider />
{/* Mini-turniirid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center mx-8 md:mx-16 lg:mx-32 xl:mx-48">
<div className="-skew-x-2 md:-skew-x-5">
<h2 className={`${headingStyle}`}>Mini&shy;turniirid</h2>
<p className={"text-2xl mb-4 text-neutral-500"}>
Toimumisaeg veel selgumisel
</p>
<p className="text-balance">
TipiLANil toimub mitmeid erinevaid lõbusaid ja võistlushimu
tekitavaid miniturniire. Miniturniirid toimuvad järgnevates
mängudes: SimRacing, Tekken, FIFA, Minecraft Bedwars, Buckshot
Roulette, LostGamer ja palju muud.
</p>
<br />
<p className="text-balance">
Auhinnafond on kõigi turniiride peale 1250€ ja reeglina saab
rahalise auhinna miniturniiri võitja.
</p>
<br />
<div className="flex flex-row flex-wrap gap-4 md:gap-8">
<Link href="/kodukord" target="_blank">
<button
className={`px-4 py-2 bg-[#1F5673] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
LOE REEGLEID
</button>
</Link>
<a href="https://fienta.com/et/tipilan" target="_blank">
<button
className={`px-4 py-2 bg-[#007CAB] cursor-pointer ${vipnagorgialla.className} font-bold italic text-[#ECE5E5]`}
>
OSTA PILET
</button>
</a>
</div>
</div>
<div className="hidden md:block">
<div>
{/* Outside div needs to remain so that overflow won't occur*/}
<Image
src="/images/minitournament_logo.png"
alt="mini tournaments"
width={600}
height={400}
/>
</div>
</div>
</div>
<SectionDivider />
</div>
</div>
);
}

30
src/components/ui/button.tsx
View File

@@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { Slot } from "@radix-ui/react-slot" import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -32,8 +32,8 @@ const buttonVariants = cva(
variant: "default", variant: "default",
size: "default", size: "default",
}, },
} },
) );
function Button({ function Button({
className, className,
@@ -43,17 +43,25 @@ function Button({
...props ...props
}: React.ComponentProps<"button"> & }: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
asChild?: boolean asChild?: boolean;
}) { }) {
const Comp = asChild ? Slot : "button" if (asChild) {
return (
<Slot
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...(props as React.ComponentProps<typeof Slot>)}
/>
);
}
return ( return (
<Comp <button
data-slot="button" data-slot="button"
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
{...props} {...props}
/> />
) );
} }
export { Button, buttonVariants } export { Button, buttonVariants };

5
src/data/rules/cs2.md Normal file
View File

@@ -0,0 +1,5 @@
## Tulekul
CS2 turniiri reeglid on hetkel ettevalmistamisel ja avaldatakse peagi.
Jälgige meie discordi!