fernando/card-jong-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Component for a card

Browse Source
This commit is contained in:
Araozu 2024-05-06 18:32:31 -05:00
parent 08ab1cfe49
commit 385340ad52
6 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,7 +9,7 @@
<title>Card-jong</title> <title>Card-jong</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Secular+One&display=swap" rel="stylesheet">
</head> </head>
<body> <body>

13
src/components/Card.tsx Normal file
View File

@ -0,0 +1,13 @@
import { ClubIcon } from "./icons/ClubIcon";
import { JokerIcon } from "./icons/JokerIcon";
export function Card() {
return (
<div class="inline-block w-16 h-24 border-2 border-c-border-1 bg-black text-white relative">
<span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif">
1
</span>
<ClubIcon class="absolute bottom-1 right-1" fill="white" />
</div>
);
}

7
src/components/icons/ClubIcon.tsx Normal file
View File

@ -0,0 +1,7 @@
export function ClubIcon(props: {class: string, fill: string}) {
return (
<svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
<path d="M184,88c-.78,0-1.56,0-2.33,0a56,56,0,1,0-107.34,0c-.78,0-1.55,0-2.33,0A56,56,0,1,0,96.54,194.35l-8.2,27.35A8,8,0,0,0,96,232h64a8,8,0,0,0,7.66-10.3l-8.2-27.35A56,56,0,1,0,184,88Zm0,96a40,40,0,0,1-33.4-18,8,8,0,0,0-14.33,6.71l13,43.26h-42.5l13-43.26A8,8,0,0,0,105.4,166a40,40,0,1,1-19.93-59.71,8,8,0,0,0,9.33-12,40,40,0,1,1,66.4,0,8,8,0,0,0,9.33,12A40,40,0,1,1,184,184Z" />
</svg>
);
}

25
src/components/icons/JokerIcon.tsx Normal file
View File

@ -0,0 +1,25 @@
export function JokerIcon(props: {class: string, fill: string}) {
return (
/*
<svg class={props.class} x="0" y="0" width="50" height="50" viewBox="0 0 172 172" fill={props.fill}>
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" /><g fill="#1fb141"><path d="M21.5,21.5v129h64.5v-32.25v-64.5v-32.25zM86,53.75c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25c-17.7805,0 -32.25,14.4695 -32.25,32.25zM118.25,86c-17.7805,0 -32.25,14.4695 -32.25,32.25c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25z" /></g></g>
</svg>*/
<svg fill={props.fill}
width="40" height="40"
class={props.class}
viewBox="0 0 29.904 29.904"
>
<path d="M28.405,14.7c-0.479,0-0.897,0.228-1.172,0.576c-1.56-1.127-4.992-2.994-7.975-0.271c0,0-3.021-4.168-0.982-7.569
c0.246,0.178,0.547,0.286,0.875,0.286c0.827,0,1.5-0.671,1.5-1.5s-0.673-1.5-1.5-1.5c-0.828,0-1.502,0.671-1.502,1.5
c0,0.168,0.032,0.327,0.084,0.478c-2.141,0.819-5.836,2.858-6.39,7.307c0,0-3.429-4.541-8.573-1.594
c-0.265-0.425-0.732-0.711-1.27-0.711c-0.829,0-1.501,0.672-1.501,1.5s0.672,1.5,1.501,1.5c0.828,0,1.499-0.672,1.499-1.5
c0-0.047-0.01-0.091-0.014-0.137c1.794,0.14,4.67,1.726,5.461,10.151l0.09,0.688c0,0.707,2.858,1.279,6.382,1.279
c3.526,0,6.383-0.574,6.383-1.279c0,0,0.229-5.78,5.611-7.623c0.041,0.791,0.688,1.423,1.491,1.423c0.83,0,1.5-0.673,1.5-1.5
C29.907,15.371,29.235,14.7,28.405,14.7z"
/>
</svg>
);
}

16
src/pages/Index.tsx
View File

@ -1,6 +1,7 @@
import { A } from "@solidjs/router"; import { A } from "@solidjs/router";
import { createSignal, onMount, Show } from "solid-js"; import { createSignal, onMount, Show } from "solid-js";
import { backend, UserInfo } from "../utils"; import { backend, UserInfo } from "../utils";
import { Card } from "../components/Card";
export function Index() { export function Index() {
@ -91,15 +92,12 @@ export function Index() {
Go to game rules Go to game rules
</A> </A>
</div> </div>
</div> <div class="h-16" />
); <div class="text-center">
} <Card />
<Card />
<Card />
function Registration() { </div>
return (
<div>
:D
</div> </div>
); );
} }

3
tailwind.config.js
View File

@ -11,6 +11,9 @@ module.exports = {
"c-bg-2": "var(--c-bg-2)", "c-bg-2": "var(--c-bg-2)",
"c-border-1": "var(--c-border-1)", "c-border-1": "var(--c-border-1)",
}, },
fontFamily: {
"sans-serif": ["'Secular One'", "'sans-serif'"],
},
}, },
}, },
plugins: [], plugins: [],