spotify-now-playing-card 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Bojan Jagetic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,206 @@
+# Spotify Now Playing Card
+
+A beautiful, customizable React component to display your currently playing Spotify track. Perfect for personal websites, portfolios, and blogs.
+
+## Features
+
+- 🎵 Displays currently playing track from Spotify
+- 🎨 Fully customizable styling
+- ⚡ Built with SWR for efficient data fetching
+- 📱 Responsive design
+- 🔄 Auto-refresh with configurable interval
+- 🎯 Framework agnostic (works with Next.js, Create React App, etc.)
+- 📘 Written in TypeScript with full type definitions
+
+## Installation
+
+```bash
+npm install spotify-now-playing-card
+# or
+yarn add spotify-now-playing-card
+# or
+pnpm add spotify-now-playing-card
+```
+
+## Prerequisites
+
+You need to set up a Spotify API endpoint that returns the currently playing track data. The component expects the API to return JSON in this format:
+
+```json
+{
+  "isPlaying": true,
+  "title": "Song Title",
+  "artist": "Artist Name",
+  "album": "Album Name",
+  "albumImageUrl": "https://...",
+  "songUrl": "https://open.spotify.com/track/..."
+}
+```
+
+When not playing, the API should return:
+```json
+{
+  "isPlaying": false
+}
+```
+
+### Setting up Spotify API
+
+1. Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
+2. Create a new app
+3. Get your `CLIENT_ID` and `CLIENT_SECRET`
+4. Set redirect URI (e.g., `http://localhost:3000/api/spotify/callback`)
+5. Get your refresh token (you can use tools like [this](https://github.com/spotify/web-api-auth-examples))
+
+### Example API Endpoint (Next.js)
+
+Create `pages/api/spotify.js`:
+
+```javascript
+import querystring from 'querystring'
+import axios from 'axios'
+
+const {
+  SPOTIFY_CLIENT_ID: client_id,
+  SPOTIFY_CLIENT_SECRET: client_secret,
+  SPOTIFY_REFRESH_TOKEN: refresh_token
+} = process.env
+
+const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
+const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
+const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'
+
+const getAccessToken = async () => {
+  const response = await axios.post(
+    TOKEN_ENDPOINT,
+    querystring.stringify({
+      grant_type: 'refresh_token',
+      refresh_token
+    }),
+    {
+      headers: {
+        Authorization: `Basic ${basic}`,
+        'Content-Type': 'application/x-www-form-urlencoded'
+      }
+    }
+  )
+  return response.data
+}
+
+export default async function handler(req, res) {
+  try {
+    const { access_token } = await getAccessToken()
+    const response = await axios.get(NOW_PLAYING_ENDPOINT, {
+      headers: {
+        Authorization: `Bearer ${access_token}`
+      }
+    })
+
+    if (
+      response.status === 204 ||
+      response.status > 400 ||
+      (response.data && response.data.currently_playing_type !== 'track')
+    ) {
+      return res.status(200).json({ isPlaying: false })
+    }
+
+    const data = {
+      isPlaying: response.data.is_playing,
+      title: response.data.item.name,
+      album: response.data.item.album.name,
+      artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
+      albumImageUrl: response.data.item.album.images[0].url,
+      songUrl: response.data.item.external_urls.spotify
+    }
+
+    res.status(200).json(data)
+  } catch (error) {
+    res.status(200).json({ isPlaying: false })
+  }
+}
+```
+
+## Usage
+
+### Basic Usage
+
+```jsx
+import { SpotifyCard } from 'spotify-now-playing-card'
+
+function App() {
+  return <SpotifyCard apiUrl="/api/spotify" />
+}
+```
+
+### TypeScript Usage
+
+The package includes full TypeScript definitions:
+
+```tsx
+import { SpotifyCard, SpotifyCardProps } from 'spotify-now-playing-card'
+
+const MyComponent: React.FC = () => {
+  const cardProps: SpotifyCardProps = {
+    apiUrl: '/api/spotify',
+    showAlbum: true,
+    refreshInterval: 30000
+  }
+  
+  return <SpotifyCard {...cardProps} />
+}
+```
+
+### With Custom Styling
+
+```jsx
+import { SpotifyCard } from 'spotify-now-playing-card'
+
+function App() {
+  return (
+    <SpotifyCard
+      apiUrl="/api/spotify"
+      className="my-custom-class"
+      styles={{
+        container: "bg-gray-900 rounded-xl",
+        title: "text-white text-lg",
+        artist: "text-gray-400"
+      }}
+    />
+  )
+}
+```
+
+### All Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiUrl` | `string` | `'/api/spotify'` | API endpoint URL that returns Spotify data |
+| `fallbackUrl` | `string` | `'https://open.spotify.com'` | URL to redirect when not playing |
+| `className` | `string` | `''` | Additional CSS classes for container |
+| `styles` | `object` | `{}` | Custom style overrides for different elements |
+| `showAlbum` | `boolean` | `true` | Whether to show album name |
+| `notPlayingText` | `string` | `'Currently not listening'` | Text when not playing |
+| `refreshInterval` | `number` | `30000` | Auto-refresh interval in milliseconds |
+
+### Styling
+
+The component uses Tailwind CSS classes by default. Make sure you have Tailwind CSS installed and configured in your project.
+
+If you're not using Tailwind, you can override all styles using the `styles` prop or `className` prop.
+
+## Dependencies
+
+- `react` (>=16.8.0)
+- `react-dom` (>=16.8.0)
+- `axios` (for API calls)
+- `swr` (for data fetching)
+- `react-icons` (for Spotify icon)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+

package/dist/SpotifyCard.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export interface SpotifyData {
+    isPlaying: boolean;
+    title?: string;
+    artist?: string;
+    album?: string;
+    albumImageUrl?: string;
+    songUrl?: string;
+}
+export interface SpotifyCardStyles {
+    container?: string;
+    link?: string;
+    image?: string;
+    title?: string;
+    artist?: string;
+    album?: string;
+    icon?: string;
+}
+export interface SpotifyCardProps {
+    /** The API endpoint URL that returns Spotify data */
+    apiUrl?: string;
+    /** URL to redirect when not playing (default: Spotify profile) */
+    fallbackUrl?: string;
+    /** Additional CSS classes for the card container */
+    className?: string;
+    /** Custom style overrides for different elements */
+    styles?: SpotifyCardStyles;
+    /** Whether to show album name (default: true) */
+    showAlbum?: boolean;
+    /** Text to show when not playing (default: "Currently not listening") */
+    notPlayingText?: string;
+    /** Auto-refresh interval in milliseconds (default: 30000) */
+    refreshInterval?: number;
+    /** Additional props to pass to the container div */
+    [key: string]: any;
+}
+/**
+ * SpotifyCard - A React component to display currently playing Spotify track
+ */
+declare const SpotifyCard: React.FC<SpotifyCardProps>;
+export default SpotifyCard;
+//# sourceMappingURL=SpotifyCard.d.ts.map

package/dist/SpotifyCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotifyCard.d.ts","sourceRoot":"","sources":["../src/SpotifyCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oDAAoD;IACpD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsF3C,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SpotifyCard } from './SpotifyCard';
+export { default } from './SpotifyCard';
+export type { SpotifyCardProps, SpotifyCardStyles, SpotifyData } from './SpotifyCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.esm.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import axios from 'axios';
+import { SiSpotify } from 'react-icons/si';
+import useSWR from 'swr';
+
+const fetcher = (url) => axios.get(url).then(res => res.data);
+/**
+ * SpotifyCard - A React component to display currently playing Spotify track
+ */
+const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spotify.com', className = '', styles = {}, showAlbum = true, notPlayingText = 'Currently not listening', refreshInterval = 30000, ...props }) => {
+    const { data, error } = useSWR(apiUrl, fetcher, {
+        refreshInterval: refreshInterval,
+        revalidateOnFocus: true
+    });
+    if (error) {
+        console.error('SpotifyCard error:', error);
+    }
+    const defaultStyles = {
+        container: 'text-slate-400 border border-neutral-800 rounded-lg w-full mx-5 my-2',
+        link: 'relative flex items-center space-x-2 py-4 pl-2 transition-shadow hover:shadow-md',
+        image: 'w-14 shadow-sm',
+        title: 'font-bold text-md w-48 lg:w-72 truncate',
+        artist: 'text-sm font-semibold',
+        album: 'text-xs font-semibold w-48 lg:w-72 truncate',
+        icon: 'absolute right-1.5 top-1.5'
+    };
+    const mergedStyles = {
+        container: `${defaultStyles.container} ${styles.container || ''} ${className}`,
+        link: `${defaultStyles.link} ${styles.link || ''}`,
+        image: `${defaultStyles.image} ${styles.image || ''}`,
+        title: `${defaultStyles.title} ${styles.title || ''}`,
+        artist: `${defaultStyles.artist} ${styles.artist || ''}`,
+        album: `${defaultStyles.album} ${styles.album || ''}`,
+        icon: `${defaultStyles.icon} ${styles.icon || ''}`
+    };
+    const isPlaying = data?.isPlaying;
+    const titleColor = isPlaying
+        ? 'text-transparent bg-clip-text bg-gradient-to-r from-violet-500 via-blue-500 to-emerald-500'
+        : '';
+    return (jsx("div", { className: mergedStyles.container, ...props, children: jsxs("a", { target: '_blank', rel: 'noreferrer', href: isPlaying ? data?.songUrl : fallbackUrl, className: mergedStyles.link, children: [jsx("div", { className: 'w-15', children: isPlaying ? (jsx("img", { className: mergedStyles.image, src: data?.albumImageUrl, alt: data?.album || 'Album cover' })) : (jsx(SiSpotify, { size: 30, color: '#1ED760' })) }), jsxs("div", { className: 'flex-1', children: [jsx("p", { className: `${mergedStyles.title} ${titleColor}`, children: isPlaying ? data?.title : notPlayingText }), jsx("p", { className: mergedStyles.artist, children: isPlaying ? `Artist: ${data?.artist}` : 'Spotify' }), showAlbum && isPlaying && (jsxs("p", { className: mergedStyles.album, children: ["Album: ", data?.album] }))] }), isPlaying && (jsx("div", { className: mergedStyles.icon, children: jsx(SiSpotify, { size: 20, color: '#1ED760' }) }))] }) }));
+};
+
+export { SpotifyCard, SpotifyCard as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/SpotifyCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,CAAC,GAAW,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC;AAwCrE;;AAEG;AACH,MAAM,WAAW,GAA+B,CAAC,EAC/C,MAAM,GAAG,cAAc,EACvB,WAAW,GAAG,0BAA0B,EACxC,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,EAAE,EACX,SAAS,GAAG,IAAI,EAChB,cAAc,GAAG,yBAAyB,EAC1C,eAAe,GAAG,KAAK,EACvB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAc,MAAM,EAAE,OAAO,EAAE;AAC3D,QAAA,eAAe,EAAE,eAAe;AAChC,QAAA,iBAAiB,EAAE;AACpB,KAAA,CAAC;IAEF,IAAI,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC;IAC5C;AAEA,IAAA,MAAM,aAAa,GAAsB;AACvC,QAAA,SAAS,EAAE,sEAAsE;AACjF,QAAA,IAAI,EAAE,kFAAkF;AACxF,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,KAAK,EAAE,yCAAyC;AAChD,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,KAAK,EAAE,6CAA6C;AACpD,QAAA,IAAI,EAAE;KACP;AAED,IAAA,MAAM,YAAY,GAAsB;AACtC,QAAA,SAAS,EAAE,CAAA,EAAG,aAAa,CAAC,SAAe,CAAA,CAAA,EAAI,MAAM,CAAC,SAAS,IAAI,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE;AACpF,QAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,IAAU,CAAA,CAAA,EAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAA,CAAE;AACxD,QAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAW,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,IAAI,EAAE,CAAA,CAAE;AAC3D,QAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAW,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,IAAI,EAAE,CAAA,CAAE;AAC3D,QAAA,MAAM,EAAE,CAAA,EAAG,aAAa,CAAC,MAAY,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA,CAAE;AAC9D,QAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAW,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,IAAI,EAAE,CAAA,CAAE;AAC3D,QAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,IAAU,CAAA,CAAA,EAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAA;KACvD;AAED,IAAA,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS;IACjC,MAAM,UAAU,GAAG;AACjB,UAAE;UACA,EAAE;AAEN,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,SAAS,EAAA,GAAM,KAAK,YAC/CC,IAAA,CAAA,GAAA,EAAA,EACE,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,IAAI,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,GAAG,WAAW,EAC7C,SAAS,EAAE,YAAY,CAAC,IAAI,EAAA,QAAA,EAAA,CAE5BD,aAAK,SAAS,EAAC,MAAM,EAAA,QAAA,EAClB,SAAS,IACRA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,YAAY,CAAC,KAAK,EAC7B,GAAG,EAAE,IAAI,EAAE,aAAa,EACxB,GAAG,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,EAAA,CACjC,KAEFA,GAAA,CAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,CAC1C,EAAA,CACG,EAENC,cAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrBD,WAAG,SAAS,EAAE,GAAG,YAAY,CAAC,KAAK,CAAA,CAAA,EAAI,UAAU,EAAE,EAAA,QAAA,EAChD,SAAS,GAAG,IAAI,EAAE,KAAK,GAAG,cAAc,EAAA,CACvC,EACJA,WAAG,SAAS,EAAE,YAAY,CAAC,MAAM,YAC9B,SAAS,GAAG,CAAA,QAAA,EAAW,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,EAAA,CAChD,EACH,SAAS,IAAI,SAAS,KACrBC,YAAG,SAAS,EAAE,YAAY,CAAC,KAAK,wBACtB,IAAI,EAAE,KAAK,CAAA,EAAA,CACjB,CACL,IACG,EAEL,SAAS,KACRD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,IAAI,EAAA,QAAA,EAC/BA,IAAC,SAAS,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CACrC,CACP,CAAA,EAAA,CACC,EAAA,CACA;AAEV;;;;"}

package/dist/index.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var axios = require('axios');
+var si = require('react-icons/si');
+var useSWR = require('swr');
+
+const fetcher = (url) => axios.get(url).then(res => res.data);
+/**
+ * SpotifyCard - A React component to display currently playing Spotify track
+ */
+const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spotify.com', className = '', styles = {}, showAlbum = true, notPlayingText = 'Currently not listening', refreshInterval = 30000, ...props }) => {
+    const { data, error } = useSWR(apiUrl, fetcher, {
+        refreshInterval: refreshInterval,
+        revalidateOnFocus: true
+    });
+    if (error) {
+        console.error('SpotifyCard error:', error);
+    }
+    const defaultStyles = {
+        container: 'text-slate-400 border border-neutral-800 rounded-lg w-full mx-5 my-2',
+        link: 'relative flex items-center space-x-2 py-4 pl-2 transition-shadow hover:shadow-md',
+        image: 'w-14 shadow-sm',
+        title: 'font-bold text-md w-48 lg:w-72 truncate',
+        artist: 'text-sm font-semibold',
+        album: 'text-xs font-semibold w-48 lg:w-72 truncate',
+        icon: 'absolute right-1.5 top-1.5'
+    };
+    const mergedStyles = {
+        container: `${defaultStyles.container} ${styles.container || ''} ${className}`,
+        link: `${defaultStyles.link} ${styles.link || ''}`,
+        image: `${defaultStyles.image} ${styles.image || ''}`,
+        title: `${defaultStyles.title} ${styles.title || ''}`,
+        artist: `${defaultStyles.artist} ${styles.artist || ''}`,
+        album: `${defaultStyles.album} ${styles.album || ''}`,
+        icon: `${defaultStyles.icon} ${styles.icon || ''}`
+    };
+    const isPlaying = data?.isPlaying;
+    const titleColor = isPlaying
+        ? 'text-transparent bg-clip-text bg-gradient-to-r from-violet-500 via-blue-500 to-emerald-500'
+        : '';
+    return (jsxRuntime.jsx("div", { className: mergedStyles.container, ...props, children: jsxRuntime.jsxs("a", { target: '_blank', rel: 'noreferrer', href: isPlaying ? data?.songUrl : fallbackUrl, className: mergedStyles.link, children: [jsxRuntime.jsx("div", { className: 'w-15', children: isPlaying ? (jsxRuntime.jsx("img", { className: mergedStyles.image, src: data?.albumImageUrl, alt: data?.album || 'Album cover' })) : (jsxRuntime.jsx(si.SiSpotify, { size: 30, color: '#1ED760' })) }), jsxRuntime.jsxs("div", { className: 'flex-1', children: [jsxRuntime.jsx("p", { className: `${mergedStyles.title} ${titleColor}`, children: isPlaying ? data?.title : notPlayingText }), jsxRuntime.jsx("p", { className: mergedStyles.artist, children: isPlaying ? `Artist: ${data?.artist}` : 'Spotify' }), showAlbum && isPlaying && (jsxRuntime.jsxs("p", { className: mergedStyles.album, children: ["Album: ", data?.album] }))] }), isPlaying && (jsxRuntime.jsx("div", { className: mergedStyles.icon, children: jsxRuntime.jsx(si.SiSpotify, { size: 20, color: '#1ED760' }) }))] }) }));
+};
+
+exports.SpotifyCard = SpotifyCard;
+exports.default = SpotifyCard;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/SpotifyCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","SiSpotify"],"mappings":"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"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "spotify-now-playing-card",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A beautiful React component to display your currently playing Spotify track",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "spotify",
+    "react",
+    "component",
+    "now-playing",
+    "music",
+    "card",
+    "widget"
+  ],
+  "author": "Bojan Jagetic",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/spotify-now-playing-card.git"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "axios": "^1.6.4",
+    "react-icons": "^4.3.1",
+    "swr": "^1.3.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.6.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.3"
+  }
+}