feat: add Header, Footer, and GameBoard components for enhanced layout
This commit is contained in:
pd0a6847
parent
2f9035b345
commit
9514f01dba
66
src/lib/components/custom/Footer.svelte
Normal file
66
src/lib/components/custom/Footer.svelte
Normal file
@ -0,0 +1,66 @@
|
||||
<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground " role="contentinfo" aria-label="Site footer">
|
||||
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
|
||||
<div class="relative flex flex-col justify-between border-x border-t border-border ">
|
||||
<div class="flex w-full items-stretch">
|
||||
<div class=" items-center pl-5">
|
||||
<div class="flex flex-col h-full justify-center">
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="w-9 h-9 border border-gray-400 rounded flex items-center justify-center mr-0.5 text-xs">2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[90px] items-center pl-1 pr-5 py-4 border-r">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>UserNickname</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px]">
|
||||
<span>Level: 21</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[250px] flex items-center justify-center px-5 py-4 border-r">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex justify-between text-lg">
|
||||
<span>Account:</span><span>₩ 1,493,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[180px] flex items-center justify-center px-5 py-4 border-r">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex justify-between text-lg">
|
||||
<span>Bets:</span><span>₩ 43,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center px-5 py-4 text-center text-lg">
|
||||
PLACE YOUR BETS
|
||||
</div>
|
||||
<div class="ml-auto flex flex-row gap-1">
|
||||
<div class="flex min-w-[80px] items-center justify-center border-l text-sm">
|
||||
<div class="flex flex-col">
|
||||
<div class="items-center justify-center text-sm text-center">
|
||||
<span>GAME</span>
|
||||
</div>
|
||||
<div class="items-center justify-center text-sm text-center">
|
||||
<span>BOARD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-auto flex flex-row gap-1 bg-red-100">
|
||||
<div class="flex min-w-[80px] items-center justify-center border-l text-sm">
|
||||
<div class="flex flex-col">
|
||||
<div class="items-center justify-center text-sm text-center">
|
||||
<span>CLEAR</span>
|
||||
</div>
|
||||
<div class="items-center justify-center text-sm text-center">
|
||||
<span>BETS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
452
src/lib/components/custom/GameBoard.svelte
Normal file
452
src/lib/components/custom/GameBoard.svelte
Normal file
@ -0,0 +1,452 @@
|
||||
<footer class="bg-background text-foreground" role="contentinfo" aria-label="Site footer">
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-8 px-5 md:gap-12 lg:max-w-6xl lg:gap-16 lg:px-6">
|
||||
<div class="flex flex-col border-x">
|
||||
<div
|
||||
class="grid grid-cols-1 items-start gap-12 px-5 py-16 text-center md:grid-cols-2 md:px-12 md:text-left lg:grid-cols-4 lg:gap-x-6 lg:gap-y-16"
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Menu</h2>
|
||||
<nav class="flex flex-col gap-3" aria-label="Menu links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/">Home</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/preview">Preview</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pricing">Pricing</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Products</h2>
|
||||
<nav class="flex flex-col gap-3" aria-label="Products links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components">Figma Kit</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks">Pro Blocks</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/plugin">Figma Plugin</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/templates">Templates</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/themes">Themes</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Resources</h2>
|
||||
<nav class="flex flex-col gap-3" aria-label="Resources links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/docs/getting-started">Docs</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/academy">Academy</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/blog">Blog</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/roadmap">Roadmap</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/help">Help & Contact</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Legal</h2>
|
||||
<nav class="flex flex-col gap-3" aria-label="Legal links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/licensing">Licensing Agreement</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/terms">Terms & Conditions</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/privacy-policy">Privacy Policy</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/cookies">Cookies</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex hidden flex-col gap-4 lg:col-span-2 lg:flex">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Components</h2>
|
||||
<nav class="grid grid-cols-2 gap-3" aria-label="Components links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/accordion">Accordion</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/alert">Alert</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/alert-dialog">Alert Dialog</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/aspect-ratio">Aspect Ratio</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/avatar">Avatar</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/badge">Badge</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/breadcrumb">Breadcrumb</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/button">Button</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/button-group">Button Group</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/calendar">Calendar</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/card">Card</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/carousel">Carousel</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/chart">Chart</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/checkbox">Checkbox</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/collapsible">Collapsible</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/combobox">Combobox</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/command">Command</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/context-menu">Context Menu</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/data-table">Data Table</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/date-picker">Date Picker</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/dialog">Dialog</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/drawer">Drawer</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/dropdown-menu">Dropdown Menu</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/empty">Empty</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/field">Field</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/form">Form</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/hover-card">Hover Card</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/input">Input</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/input-group">Input Group</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/input-otp">Input OTP</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/item">Item</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/kbd">Kbd</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/label">Label</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/menubar">Menubar</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/navigation-menu">Navigation Menu</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/pagination">Pagination</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/popover">Popover</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/progress">Progress</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/radio-group">Radio Group</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/resizable">Resizable</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/scroll-area">Scroll-area</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/select">Select</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/separator">Separator</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/sheet">Sheet</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/sidebar">Sidebar</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/skeleton">Skeleton</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/slider">Slider</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/sonner">Sonner</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/spinner">Spinner</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/switch">Switch</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/table">Table</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/tabs">Tabs</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/textarea">Textarea</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/toggle">Toggle</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/toggle-group">Toggle Group</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/tooltip">Tooltip</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/components/typography">Typography</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex hidden flex-col gap-4 lg:flex">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Landing Page Blocks</h2>
|
||||
<nav class="flex flex-col gap-3" aria-label="Landing Page Blocks links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/404-sections">404 Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/banners">Banners</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/bento-grids">Bento Grids</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/blog-sections">Blog Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/cta-sections">CTA Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/comparison-sections">Comparison Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/contact-sections">Contact Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/empty-lp-sections">Empty LP Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/faq-sections">FAQ Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/feature-sections">Feature Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/footers">Footers</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/gallery-sections">Gallery Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/header-sections">Header Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/hero-sections">Hero Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/lp-navbars">LP Navbars</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/landing-page-examples">Landing Page Examples</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/logo-sections">Logo Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/patterns">Patterns</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/pricing-sections">Pricing Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/rich-text-sections">Rich Text Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/stats-sections">Stats Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/team-sections">Team Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/testimonials-sections">Testimonials Sections</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex hidden flex-col gap-4 lg:flex">
|
||||
<h2 class="text-sm font-semibold tracking-tighter">Application Blocks</h2>
|
||||
<nav class="flex flex-col gap-3" aria-label="Application Blocks links">
|
||||
<a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/app-shells">App Shells</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/application-examples">Application Examples</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/buttons">Buttons</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/cards">Cards</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/description-lists">Description Lists</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/empty-sections">Empty Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/navbars">Navbars</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/page-headers">Page Headers</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/section-footers">Section Footers</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/section-headers">Section Headers</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/sections">Sections</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/settings">Settings</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/sign-in">Sign in</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/sign-up">Sign up</a
|
||||
><a
|
||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
href="/pro-blocks/table-headers">Table Headers</a
|
||||
>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-orientation="horizontal"
|
||||
role="presentation"
|
||||
data-slot="separator"
|
||||
class="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
|
||||
></div>
|
||||
<div
|
||||
class="flex flex-col gap-8 px-5 py-12 text-center text-sm md:items-center md:gap-12 md:p-12 lg:flex-row lg:justify-between lg:text-left"
|
||||
>
|
||||
<p class="order-2 text-center text-muted-foreground lg:order-1 lg:text-left">
|
||||
This project is independent and not affiliated with Figma or shadcn/ui.<br />Copyright © <!-- -->2025<!-- -->
|
||||
<a
|
||||
class="text-center text-muted-foreground underline hover:text-foreground"
|
||||
target="_blank"
|
||||
href="https://twitter.com/matsugfx">Matt Wierzbicki</a
|
||||
>
|
||||
</p>
|
||||
<div
|
||||
class="order-1 flex flex-col items-center gap-4 text-center md:flex-row lg:order-2 lg:flex-row lg:items-center lg:text-left"
|
||||
>
|
||||
<button
|
||||
data-slot="dropdown-menu-trigger"
|
||||
class="[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full border border-border bg-background text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:border-input dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40"
|
||||
type="button"
|
||||
id="radix-_R_1e5flb_"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded="false"
|
||||
data-state="closed"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-sun h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
|
||||
aria-hidden="true"
|
||||
><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"
|
||||
></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
|
||||
></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
|
||||
d="m6.34 17.66-1.41 1.41"
|
||||
></path><path d="m19.07 4.93-1.41 1.41"></path></svg
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-moon absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
|
||||
aria-hidden="true"
|
||||
><path
|
||||
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
|
||||
></path></svg
|
||||
><span class="sr-only">Toggle theme</span></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
43
src/lib/components/custom/Header.svelte
Normal file
43
src/lib/components/custom/Header.svelte
Normal file
@ -0,0 +1,43 @@
|
||||
<nav class="sticky top-0 isolate z-50 border-b border-border bg-background">
|
||||
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
|
||||
<div class="relative flex flex-col justify-between border-x border-border">
|
||||
<div class="flex w-full items-stretch">
|
||||
<div class="min-w-[180px] items-center border-r px-5 py-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex justify-between text-[10px]">
|
||||
<span>GameID:</span><span>EPX93A</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm ">
|
||||
<span>Online Users:</span><span>723</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[270px] items-center px-5 py-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex justify-between text-[10px]">
|
||||
<span>Accumulated:</span><span>10 Games</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm ">
|
||||
<span>Jackpot Prize:</span><span>₩ 12,413,493,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" items-center border-r pr-5">
|
||||
<div class="flex flex-col h-full justify-center">
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="w-8 h-8 border border-gray-400 rounded flex items-center justify-center mr-0.5 text-xs">2</div>
|
||||
<div class="w-8 h-8 border border-gray-400 rounded flex items-center justify-center mr-0.5 text-xs">4</div>
|
||||
<div class="w-8 h-8 border border-gray-400 rounded flex items-center justify-center text-xs">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center px-5 py-4 text-center text-lg">
|
||||
PLACE YOUR BETS
|
||||
</div>
|
||||
<div class="ml-auto flex flex-row gap-1">
|
||||
<div class="flex min-w-[80px] items-center justify-center border-l text-lg">45</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,6 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import Header from '@/components/custom/Header.svelte';
|
||||
import Footer from '@/components/custom/Footer.svelte';
|
||||
import GameBoard from '@/components/custom/GameBoard.svelte';
|
||||
import { Button } from '@/components/ui/button/index.js';
|
||||
</script>
|
||||
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button>Button</Button>
|
||||
|
||||
<Header />
|
||||
<GameBoard />
|
||||
<Footer />
|
||||
|
||||
@ -9,11 +9,11 @@ const config = {
|
||||
routes: {
|
||||
include: ['/*'],
|
||||
exclude: ['<all>']
|
||||
},
|
||||
alias: {
|
||||
"@/*": "./src/lib/*",
|
||||
},
|
||||
})
|
||||
}
|
||||
}),
|
||||
alias: {
|
||||
'@': './src/lib'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user