github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-12 08:45:38 +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> </div>
</section> </section>
<section class="flex flex-col gap-4 justify-center pt-10 items-center w-full text-left pb-4"> <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 {/* <GameCard
game={{ game={{
release_date: 1478710740000, release_date: 1478710740000,
@@ -38,7 +38,7 @@ export default component$(() => {
}} }}
/> */} /> */}
</div> </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 <Card
game={{ game={{
// release_date: 1478710740000, // release_date: 1478710740000,

BIN
bun.lockb
View File

Binary file not shown.

1
package.json
View File

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

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

@@ -41,20 +41,12 @@ export const Card = component$(({ game }: Props) => {
g = Math.floor(g / count); g = Math.floor(g / count);
b = Math.floor(b / 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 // For light mode, keep the existing logic
const minBrightness = 100; const minBrightness = 100;
r = Math.max(r, minBrightness); r = Math.max(r, minBrightness);
g = Math.max(g, minBrightness); g = Math.max(g, minBrightness);
b = Math.max(b, minBrightness); b = Math.max(b, minBrightness);
}
return `rgb(${r},${g},${b})`; return `rgb(${r},${g},${b})`;
@@ -80,9 +72,9 @@ export const Card = component$(({ game }: Props) => {
return ( return (
<div <div
style={{ 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"> <header class="flex gap-4 justify-between p-4">
<div class="flex relative pr-[22px] overflow-hidden overflow-ellipsis whitespace-nowrap" > <div class="flex relative pr-[22px] overflow-hidden overflow-ellipsis whitespace-nowrap" >
<h3 class="overflow-hidden overflow-ellipsis whitespace-nowrap">{game.name}</h3> <h3 class="overflow-hidden overflow-ellipsis whitespace-nowrap">{game.name}</h3>