github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-11 00:05:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Add home

Browse Source
This commit is contained in:
Wanjohi
2024-09-02 15:46:28 +03:00
parent 2b6a048ccd
commit 62b7a841ed
4 changed files with 10 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/routes/home/index.tsx
View File

@@ -19,7 +19,7 @@ export default component$(() => {
</div>
</section>
<section class="flex flex-col gap-4 justify-center pt-10 items-center w-full text-left pb-4">
<div class="flex gap-4 mx-auto max-w-xl w-full">
<div class="flex gap-4 mx-auto max-w-xl lg:max-w-2xl w-full">
{/* <GameCard
game={{
release_date: 1478710740000,
@@ -38,7 +38,7 @@ export default component$(() => {
}}
/> */}
</div>
<div class="gap-4 mx-auto max-w-xl w-full grid grid-cols-1 md:grid-cols-2">
<div class="gap-4 w-full max-w-xl lg:max-w-4xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<Card
game={{
// release_date: 1478710740000,

BIN
bun.lockb
View File

Binary file not shown.

1
package.json
View File

@@ -9,6 +9,7 @@
},
"devDependencies": {
"prettier": "^3.2.5",
"sst": "^3.0.91",
"turbo": "^2.0.12",
"typescript": "^5.4.5"
},

22
packages/ui/src/card.tsx
View File

@@ -41,20 +41,12 @@ export const Card = component$(({ game }: Props) => {
g = Math.floor(g / count);
b = Math.floor(b / count);
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
// Darken the color for dark mode
r = Math.floor(r * 0.8);
g = Math.floor(g * 0.8);
b = Math.floor(b * 0.8);
} else {
// For light mode, keep the existing logic
const minBrightness = 100;
r = Math.max(r, minBrightness);
g = Math.max(g, minBrightness);
b = Math.max(b, minBrightness);
}
// For light mode, keep the existing logic
const minBrightness = 100;
r = Math.max(r, minBrightness);
g = Math.max(g, minBrightness);
b = Math.max(b, minBrightness);
return `rgb(${r},${g},${b})`;
@@ -80,9 +72,9 @@ export const Card = component$(({ game }: Props) => {
return (
<div
style={{
backgroundColor: backgroundColor.value,
"--bg-color": backgroundColor.value,
}}
class="min-w-[250px] group cursor-pointer backdrop-blur-sm select-none w-full group rounded-3xl text-primary-950/70 duration-300 transition-colors flex flex-col">
class="min-w-[250px] bg-[--bg-color] group cursor-pointer backdrop-blur-sm select-none w-full group rounded-3xl text-primary-950/70 duration-200 transition-colors flex flex-col">
<header class="flex gap-4 justify-between p-4">
<div class="flex relative pr-[22px] overflow-hidden overflow-ellipsis whitespace-nowrap" >
<h3 class="overflow-hidden overflow-ellipsis whitespace-nowrap">{game.name}</h3>