feat: add block wall

components/block-wall.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+
+type Props = {
+    title: string; // title
+    description: string; // description
+    children?: React.ReactNode;
+    textSize: "sm" | "default" | "lg" | "xl";
+};
+
+function BlockWall({
+    title,
+    description,
+    children,
+    textSize = "default",
+}: Props) {
+    return (
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center p-4 backdrop-blur backdrop-filter bg-foreground/5">
+            <div className="flex flex-col items-center justify-center space-y-2">
+                <h1
+                    className={clsx(
+                        "font-semibold text-center text-foreground",
+                        // based on the textSize prop, we can change the font size
+                        textSize == "default" ? "text-md" : `text-${textSize}`
+                    )}
+                >
+                    {title}
+                </h1>
+                <p className="text-center text-foreground">{description}</p>
+            </div>
+            <div className="flex flex-col items-center justify-center mt-4 space-y-2">
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default BlockWall;

components/spotify/widget.tsx

@@ -12,6 +12,10 @@ import { Card, CardContent } from "@/components/ui/card";
 import useSpotfiy from "@/hooks/use-spotify";
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import BlockWall from "../block-wall";
+import { useUserPreferences } from "@/stores/user-preferences";
+import { Button } from "../ui/button";
+import { useAppStore } from "@/stores/app-store";
 
 type Props = {};
 
@@ -27,6 +31,16 @@ const calculateProgress = (progress: number, duration: number) => {
 };
 
 function SpotifyWidget({}: Props) {
+    const connections = useUserPreferences((state) => state.connections);
+
+    const spotifyConnection = connections.find(
+        (connection) => connection.name.toLowerCase() === "spotify"
+    );
+
+    const openConnectionModal = useAppStore(
+        (state) => state.setAccountConnectionsModal
+    );
+
     const {
         currentlyPlayingTrack,
         loading,
@@ -63,7 +77,36 @@ function SpotifyWidget({}: Props) {
 
     return (
         !loading && (
-            <Card className="grid grid-cols-1 col-span-2 col-start-1 grid-rows-1 row-span-3 row-start-2 pt-4 2xl:pt-5 2xl:row-span-2 rounded-xl">
+            <Card className="relative grid grid-cols-1 col-span-2 col-start-1 grid-rows-1 row-span-3 row-start-2 pt-4 overflow-hidden 2xl:pt-5 2xl:row-span-2 rounded-xl">
+                {!currentlyPlayingTrack?.item &&
+                    !currentlyPlayingTrack?.item && (
+                        <BlockWall
+                            title="🎵 Nothing is playing"
+                            description="Play something on Spotify to see it here!"
+                            textSize="lg"
+                        />
+                    )}
+                {error && (
+                    <BlockWall
+                        title="🚨 Error"
+                        description="An error occured while fetching your currently playing track."
+                        textSize="lg"
+                    />
+                )}
+                {!spotifyConnection && (
+                    <BlockWall
+                        title="🔌 Spotify is not connected"
+                        description="Connect your Spotify account to see your currently playing track."
+                        textSize="xl"
+                    >
+                        <button
+                            onClick={() => openConnectionModal(true)}
+                            className="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-black transition-colors bg-green-500 border border-green-600 rounded-md whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-green-600"
+                        >
+                            Connect Spotify
+                        </button>
+                    </BlockWall>
+                )}
                 <CardContent className="w-full h-full col-span-1 row-span-1">
                     <div className="flex items-start w-full space-x-4">
                         <div className="flex-shrink-0">

tailwind.config.js

@@ -12,6 +12,7 @@ module.exports = {
             // pattern: /(from|to)-+/, // 👈  This includes bg of all colors and shades
             // only for from and bg blue, red, green
             pattern: /(from|to)-(blue|yellow|green)-(600|500|400)/,
+            pattern: /text-(sm|md|lg|xl|2xl)/,
         },
     ],
     prefix: "",