srizan/mainwebsite
1
0
Fork 0
mirror of https://github.com/SrIzan10/mainwebsite.git synced 2026-06-06 00:56:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

rose pine

Browse Source
This commit is contained in:
SrIzan10
2025-05-24 12:21:22 +00:00
parent 696acf0bdf
commit 55bb043bb5
2 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/BentoSpotify.tsx
View File

@@ -34,7 +34,7 @@ export default function BentoSpotify() {
if (isLoading) {
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/5">
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.green.500)_0%,_transparent_50%)]"></div>
@@ -42,7 +42,7 @@ export default function BentoSpotify() {
{/* Spotify Logo */}
<div className="absolute right-3 top-3 z-10">
<FaSpotify size={24} className="text-green-500" />
<FaSpotify size={24} className="text-primary" />
</div>
<div className="relative z-10 flex h-full flex-col p-4">
@@ -78,21 +78,21 @@ export default function BentoSpotify() {
const { name: song, artist, album, image, url } = displayData
return (
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-green-500/10 to-green-600/5">
<div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-primary/10 to-primary/5">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.green.500)_0%,_transparent_50%)]"></div>
<div className="h-full w-full bg-[radial-gradient(circle_at_20%_80%,_theme(colors.primary)_0%,_transparent_50%)]"></div>
</div>
{/* Spotify Logo */}
<div className="absolute right-3 top-3 z-10">
<FaSpotify size={24} className="text-green-500" />
<FaSpotify size={24} className="text-primary" />
</div>
<div className="relative z-10 flex h-full flex-col p-4">
{/* Header */}
<div className="mb-4 flex items-center gap-2">
<div className="flex h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
<div className="flex h-2 w-2 rounded-full bg-primary animate-pulse"></div>
<span className="text-xs font-medium text-muted-foreground">
{displayData['@attr']?.nowplaying === 'true'
? 'NOW PLAYING'
@@ -111,7 +111,7 @@ export default function BentoSpotify() {
className="h-16 w-16 rounded-lg border shadow-lg"
/>
{displayData['@attr']?.nowplaying === 'true' && (
<div className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-green-500 border-2 border-background"></div>
<div className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-primary border-2 border-background"></div>
)}
</div>
@@ -132,7 +132,7 @@ export default function BentoSpotify() {
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center gap-1">
<div className="h-1 w-8 rounded-full bg-muted">
<div className="h-full rounded-full bg-green-500"></div>
<div className="h-full rounded-full bg-primary"></div>
</div>
</div>

58
src/styles/global.css
View File

@@ -52,35 +52,41 @@
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--background: #faf4ed;
--foreground: #575279;
--primary: #286983;
--primary-foreground: #faf4ed;
--secondary: #f2e9e1;
--secondary-foreground: #575279;
--muted: #f2e9e1;
--muted-foreground: #797593;
--accent: #d7827e;
--accent-foreground: #575279;
--additive: #56949f;
--additive-foreground: #faf4ed;
--destructive: #b4637a;
--destructive-foreground: #faf4ed;
--border: #dfdad9;
--ring: #907aa9;
}
[data-theme="dark"] {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--ring: oklch(0.556 0 0);
--background: #191724;
--foreground: #e0def4;
--primary: #c4a7e7;
--primary-foreground: #191724;
--secondary: #26233a;
--secondary-foreground: #e0def4;
--muted: #26233a;
--muted-foreground: #908caa;
--accent: #eb6f92;
--accent-foreground: #e0def4;
--additive: #9ccfd8;
--additive-foreground: #191724;
--destructive: #eb6f92;
--destructive-foreground: #e0def4;
--border: #403d52;
--ring: #6e6a86;
}
@layer base {