mirror of
https://github.com/R0m1k3/podcastic.git
synced 2026-10-24 15:38:03 +02:00
feat: initialize global styles with theme variables, Tailwind configuration, and custom UI components
This commit is contained in:
1 parent
030ddfba81
commit
acd9a1a2c5
6 files changed
+39
-10
No files matched your search
@@ -257,7 +257,7 @@ export default function AddPodcast() {
|
||||
) : searchType === 'podcasts' && (searchQuery.length > 0 ? searchResults?.podcasts : trendingResults?.podcasts) ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
|
||||
{(searchQuery.length > 0 ? searchResults?.podcasts : trendingResults?.podcasts).map((podcast: any) => (
|
||||
<div key={podcast.id} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500 border-[var(--border-color)]">
|
||||
<div key={podcast.id} className="group premium-card premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500 border-[var(--border-color)]">
|
||||
<div className="relative aspect-[16/10] overflow-hidden">
|
||||
{podcast.imageUrl ? (
|
||||
<img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
|
||||
|
||||
@@ -111,7 +111,7 @@ export default function Library() {
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-10">
|
||||
<div className="premium-glass p-5 rounded-[var(--radius-card)] flex items-center gap-4">
|
||||
<div className="premium-card premium-glass p-5 rounded-[var(--radius-card)] flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--accent-glow)] flex items-center justify-center text-[var(--accent-primary)] shrink-0">
|
||||
<BookOpen className="w-5 h-5" />
|
||||
</div>
|
||||
@@ -120,7 +120,7 @@ export default function Library() {
|
||||
<h3 className="text-2xl font-display font-black">{podcasts.length}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/add" className="premium-glass p-5 rounded-[var(--radius-card)] flex items-center gap-4 group hover:bg-[var(--accent-primary)]/5 transition-all">
|
||||
<Link to="/add" className="premium-card premium-glass p-5 rounded-[var(--radius-card)] flex items-center gap-4 group hover:bg-[var(--accent-primary)]/5 transition-all">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--accent-primary)] flex items-center justify-center text-white shadow-glow-indigo group-hover:scale-110 transition-transform shrink-0">
|
||||
<Rss className="w-5 h-5" />
|
||||
</div>
|
||||
@@ -149,7 +149,7 @@ export default function Library() {
|
||||
) : (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 pb-10">
|
||||
{podcasts.map((podcast) => (
|
||||
<div key={podcast._id} className="group premium-glass rounded-[var(--radius-card)] p-6 hover:bg-[var(--bg-secondary)] transition-all duration-500 flex flex-col h-full border-[var(--border-color)]">
|
||||
<div key={podcast._id} className="group premium-card premium-glass rounded-[var(--radius-card)] p-6 hover:bg-[var(--bg-secondary)] transition-all duration-500 flex flex-col h-full border-[var(--border-color)]">
|
||||
<div className="flex gap-6 mb-6">
|
||||
<div className="relative shrink-0">
|
||||
<div className="w-24 h-24 rounded-3xl overflow-hidden shadow-2xl border border-[var(--border-color)] group-hover:scale-105 transition-transform duration-500">
|
||||
|
||||
@@ -191,7 +191,7 @@ export default function Trending() {
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
{podcasts.map((podcast, index) => (
|
||||
<div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
|
||||
<div key={`${skip}-${podcast.id}`} className="group premium-card premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
|
||||
<div className="relative aspect-[16/10] overflow-hidden">
|
||||
{podcast.imageUrl ? (
|
||||
<img
|
||||
|
||||
Reference in new issue
Block a user