Web3N3/auction
16
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: extract svgs to components

Browse source
This commit is contained in:
Mikhail Saveliev 2023-12-20 04:20:47 +03:00
parent f85820da9b
commit faa7d3c8d0
9 changed files with 127 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/casino/src/app/components/App/AppNav/AppNav.tsx
View file

@ -1,3 +1,10 @@
import CoinIcon from "../../../utils/CoinIcon";
import GameIcon from "../../../utils/GameIcon";
import ProfileIcon from "../../../utils/ProfileIcon";
import SearchIcon from "../../../utils/SearchIcon";
import SportIcon from "../../../utils/SportIcon";
import WalletIcon from "../../../utils/WalletIcon";
export const AppNav = () => {
return (
<div style={{ height: 'max-content' }} className="bg-[#30333C] h-max-content text-white">
@ -12,61 +19,29 @@ export const AppNav = () => {
</div>
<div className="flex flex-row items-center rounded-[100px] bg-[#2D313D]">
<div className="flex flex-row items-center rounded-[100px] border-[2px] border-[#4F5563] bg-[#3B414F] px-[14px] py-[11px] gap-[3px] cursor-pointer">
{/* todo: load from .svg file in assets */}
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<g clip-path="url(#clip0_37_606)">
<path d="M7.5 5.625L9 7.125L10.5 5.625V1.5H7.5V5.625ZM7.5 12.375L9 10.875L10.5 12.375V16.5H7.5V12.375ZM12.375 10.5L10.875 9L12.375 7.5H16.5V10.5H12.375ZM5.625 7.5L7.125 9L5.625 10.5H1.5V7.5H5.625Z" stroke="#226DBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_37_606">
<rect width="18" height="18" fill="white" />
</clipPath>
</defs>
</svg>
<GameIcon />
<span>
Gaming
</span>
</div>
<div className="flex flex-row items-center px-[14px] py-[11px] gap-[3px] cursor-not-allowed">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
<path d="M10.5 2.13281C8.84513 2.13281 7.22742 2.62354 5.85144 3.54294C4.47547 4.46234 3.40302 5.76911 2.76973 7.29802C2.13644 8.82692 1.97074 10.5093 2.29359 12.1324C2.61644 13.7554 3.41334 15.2463 4.58351 16.4165C5.75368 17.5867 7.24457 18.3836 8.86765 18.7064C10.4907 19.0293 12.1731 18.8636 13.702 18.2303C15.2309 17.597 16.5377 16.5245 17.4571 15.1486C18.3765 13.7726 18.8672 12.1549 18.8672 10.5C18.8646 8.28168 17.9822 6.15497 16.4136 4.58638C14.845 3.01779 12.7183 2.13542 10.5 2.13281ZM16.8714 14.2259H13.9363L13.0766 13.043L14.1668 9.86672L15.5613 9.41473L17.8533 11.1727C17.7553 12.2504 17.42 13.2931 16.8714 14.2259ZM7.06371 14.2259H4.12864C3.5806 13.2929 3.24583 12.2503 3.14836 11.1727L5.44032 9.41473L6.83485 9.86672L7.9234 13.043L7.06371 14.2259ZM4.1836 6.67898L4.7775 8.68137L3.13688 9.93973C3.22377 8.78548 3.58244 7.66815 4.1836 6.67898ZM8.82328 12.6328L7.80528 9.6682L10.5 7.81594L13.1947 9.6682L12.1767 12.6328H8.82328ZM16.2217 8.68137L16.8164 6.67898C17.4173 7.66822 17.7757 8.78555 17.8623 9.93973L16.2217 8.68137ZM16.0855 5.67738L15.2578 8.47793L13.8633 8.93156L10.9922 6.96281V5.50922L13.527 3.76687C14.5086 4.21013 15.3817 4.86211 16.0855 5.67738ZM12.3802 3.36328L10.5 4.65281L8.61985 3.36328C9.85238 3.03954 11.1476 3.03954 12.3802 3.36328ZM7.47387 3.76605L10.0078 5.50922V6.95953L7.13672 8.92828L5.74219 8.47465L4.9145 5.67738C5.61864 4.86191 6.49203 4.20967 7.47387 3.76605ZM4.81934 15.2102H6.96692L7.72079 17.343C6.59304 16.8814 5.59649 16.1488 4.81934 15.2102ZM8.89465 17.7064L7.86516 14.7976L8.72321 13.6172H12.2768L13.1348 14.7976L12.1054 17.7064C11.048 17.9416 9.95197 17.9416 8.89465 17.7064ZM13.2792 17.3389L14.0331 15.2061H16.1807C15.4035 16.1447 14.407 16.8773 13.2792 17.3389Z" fill="#959CAF" />
</svg>
<SportIcon />
<span>Sport</span>
</div>
</div>
<div className="flex flex-row items-center rounded-[100px] bg-[#2D313D] px-[15px] py-[11px] justify-between w-[300px] cursor-not-allowed">
<span className="text-[#959CAF] select-none">Search for games</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M14.1667 14.1667L17.5 17.5M2.5 9.16667C2.5 10.9348 3.20238 12.6305 4.45262 13.8807C5.70286 15.131 7.39856 15.8333 9.16667 15.8333C10.9348 15.8333 12.6305 15.131 13.8807 13.8807C15.131 12.6305 15.8333 10.9348 15.8333 9.16667C15.8333 7.39856 15.131 5.70286 13.8807 4.45262C12.6305 3.20238 10.9348 2.5 9.16667 2.5C7.39856 2.5 5.70286 3.20238 4.45262 4.45262C3.20238 5.70286 2.5 7.39856 2.5 9.16667Z" stroke="#959CAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<SearchIcon />
</div>
<div className="rounded-[100px] bg-[#2D313D] flex flex-row items-center justify-between shadow-inset">
<div className="flex flex-row gap-[3px] items-center px-[15px] py-[11px]">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 5.79994H9.3999H10.1999C11.0835 5.79994 11.7999 6.5163 11.7999 7.39994C11.7999 8.28358 11.0835 8.99994 10.1999 8.99994H7.3999V5.79994Z" fill="#E5A425" />
<path d="M7.3998 5.80006V9.00006H10.1998C11.0834 9.00006 11.7998 8.2837 11.7998 7.40006C11.7998 6.51642 11.0834 5.80006 10.1998 5.80006H9.3998M7.3998 5.80006H5.7998H7.3998ZM7.3998 5.80006V4.20006V5.80006ZM7.3998 5.80006H9.3998H7.3998ZM9.3998 5.80006V4.20006V5.80006Z" fill="#E5A425" />
<path d="M7.3998 5.80006V9.00006H10.1998C11.0834 9.00006 11.7998 8.2837 11.7998 7.40006C11.7998 6.51642 11.0834 5.80006 10.1998 5.80006H9.3998M7.3998 5.80006H5.7998M7.3998 5.80006V4.20006M7.3998 5.80006H9.3998M9.3998 5.80006V4.20006" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 9H10.9999C11.8835 9 12.5999 9.71636 12.5999 10.6C12.5999 11.4836 11.8835 12.2 10.9999 12.2H9.3999H7.3999V9Z" fill="#E5A425" />
<path d="M7.3998 12.2V9H10.9998C11.8834 9 12.5998 9.71636 12.5998 10.6C12.5998 11.4836 11.8834 12.2 10.9998 12.2H9.3998M7.3998 12.2V13.8V12.2ZM7.3998 12.2H5.7998H9.3998M7.3998 12.2H9.3998H7.3998ZM9.3998 12.2V13.8V12.2Z" fill="#E5A425" />
<path d="M7.3998 12.2V9H10.9998C11.8834 9 12.5998 9.71636 12.5998 10.6C12.5998 11.4836 11.8834 12.2 10.9998 12.2H9.3998M7.3998 12.2V13.8M7.3998 12.2H5.7998H9.3998M7.3998 12.2H9.3998M9.3998 12.2V13.8" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
{/* placeholder for balance */}
<span>0.000000</span>
</div>
<div className="flex flex-row items-center rounded-[100px] border-[2px] border-[#4F5563] bg-[#3B414F] px-[14px] py-[11px] gap-[3px] cursor-pointer">
{/* todo: load from .svg file in assets */}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_37_601)">
<path d="M15.7308 8.95333H7.70811C7.27822 8.92021 6.85258 9.0577 6.52331 9.33606C6.19404 9.61443 5.98764 10.0113 5.94878 10.4407L5.94811 10.4467C5.98753 10.8817 6.19808 11.2833 6.53348 11.5632C6.86888 11.8431 7.30168 11.9784 7.73678 11.9393L7.73078 11.94H15.7308C15.7811 11.9447 15.8319 11.9392 15.8801 11.924C15.9284 11.9088 15.9731 11.8841 16.0116 11.8513C16.0502 11.8186 16.0818 11.7785 16.1047 11.7334C16.1275 11.6883 16.1412 11.6391 16.1448 11.5887V9.306C16.1317 9.20844 16.0837 9.11893 16.0096 9.05408C15.9356 8.98923 15.8405 8.95343 15.7421 8.95333H15.7301H15.7308ZM7.70811 11.3787C7.51956 11.3787 7.33524 11.3228 7.17847 11.218C7.02169 11.1132 6.8995 10.9644 6.82735 10.7902C6.75519 10.616 6.73631 10.4243 6.7731 10.2393C6.80988 10.0544 6.90068 9.88455 7.034 9.75123C7.16733 9.6179 7.3372 9.5271 7.52212 9.49032C7.70705 9.45353 7.89874 9.47241 8.07294 9.54457C8.24713 9.61672 8.39602 9.73892 8.50078 9.89569C8.60553 10.0525 8.66144 10.2368 8.66144 10.4253V10.428C8.66144 10.9533 8.23544 11.3787 7.71078 11.3787H7.70811ZM2.19678 0V4.26933H3.10878V2.44533C3.20078 2.468 3.30744 2.48267 3.41678 2.48667H3.41944C3.74899 2.48579 4.06479 2.35453 4.29788 2.12157C4.53096 1.88861 4.66239 1.57288 4.66344 1.24333C4.66124 1.1351 4.64647 1.02749 4.61944 0.922667L4.62144 0.932667H9.61611C9.59204 1.03369 9.5782 1.13687 9.57478 1.24067V1.24333C9.57566 1.57288 9.70691 1.88868 9.93987 2.12177C10.1728 2.35485 10.4886 2.48628 10.8181 2.48733C10.9301 2.48333 11.0374 2.46867 11.1401 2.44333L11.1294 2.44533V4.26933H12.0634V0H2.19678ZM12.4561 3.75067H13.6168C13.5298 3.49809 13.3775 3.27307 13.1752 3.09858C12.9729 2.92408 12.728 2.80633 12.4654 2.75733L12.4561 2.756V3.75067Z" fill="#959CAF" />
<path d="M7.64733 8.456H15.606V6.03133C15.5719 5.67166 15.3979 5.33976 15.1214 5.10719C14.845 4.87462 14.4882 4.75998 14.128 4.788H14.1327H1.49267C1.4819 4.77625 1.46719 4.76889 1.45133 4.76733C1.3637 4.72615 1.28867 4.66228 1.23405 4.58233C1.17942 4.50238 1.14718 4.40927 1.14067 4.31266V4.31133C1.15128 4.19142 1.19828 4.07761 1.27537 3.98516C1.35245 3.8927 1.45595 3.826 1.572 3.794L1.576 3.79333V2.73666C0.704667 2.778 0 4.02133 0 5.576V14.7573C0.0343941 15.1166 0.208341 15.448 0.48446 15.6803C0.760579 15.9127 1.11683 16.0275 1.47667 16H1.472H14.112C14.4703 16.0264 14.8247 15.9118 15.0996 15.6804C15.3745 15.4491 15.5481 15.1195 15.5833 14.762L15.584 14.7567V12.332H7.66933C6.38467 12.332 5.348 11.4613 5.348 10.4047C5.348 9.32733 6.384 8.45666 7.648 8.45666L7.64733 8.456Z" fill="#959CAF" />
</g>
<defs>
<clipPath id="clip0_37_601">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
<WalletIcon />
<button>
Wallet
</button>
@ -74,29 +49,7 @@ export const AppNav = () => {
</div>
<div className="flex flex-row items-center">
<span>Robin F.</span>
<svg xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 58 58" fill="none">
<g filter="url(#filter0_d_37_572)">
<rect x="4" y="4" width="42" height="42" rx="10" fill="#4F5563" />
<path d="M39.745 31C39.4345 30.1224 38.8595 29.3626 38.0993 28.8254C37.339 28.2881 36.4309 27.9997 35.5 28H14.5C13.3065 28 12.1619 28.4741 11.318 29.318C10.4741 30.1619 10 31.3065 10 32.5V33.5725C10 39.1495 16.315 43 25 43C29.593 43 33.523 41.8645 36.2065 40H25V38.5H37.951C38.5915 37.8085 39.0955 37.054 39.4435 36.25H25V34.75H39.895C39.9647 34.3614 39.9998 33.9673 40 33.5725V32.5H25V31H39.745ZM34 16C33.9998 15.6239 33.9768 15.2483 33.931 14.875H25V13.375H33.61C33.368 12.5802 33.0166 11.823 32.566 11.125H25V9.625H31.3525C30.0926 8.36945 28.4889 7.51539 26.7439 7.17065C24.9989 6.82591 23.1909 7.00597 21.5482 7.68807C19.9055 8.37018 18.5018 9.52375 17.5142 11.0031C16.5266 12.4825 15.9996 14.2213 15.9996 16C15.9996 17.7787 16.5266 19.5175 17.5142 20.9969C18.5018 22.4762 19.9055 23.6298 21.5482 24.3119C23.1909 24.994 24.9989 25.1741 26.7439 24.8293C28.4889 24.4846 30.0926 23.6305 31.3525 22.375H25V20.875H32.566C33.013 20.185 33.367 19.429 33.6115 18.625H25V17.125H33.931C33.9768 16.7517 33.9998 16.376 34 16Z" fill="url(#paint0_linear_37_572)" />
</g>
<defs>
<filter id="filter0_d_37_572" x="0" y="0" width="58" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dx="4" dy="4" />
<feGaussianBlur stdDeviation="4" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_37_572" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_37_572" result="shape" />
</filter>
<linearGradient id="paint0_linear_37_572" x1="10" y1="25" x2="40" y2="25" gradientUnits="userSpaceOnUse">
<stop stop-color="#171A21" />
<stop offset="0.536458" stop-color="#171A21" />
<stop offset="1" stop-color="#171A21" stop-opacity="0.05" />
</linearGradient>
</defs>
</svg>
<ProfileIcon />
</div>
</div>
</div>

67
frontend/casino/src/app/pages/MainPage/MainPage.tsx
View file

@ -1,3 +1,6 @@
import CoinIcon from "../../utils/CoinIcon";
import GamepadIcon from "../../utils/GamepadIcon";
export const MainPage = () => {
return (
<div className="flex bg-[#171A21]">
@ -22,9 +25,7 @@ export const MainPage = () => {
<div className="w-full h-max-content bg-gray-800 rounded-[25px] p-[30px] text-white flex flex-col gap-[30px] relative z-10">
<div className="flex flex-row justify-between">
<div className="flex flex-row items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="25,5" viewBox="0 0 40 34" fill="none">
<path d="M38.4359 16.2014L38.4359 16.2014C37.5563 11.6279 36.4615 8.16056 35.1174 5.68242C33.7762 3.20968 32.2088 1.7602 30.3929 1.14333C29.6152 0.880986 28.8098 0.750311 28.0014 0.75462L27.9987 0.754634C26.9464 0.754627 26.0237 1.0477 24.9621 1.38994C24.9621 1.38996 24.962 1.38997 24.962 1.38998L24.9554 1.3921C23.6803 1.80357 22.1782 2.28829 19.9983 2.28829C17.8176 2.28829 16.3144 1.80418 15.0364 1.39259L15.0314 1.39099L15.031 1.39085C13.9685 1.04763 13.0467 0.754627 11.9978 0.754627H11.9958C11.1567 0.751276 10.3206 0.881868 9.51092 1.14331C7.70708 1.75766 6.14607 3.20455 4.80497 5.67592C3.4604 8.15369 2.35955 11.6217 1.46711 16.1969C0.50784 21.1185 0.27397 25.0896 0.713068 27.9881C1.15408 30.8993 2.24818 32.5999 3.82309 33.2268L3.82604 33.2279C4.26678 33.4066 4.7285 33.4981 5.19244 33.5C6.27338 33.4997 7.28481 32.9819 8.2197 32.1809C9.15372 31.3806 9.9666 30.3356 10.6427 29.3679L38.4359 16.2014ZM38.4359 16.2014C39.3268 20.8311 39.6475 24.366 39.4385 27.0303C39.1628 30.5147 37.9743 32.5007 36.0874 33.2412L36.0863 33.2416M38.4359 16.2014L36.0863 33.2416M36.0863 33.2416C34.8995 33.7106 33.6643 33.5474 32.3679 32.6805C31.3811 32.0201 30.362 30.9496 29.258 29.3678L29.2579 29.3678M36.0863 33.2416L29.2579 29.3678M29.2579 29.3678C28.3199 28.024 27.2812 27.1152 25.8034 26.5579C24.3511 26.0103 22.5105 25.8163 19.9983 25.8163C17.1781 25.8163 15.25 26.0978 13.8154 26.693M29.2579 29.3678L13.8154 26.693M13.8154 26.693C12.3574 27.2978 11.4509 28.2091 10.6429 29.3676L13.8154 26.693ZM25.1094 8.15637L25.4868 8.48443L25.1094 8.15637C24.8126 8.49772 24.6168 8.9248 24.5379 9.3808C24.459 9.83683 24.4991 10.3101 24.655 10.7431C24.811 11.1761 25.0789 11.557 25.4346 11.8304C25.7916 12.1047 26.2199 12.2571 26.6653 12.2571C27.2644 12.2571 27.822 11.9828 28.2212 11.5236C28.6185 11.0667 28.8321 10.4602 28.8321 9.84001C28.8321 9.3763 28.7128 8.91844 28.4835 8.52378C28.2541 8.12879 27.9211 7.80943 27.5182 7.61747C27.1139 7.42483 26.6638 7.37281 26.2287 7.47236C25.7946 7.57168 25.4068 7.81436 25.1094 8.15637ZM32.1504 12.7413L31.7181 12.9925L32.1504 12.7413C31.9209 12.3464 31.588 12.027 31.1851 11.835C30.7807 11.6424 30.3307 11.5904 29.8955 11.6899C29.4614 11.7892 29.0737 12.0319 28.7763 12.3739C28.4795 12.7153 28.2837 13.1424 28.2048 13.5984C28.1259 14.0544 28.166 14.5277 28.3219 14.9606C28.4778 15.3937 28.7457 15.7746 29.1015 16.048C29.4584 16.3223 29.8867 16.4747 30.3322 16.4747C30.9312 16.4747 31.4889 16.2004 31.8881 15.7412C32.2854 15.2843 32.499 14.6778 32.499 14.0576C32.499 13.5939 32.3797 13.136 32.1504 12.7413ZM10.1644 16.0912V18.6586C10.1644 19.1771 10.3429 19.6861 10.6776 20.0711C11.0143 20.4583 11.4872 20.6922 11.9978 20.6922C12.5084 20.6922 12.9813 20.4583 13.318 20.0711C13.6528 19.6861 13.8312 19.1771 13.8312 18.6586V16.0912H15.9981C16.5087 16.0912 16.9816 15.8573 17.3182 15.4701C17.653 15.0851 17.8315 14.5761 17.8315 14.0576C17.8315 13.5391 17.653 13.0301 17.3182 12.6451C16.9816 12.2578 16.5087 12.0239 15.9981 12.0239H13.8312V9.4566C13.8312 8.93807 13.6528 8.4291 13.318 8.04407C12.9813 7.65683 12.5084 7.42293 11.9978 7.42293C11.4872 7.42293 11.0143 7.65683 10.6776 8.04407C10.3429 8.4291 10.1644 8.93807 10.1644 9.4566V12.0239H7.99759C7.48697 12.0239 7.01408 12.2578 6.6774 12.6451C6.34265 13.0301 6.16418 13.5391 6.16418 14.0576C6.16418 14.5761 6.34265 15.0851 6.6774 15.4701C7.01408 15.8573 7.48697 16.0912 7.99759 16.0912H10.1644ZM21.7678 16.048C22.1247 16.3223 22.553 16.4747 22.9985 16.4747C23.5975 16.4747 24.1552 16.2004 24.5544 15.7412C24.9516 15.2843 25.1652 14.6778 25.1652 14.0576C25.1652 13.5939 25.0459 13.136 24.8167 12.7413C24.5872 12.3464 24.2543 12.027 23.8514 11.835C23.447 11.6424 22.9969 11.5904 22.5618 11.6899C22.1277 11.7892 21.7399 12.0319 21.4425 12.3739C21.1458 12.7153 20.9499 13.1424 20.871 13.5984C20.7922 14.0544 20.8322 14.5277 20.9881 14.9606C21.1441 15.3937 21.412 15.7746 21.7678 16.048ZM25.4341 20.2651C25.7911 20.5397 26.2196 20.6922 26.6653 20.6922C27.2634 20.6922 27.8203 20.4188 28.2194 19.9609C28.6165 19.5053 28.8307 18.9002 28.8321 18.281C28.8331 17.8171 28.7147 17.3587 28.4861 16.9633C28.2573 16.5676 27.9248 16.2473 27.5221 16.0544C27.1179 15.8608 26.6676 15.8079 26.2321 15.9067C25.7976 16.0053 25.4092 16.2475 25.1113 16.5893C24.814 16.9305 24.6176 17.3576 24.5383 17.8138C24.459 18.27 24.4988 18.7435 24.6545 19.1768C24.8103 19.6102 25.0782 19.9914 25.4341 20.2651Z" fill="black" stroke="#959CAF" />
</svg>
<GamepadIcon />
<span className="font-bold">
In-House games
</span>
@ -66,15 +67,7 @@ export const MainPage = () => {
</span>
<div className="flex flex-row gap-2">
<span className="font-medium">217.32</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
</div>
</div>
<div className="w-[2px] bg-slate-400"></div>
@ -84,15 +77,7 @@ export const MainPage = () => {
</span>
<div className="flex flex-row gap-2">
<span className="font-medium">217.32</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
</div>
</div>
</div>
@ -122,15 +107,7 @@ export const MainPage = () => {
</span>
<div className="flex flex-row gap-2">
<span className="font-medium">367.27</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
</div>
</div>
<div className="w-[2px] bg-slate-400"></div>
@ -140,15 +117,7 @@ export const MainPage = () => {
</span>
<div className="flex flex-row gap-2">
<span className="font-medium">1,984.18</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
</div>
</div>
</div>
@ -177,15 +146,7 @@ export const MainPage = () => {
</span>
<div className="flex flex-row gap-2">
<span className="font-medium">198.47</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
</div>
</div>
<div className="w-[2px] bg-slate-400"></div>
@ -195,15 +156,7 @@ export const MainPage = () => {
</span>
<div className="flex flex-row gap-2">
<span className="font-medium">1,487.28</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<CoinIcon />
</div>
</div>
</div>

15
frontend/casino/src/app/utils/CoinIcon.tsx Normal file
View file

@ -0,0 +1,15 @@
import { FC } from 'react';
const CoinIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="18" height="21" viewBox="0 0 18 21" fill="none">
<path d="M9 19.8182C13.4183 19.8182 17 15.6504 17 10.5091C17 5.36783 13.4183 1.20001 9 1.20001C4.58172 1.20001 1 5.36783 1 10.5091C1 15.6504 4.58172 19.8182 9 19.8182Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 6.7854H9.3999H10.1999C11.0835 6.7854 11.7999 7.61898 11.7999 8.64722C11.7999 9.67545 11.0835 10.509 10.1999 10.509H7.3999V6.7854Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005H7.40005ZM7.40005 6.78552V4.92371V6.78552ZM7.40005 6.78552H9.40005H7.40005ZM9.40005 6.78552V4.92371V6.78552Z" fill="#E5A425" />
<path d="M7.40005 6.78552V10.5092H10.2C11.0837 10.5092 11.8 9.67558 11.8 8.64734C11.8 7.61911 11.0837 6.78552 10.2 6.78552H9.40005M7.40005 6.78552H5.80005M7.40005 6.78552V4.92371M7.40005 6.78552H9.40005M9.40005 6.78552V4.92371" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.3999 10.509H10.9999C11.8835 10.509 12.5999 11.3426 12.5999 12.3709C12.5999 13.3991 11.8835 14.2327 10.9999 14.2327H9.3999H7.3999V10.509Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945V14.2327ZM7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005H7.40005ZM9.40005 14.2327V16.0945V14.2327Z" fill="#E5A425" />
<path d="M7.40005 14.2327V10.509H11C11.8837 10.509 12.6 11.3426 12.6 12.3709C12.6 13.3991 11.8837 14.2327 11 14.2327H9.40005M7.40005 14.2327V16.0945M7.40005 14.2327H5.80005H9.40005M7.40005 14.2327H9.40005M9.40005 14.2327V16.0945" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>;
}
export default CoinIcon;

16
frontend/casino/src/app/utils/GameIcon.tsx Normal file
View file

@ -0,0 +1,16 @@
import { FC } from 'react';
const GameIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<g clip-path="url(#clip0_37_606)">
<path d="M7.5 5.625L9 7.125L10.5 5.625V1.5H7.5V5.625ZM7.5 12.375L9 10.875L10.5 12.375V16.5H7.5V12.375ZM12.375 10.5L10.875 9L12.375 7.5H16.5V10.5H12.375ZM5.625 7.5L7.125 9L5.625 10.5H1.5V7.5H5.625Z" stroke="#226DBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_37_606">
<rect width="18" height="18" fill="white" />
</clipPath>
</defs>
</svg>;
}
export default GameIcon;

9
frontend/casino/src/app/utils/GamepadIcon.tsx Normal file
View file

@ -0,0 +1,9 @@
import { FC } from 'react';
const GamepadIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="30" height="25,5" viewBox="0 0 40 34" fill="none">
<path d="M38.4359 16.2014L38.4359 16.2014C37.5563 11.6279 36.4615 8.16056 35.1174 5.68242C33.7762 3.20968 32.2088 1.7602 30.3929 1.14333C29.6152 0.880986 28.8098 0.750311 28.0014 0.75462L27.9987 0.754634C26.9464 0.754627 26.0237 1.0477 24.9621 1.38994C24.9621 1.38996 24.962 1.38997 24.962 1.38998L24.9554 1.3921C23.6803 1.80357 22.1782 2.28829 19.9983 2.28829C17.8176 2.28829 16.3144 1.80418 15.0364 1.39259L15.0314 1.39099L15.031 1.39085C13.9685 1.04763 13.0467 0.754627 11.9978 0.754627H11.9958C11.1567 0.751276 10.3206 0.881868 9.51092 1.14331C7.70708 1.75766 6.14607 3.20455 4.80497 5.67592C3.4604 8.15369 2.35955 11.6217 1.46711 16.1969C0.50784 21.1185 0.27397 25.0896 0.713068 27.9881C1.15408 30.8993 2.24818 32.5999 3.82309 33.2268L3.82604 33.2279C4.26678 33.4066 4.7285 33.4981 5.19244 33.5C6.27338 33.4997 7.28481 32.9819 8.2197 32.1809C9.15372 31.3806 9.9666 30.3356 10.6427 29.3679L38.4359 16.2014ZM38.4359 16.2014C39.3268 20.8311 39.6475 24.366 39.4385 27.0303C39.1628 30.5147 37.9743 32.5007 36.0874 33.2412L36.0863 33.2416M38.4359 16.2014L36.0863 33.2416M36.0863 33.2416C34.8995 33.7106 33.6643 33.5474 32.3679 32.6805C31.3811 32.0201 30.362 30.9496 29.258 29.3678L29.2579 29.3678M36.0863 33.2416L29.2579 29.3678M29.2579 29.3678C28.3199 28.024 27.2812 27.1152 25.8034 26.5579C24.3511 26.0103 22.5105 25.8163 19.9983 25.8163C17.1781 25.8163 15.25 26.0978 13.8154 26.693M29.2579 29.3678L13.8154 26.693M13.8154 26.693C12.3574 27.2978 11.4509 28.2091 10.6429 29.3676L13.8154 26.693ZM25.1094 8.15637L25.4868 8.48443L25.1094 8.15637C24.8126 8.49772 24.6168 8.9248 24.5379 9.3808C24.459 9.83683 24.4991 10.3101 24.655 10.7431C24.811 11.1761 25.0789 11.557 25.4346 11.8304C25.7916 12.1047 26.2199 12.2571 26.6653 12.2571C27.2644 12.2571 27.822 11.9828 28.2212 11.5236C28.6185 11.0667 28.8321 10.4602 28.8321 9.84001C28.8321 9.3763 28.7128 8.91844 28.4835 8.52378C28.2541 8.12879 27.9211 7.80943 27.5182 7.61747C27.1139 7.42483 26.6638 7.37281 26.2287 7.47236C25.7946 7.57168 25.4068 7.81436 25.1094 8.15637ZM32.1504 12.7413L31.7181 12.9925L32.1504 12.7413C31.9209 12.3464 31.588 12.027 31.1851 11.835C30.7807 11.6424 30.3307 11.5904 29.8955 11.6899C29.4614 11.7892 29.0737 12.0319 28.7763 12.3739C28.4795 12.7153 28.2837 13.1424 28.2048 13.5984C28.1259 14.0544 28.166 14.5277 28.3219 14.9606C28.4778 15.3937 28.7457 15.7746 29.1015 16.048C29.4584 16.3223 29.8867 16.4747 30.3322 16.4747C30.9312 16.4747 31.4889 16.2004 31.8881 15.7412C32.2854 15.2843 32.499 14.6778 32.499 14.0576C32.499 13.5939 32.3797 13.136 32.1504 12.7413ZM10.1644 16.0912V18.6586C10.1644 19.1771 10.3429 19.6861 10.6776 20.0711C11.0143 20.4583 11.4872 20.6922 11.9978 20.6922C12.5084 20.6922 12.9813 20.4583 13.318 20.0711C13.6528 19.6861 13.8312 19.1771 13.8312 18.6586V16.0912H15.9981C16.5087 16.0912 16.9816 15.8573 17.3182 15.4701C17.653 15.0851 17.8315 14.5761 17.8315 14.0576C17.8315 13.5391 17.653 13.0301 17.3182 12.6451C16.9816 12.2578 16.5087 12.0239 15.9981 12.0239H13.8312V9.4566C13.8312 8.93807 13.6528 8.4291 13.318 8.04407C12.9813 7.65683 12.5084 7.42293 11.9978 7.42293C11.4872 7.42293 11.0143 7.65683 10.6776 8.04407C10.3429 8.4291 10.1644 8.93807 10.1644 9.4566V12.0239H7.99759C7.48697 12.0239 7.01408 12.2578 6.6774 12.6451C6.34265 13.0301 6.16418 13.5391 6.16418 14.0576C6.16418 14.5761 6.34265 15.0851 6.6774 15.4701C7.01408 15.8573 7.48697 16.0912 7.99759 16.0912H10.1644ZM21.7678 16.048C22.1247 16.3223 22.553 16.4747 22.9985 16.4747C23.5975 16.4747 24.1552 16.2004 24.5544 15.7412C24.9516 15.2843 25.1652 14.6778 25.1652 14.0576C25.1652 13.5939 25.0459 13.136 24.8167 12.7413C24.5872 12.3464 24.2543 12.027 23.8514 11.835C23.447 11.6424 22.9969 11.5904 22.5618 11.6899C22.1277 11.7892 21.7399 12.0319 21.4425 12.3739C21.1458 12.7153 20.9499 13.1424 20.871 13.5984C20.7922 14.0544 20.8322 14.5277 20.9881 14.9606C21.1441 15.3937 21.412 15.7746 21.7678 16.048ZM25.4341 20.2651C25.7911 20.5397 26.2196 20.6922 26.6653 20.6922C27.2634 20.6922 27.8203 20.4188 28.2194 19.9609C28.6165 19.5053 28.8307 18.9002 28.8321 18.281C28.8331 17.8171 28.7147 17.3587 28.4861 16.9633C28.2573 16.5676 27.9248 16.2473 27.5221 16.0544C27.1179 15.8608 26.6676 15.8079 26.2321 15.9067C25.7976 16.0053 25.4092 16.2475 25.1113 16.5893C24.814 16.9305 24.6176 17.3576 24.5383 17.8138C24.459 18.27 24.4988 18.7435 24.6545 19.1768C24.8103 19.6102 25.0782 19.9914 25.4341 20.2651Z" fill="black" stroke="#959CAF" />
</svg>;
}
export default GamepadIcon;

29
frontend/casino/src/app/utils/ProfileIcon.tsx Normal file
View file

@ -0,0 +1,29 @@
import { FC } from 'react';
const ProfileIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 58 58" fill="none">
<g filter="url(#filter0_d_37_572)">
<rect x="4" y="4" width="42" height="42" rx="10" fill="#4F5563" />
<path d="M39.745 31C39.4345 30.1224 38.8595 29.3626 38.0993 28.8254C37.339 28.2881 36.4309 27.9997 35.5 28H14.5C13.3065 28 12.1619 28.4741 11.318 29.318C10.4741 30.1619 10 31.3065 10 32.5V33.5725C10 39.1495 16.315 43 25 43C29.593 43 33.523 41.8645 36.2065 40H25V38.5H37.951C38.5915 37.8085 39.0955 37.054 39.4435 36.25H25V34.75H39.895C39.9647 34.3614 39.9998 33.9673 40 33.5725V32.5H25V31H39.745ZM34 16C33.9998 15.6239 33.9768 15.2483 33.931 14.875H25V13.375H33.61C33.368 12.5802 33.0166 11.823 32.566 11.125H25V9.625H31.3525C30.0926 8.36945 28.4889 7.51539 26.7439 7.17065C24.9989 6.82591 23.1909 7.00597 21.5482 7.68807C19.9055 8.37018 18.5018 9.52375 17.5142 11.0031C16.5266 12.4825 15.9996 14.2213 15.9996 16C15.9996 17.7787 16.5266 19.5175 17.5142 20.9969C18.5018 22.4762 19.9055 23.6298 21.5482 24.3119C23.1909 24.994 24.9989 25.1741 26.7439 24.8293C28.4889 24.4846 30.0926 23.6305 31.3525 22.375H25V20.875H32.566C33.013 20.185 33.367 19.429 33.6115 18.625H25V17.125H33.931C33.9768 16.7517 33.9998 16.376 34 16Z" fill="url(#paint0_linear_37_572)" />
</g>
<defs>
<filter id="filter0_d_37_572" x="0" y="0" width="58" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dx="4" dy="4" />
<feGaussianBlur stdDeviation="4" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_37_572" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_37_572" result="shape" />
</filter>
<linearGradient id="paint0_linear_37_572" x1="10" y1="25" x2="40" y2="25" gradientUnits="userSpaceOnUse">
<stop stop-color="#171A21" />
<stop offset="0.536458" stop-color="#171A21" />
<stop offset="1" stop-color="#171A21" stop-opacity="0.05" />
</linearGradient>
</defs>
</svg>;
}
export default ProfileIcon;

9
frontend/casino/src/app/utils/SearchIcon.tsx Normal file
View file

@ -0,0 +1,9 @@
import { FC } from 'react';
const SearchIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M14.1667 14.1667L17.5 17.5M2.5 9.16667C2.5 10.9348 3.20238 12.6305 4.45262 13.8807C5.70286 15.131 7.39856 15.8333 9.16667 15.8333C10.9348 15.8333 12.6305 15.131 13.8807 13.8807C15.131 12.6305 15.8333 10.9348 15.8333 9.16667C15.8333 7.39856 15.131 5.70286 13.8807 4.45262C12.6305 3.20238 10.9348 2.5 9.16667 2.5C7.39856 2.5 5.70286 3.20238 4.45262 4.45262C3.20238 5.70286 2.5 7.39856 2.5 9.16667Z" stroke="#959CAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>;
}
export default SearchIcon;

9
frontend/casino/src/app/utils/SportIcon.tsx Normal file
View file

@ -0,0 +1,9 @@
import { FC } from 'react';
const SportIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
<path d="M10.5 2.13281C8.84513 2.13281 7.22742 2.62354 5.85144 3.54294C4.47547 4.46234 3.40302 5.76911 2.76973 7.29802C2.13644 8.82692 1.97074 10.5093 2.29359 12.1324C2.61644 13.7554 3.41334 15.2463 4.58351 16.4165C5.75368 17.5867 7.24457 18.3836 8.86765 18.7064C10.4907 19.0293 12.1731 18.8636 13.702 18.2303C15.2309 17.597 16.5377 16.5245 17.4571 15.1486C18.3765 13.7726 18.8672 12.1549 18.8672 10.5C18.8646 8.28168 17.9822 6.15497 16.4136 4.58638C14.845 3.01779 12.7183 2.13542 10.5 2.13281ZM16.8714 14.2259H13.9363L13.0766 13.043L14.1668 9.86672L15.5613 9.41473L17.8533 11.1727C17.7553 12.2504 17.42 13.2931 16.8714 14.2259ZM7.06371 14.2259H4.12864C3.5806 13.2929 3.24583 12.2503 3.14836 11.1727L5.44032 9.41473L6.83485 9.86672L7.9234 13.043L7.06371 14.2259ZM4.1836 6.67898L4.7775 8.68137L3.13688 9.93973C3.22377 8.78548 3.58244 7.66815 4.1836 6.67898ZM8.82328 12.6328L7.80528 9.6682L10.5 7.81594L13.1947 9.6682L12.1767 12.6328H8.82328ZM16.2217 8.68137L16.8164 6.67898C17.4173 7.66822 17.7757 8.78555 17.8623 9.93973L16.2217 8.68137ZM16.0855 5.67738L15.2578 8.47793L13.8633 8.93156L10.9922 6.96281V5.50922L13.527 3.76687C14.5086 4.21013 15.3817 4.86211 16.0855 5.67738ZM12.3802 3.36328L10.5 4.65281L8.61985 3.36328C9.85238 3.03954 11.1476 3.03954 12.3802 3.36328ZM7.47387 3.76605L10.0078 5.50922V6.95953L7.13672 8.92828L5.74219 8.47465L4.9145 5.67738C5.61864 4.86191 6.49203 4.20967 7.47387 3.76605ZM4.81934 15.2102H6.96692L7.72079 17.343C6.59304 16.8814 5.59649 16.1488 4.81934 15.2102ZM8.89465 17.7064L7.86516 14.7976L8.72321 13.6172H12.2768L13.1348 14.7976L12.1054 17.7064C11.048 17.9416 9.95197 17.9416 8.89465 17.7064ZM13.2792 17.3389L14.0331 15.2061H16.1807C15.4035 16.1447 14.407 16.8773 13.2792 17.3389Z" fill="#959CAF" />
</svg>;
}
export default SportIcon;

17
frontend/casino/src/app/utils/WalletIcon.tsx Normal file
View file

@ -0,0 +1,17 @@
import { FC } from 'react';
const WalletIcon: FC = () => {
return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_37_601)">
<path d="M15.7308 8.95333H7.70811C7.27822 8.92021 6.85258 9.0577 6.52331 9.33606C6.19404 9.61443 5.98764 10.0113 5.94878 10.4407L5.94811 10.4467C5.98753 10.8817 6.19808 11.2833 6.53348 11.5632C6.86888 11.8431 7.30168 11.9784 7.73678 11.9393L7.73078 11.94H15.7308C15.7811 11.9447 15.8319 11.9392 15.8801 11.924C15.9284 11.9088 15.9731 11.8841 16.0116 11.8513C16.0502 11.8186 16.0818 11.7785 16.1047 11.7334C16.1275 11.6883 16.1412 11.6391 16.1448 11.5887V9.306C16.1317 9.20844 16.0837 9.11893 16.0096 9.05408C15.9356 8.98923 15.8405 8.95343 15.7421 8.95333H15.7301H15.7308ZM7.70811 11.3787C7.51956 11.3787 7.33524 11.3228 7.17847 11.218C7.02169 11.1132 6.8995 10.9644 6.82735 10.7902C6.75519 10.616 6.73631 10.4243 6.7731 10.2393C6.80988 10.0544 6.90068 9.88455 7.034 9.75123C7.16733 9.6179 7.3372 9.5271 7.52212 9.49032C7.70705 9.45353 7.89874 9.47241 8.07294 9.54457C8.24713 9.61672 8.39602 9.73892 8.50078 9.89569C8.60553 10.0525 8.66144 10.2368 8.66144 10.4253V10.428C8.66144 10.9533 8.23544 11.3787 7.71078 11.3787H7.70811ZM2.19678 0V4.26933H3.10878V2.44533C3.20078 2.468 3.30744 2.48267 3.41678 2.48667H3.41944C3.74899 2.48579 4.06479 2.35453 4.29788 2.12157C4.53096 1.88861 4.66239 1.57288 4.66344 1.24333C4.66124 1.1351 4.64647 1.02749 4.61944 0.922667L4.62144 0.932667H9.61611C9.59204 1.03369 9.5782 1.13687 9.57478 1.24067V1.24333C9.57566 1.57288 9.70691 1.88868 9.93987 2.12177C10.1728 2.35485 10.4886 2.48628 10.8181 2.48733C10.9301 2.48333 11.0374 2.46867 11.1401 2.44333L11.1294 2.44533V4.26933H12.0634V0H2.19678ZM12.4561 3.75067H13.6168C13.5298 3.49809 13.3775 3.27307 13.1752 3.09858C12.9729 2.92408 12.728 2.80633 12.4654 2.75733L12.4561 2.756V3.75067Z" fill="#959CAF" />
<path d="M7.64733 8.456H15.606V6.03133C15.5719 5.67166 15.3979 5.33976 15.1214 5.10719C14.845 4.87462 14.4882 4.75998 14.128 4.788H14.1327H1.49267C1.4819 4.77625 1.46719 4.76889 1.45133 4.76733C1.3637 4.72615 1.28867 4.66228 1.23405 4.58233C1.17942 4.50238 1.14718 4.40927 1.14067 4.31266V4.31133C1.15128 4.19142 1.19828 4.07761 1.27537 3.98516C1.35245 3.8927 1.45595 3.826 1.572 3.794L1.576 3.79333V2.73666C0.704667 2.778 0 4.02133 0 5.576V14.7573C0.0343941 15.1166 0.208341 15.448 0.48446 15.6803C0.760579 15.9127 1.11683 16.0275 1.47667 16H1.472H14.112C14.4703 16.0264 14.8247 15.9118 15.0996 15.6804C15.3745 15.4491 15.5481 15.1195 15.5833 14.762L15.584 14.7567V12.332H7.66933C6.38467 12.332 5.348 11.4613 5.348 10.4047C5.348 9.32733 6.384 8.45666 7.648 8.45666L7.64733 8.456Z" fill="#959CAF" />
</g>
<defs>
<clipPath id="clip0_37_601">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>;
}
export default WalletIcon;