Skip to content

Commit 1314f3c

Browse files
pavanpaikpavanpaik
committed
Refine layouts: compact headers, mobile reference video thumbnails, back navigation, and padding adjustments
1 parent 5eb949d commit 1314f3c

8 files changed

Lines changed: 208 additions & 56 deletions

File tree

‎web/src/app/ask/page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,14 +86,16 @@ export default function AskPage() {
8686
);
8787

8888
return (
89-
<div className="max-w-4xl mx-auto space-y-8 pt-6">
89+
<div className="max-w-4xl mx-auto space-y-6 pt-6">
9090
{/* Header */}
91-
<div className="text-center space-y-2">
92-
<div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
93-
<MessageCircleQuestion className="w-8 h-8" />
91+
<div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
92+
<div className="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 flex-none">
93+
<MessageCircleQuestion className="w-6 h-6" />
94+
</div>
95+
<div>
96+
<h1 className="text-2xl font-bold text-gray-800">My Spiritual Inquiries</h1>
97+
<p className="text-sm text-gray-500 font-serif italic">"Ask and it shall be given"</p>
9498
</div>
95-
<h1 className="text-3xl font-bold text-gray-800">My Spiritual Inquiries</h1>
96-
<p className="text-gray-500 font-serif italic">&quot;Ask and it shall be given&quot;</p>
9799
</div>
98100

99101
{/* New Ticket Form */}

‎web/src/app/audio/page.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,18 @@ export default function AudioPage() {
4646
};
4747

4848
return (
49-
<div className="max-w-4xl mx-auto space-y-8 mb-24 pt-6">
49+
<div className="max-w-4xl mx-auto space-y-6 mb-24 pt-6">
50+
{/* Header */}
51+
<div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
52+
<div className="w-12 h-12 bg-ochre/10 rounded-full flex items-center justify-center text-ochre flex-none">
53+
<Music className="w-6 h-6" />
54+
</div>
55+
<div>
56+
<h1 className="text-2xl font-bold text-gray-800">Sai Bhajans</h1>
57+
<p className="text-sm text-gray-500 font-serif italic">"Melodies of devotion"</p>
58+
</div>
59+
</div>
60+
5061
{/* Mobile Category Filters (Top + Other) */}
5162
<div className="md:hidden overflow-x-auto pb-2 -mx-4 px-4 scrollbar-hide">
5263
<div className="flex space-x-2 min-w-max">

‎web/src/app/bodhakatha/[articleId]/page.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import bodhakathaArticles from '@/data/bodhakatha_articles.json';
2-
import VideoPlayer from '@/components/features/VideoPlayer';
2+
import ReferenceVideos from '@/components/features/ReferenceVideos';
33
import ChapterTextViewer from '@/components/features/ChapterTextViewer';
44

55
// Server Component
@@ -9,6 +9,9 @@ export async function generateStaticParams() {
99
}));
1010
}
1111

12+
import Link from 'next/link';
13+
import { ArrowLeft } from 'lucide-react';
14+
1215
export default async function BodhakathaDetailPage({ params }: { params: Promise<{ articleId: string }> }) {
1316
const { articleId } = await params;
1417
const article = bodhakathaArticles.find((c) => c.id.toString() === articleId);
@@ -22,32 +25,48 @@ export default async function BodhakathaDetailPage({ params }: { params: Promise
2225
"In this instructional Bodhakatha, we learn the importance of internal purity over external rituals. Sai Baba often emphasized that a clean heart is the dwelling place of God. Through 'Satsang' and understanding the 'Rahasya' of his teachings, one can attain peace."
2326
).join("\n\n");
2427

25-
return (
26-
<div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-8rem)]">
27-
{/* Left: Video */}
28-
<div className="w-full lg:w-1/2 flex-none">
29-
<div className="lg:sticky lg:top-8 space-y-4">
30-
<VideoPlayer videoId={article.youtube_id} />
28+
const videos = [{
29+
id: article.id,
30+
youtube_id: article.youtube_id,
31+
title: "Teaching Narration",
32+
description: `Theme: ${article.theme}`
33+
}];
3134

32-
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
35+
return (
36+
<div className="flex flex-col lg:flex-row gap-8 h-[calc(100vh-8rem)] pt-6">
37+
{/* Left: Text Content (Prominent) - First on mobile and desktop */}
38+
<div className="w-full lg:w-2/3 flex-1 overflow-y-auto pr-4 custom-scrollbar">
39+
<div className="mb-4">
40+
<Link href="/bodhakatha" className="inline-flex items-center transition-colors px-4 py-2 bg-white border border-gray-200 rounded-full text-gray-700 font-medium shadow-sm hover:bg-gray-50 lg:bg-transparent lg:border-0 lg:shadow-none lg:p-0 lg:text-gray-500 lg:hover:text-ochre lg:hover:bg-transparent text-sm">
41+
<ArrowLeft className="w-4 h-4 mr-2 lg:mr-1" />
42+
Back to Bodhakathas
43+
</Link>
44+
</div>
45+
<article className="prose prose-ochre max-w-none bg-white p-8 rounded-xl shadow-sm border border-gray-100">
46+
<div className="mb-6 border-b border-gray-100 pb-4">
3347
<div className="flex items-center space-x-2 mb-2">
3448
<span className="text-xs font-bold text-white bg-ochre px-2 py-1 rounded">
3549
{article.theme}
3650
</span>
3751
</div>
38-
<h1 className="text-2xl font-bold text-gray-800">{article.title_english}</h1>
39-
<h2 className="text-xl text-ochre font-serif">{article.title_hindi}</h2>
52+
<h1 className="text-3xl font-bold text-gray-800 mb-2">{article.title_english}</h1>
53+
<h2 className="text-2xl text-ochre font-serif">{article.title_hindi}</h2>
4054
</div>
41-
</div>
42-
</div>
4355

44-
{/* Right: Text */}
45-
<div className="w-full lg:w-1/2 flex-1 overflow-y-auto pr-2 custom-scrollbar">
46-
<article className="prose prose-ochre max-w-none bg-white p-6 rounded-lg shadow-sm border border-gray-100">
4756
<h3 className="text-lg font-bold text-gray-500 mb-4">Core Teaching</h3>
4857
<ChapterTextViewer text={dummyText} />
58+
59+
{/* Mobile Only: Reference Videos inside card */}
60+
<div className="lg:hidden mt-8 pt-6 border-t border-gray-100">
61+
<ReferenceVideos videos={videos} />
62+
</div>
4963
</article>
5064
</div>
65+
66+
{/* Right: Reference Videos (Secondary) - Desktop Only Sidebar */}
67+
<div className="hidden lg:block w-full lg:w-1/3 flex-none custom-scrollbar">
68+
<ReferenceVideos videos={videos} />
69+
</div>
5170
</div>
5271
);
5372
}

‎web/src/app/bodhakatha/page.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import { Lightbulb } from 'lucide-react';
44

55
export default function BodhakathaPage() {
66
return (
7-
<div className="max-w-4xl mx-auto space-y-8 pt-6">
8-
<div className="text-center space-y-2">
9-
<div className="w-16 h-16 bg-ochre/10 rounded-full flex items-center justify-center mx-auto mb-4 text-ochre">
10-
<Lightbulb className="w-8 h-8" />
7+
<div className="max-w-4xl mx-auto space-y-6 pt-6">
8+
<div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
9+
<div className="w-12 h-12 bg-ochre/10 rounded-full flex items-center justify-center text-ochre flex-none">
10+
<Lightbulb className="w-6 h-6" />
11+
</div>
12+
<div>
13+
<h1 className="text-2xl font-bold text-ochre">Bodhakatha</h1>
14+
<p className="text-sm text-gray-500 font-serif italic">"Instructional Stories & Wisdom"</p>
1115
</div>
12-
<h1 className="text-3xl font-bold text-ochre">Bodhakatha</h1>
13-
<p className="text-gray-500 font-serif italic">"Instructional Stories & Wisdom"</p>
1416
</div>
1517

1618
<div className="grid gap-6">
@@ -30,9 +32,7 @@ export default function BodhakathaPage() {
3032
<h3 className="text-lg text-gray-400 font-serif">
3133
{article.title_hindi}
3234
</h3>
33-
<p className="text-gray-600 text-sm mt-2">
34-
{article.description}
35-
</p>
35+
3636
</div>
3737
</Link>
3838
))}

‎web/src/app/leela/[articleId]/page.tsx‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import leelaArticles from '@/data/leela_articles.json';
2-
import VideoPlayer from '@/components/features/VideoPlayer';
2+
import ReferenceVideos from '@/components/features/ReferenceVideos';
33
import ChapterTextViewer from '@/components/features/ChapterTextViewer';
44

55
// Server Component
@@ -9,6 +9,9 @@ export async function generateStaticParams() {
99
}));
1010
}
1111

12+
import Link from 'next/link';
13+
import { ArrowLeft } from 'lucide-react';
14+
1215
export default async function LeelaDetailPage({ params }: { params: Promise<{ articleId: string }> }) {
1316
const { articleId } = await params;
1417
const article = leelaArticles.find((c) => c.id.toString() === articleId);
@@ -17,32 +20,48 @@ export default async function LeelaDetailPage({ params }: { params: Promise<{ ar
1720
return <div>Article not found</div>;
1821
}
1922

20-
// Reuse the mock text logic but could be unique per Leela
23+
// Reuse the mock text logic
2124
const dummyText = Array(15).fill(
2225
"In this beautiful Leela, we see how Sai Baba's method of teaching was unique. He did not give long discourses but taught through example. 'Shraddha' and 'Saburi' were his two coins of Dakshina."
2326
).join("\n\n");
2427

28+
const videos = [{
29+
id: article.id,
30+
youtube_id: article.youtube_id,
31+
title: "Leela Narration",
32+
description: article.description
33+
}];
34+
2535
return (
26-
<div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-8rem)]">
27-
{/* Left: Video */}
28-
<div className="w-full lg:w-1/2 flex-none">
29-
<div className="lg:sticky lg:top-8 space-y-4">
30-
<VideoPlayer videoId={article.youtube_id} />
31-
32-
<div className="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
33-
<h1 className="text-2xl font-bold text-gray-800">{article.title_english}</h1>
34-
<h2 className="text-xl text-ochre font-serif">{article.title_hindi}</h2>
35-
</div>
36+
<div className="flex flex-col lg:flex-row gap-8 h-[calc(100vh-8rem)] pt-6">
37+
{/* Left: Text Content (Prominent) - First on mobile and desktop */}
38+
<div className="w-full lg:w-2/3 flex-1 overflow-y-auto pr-4 custom-scrollbar">
39+
<div className="mb-4">
40+
<Link href="/leela" className="inline-flex items-center transition-colors px-4 py-2 bg-white border border-gray-200 rounded-full text-gray-700 font-medium shadow-sm hover:bg-gray-50 lg:bg-transparent lg:border-0 lg:shadow-none lg:p-0 lg:text-gray-500 lg:hover:text-ochre lg:hover:bg-transparent text-sm">
41+
<ArrowLeft className="w-4 h-4 mr-2 lg:mr-1" />
42+
Back to Leelas
43+
</Link>
3644
</div>
37-
</div>
45+
<article className="prose prose-ochre max-w-none bg-white p-8 rounded-xl shadow-sm border border-gray-100">
46+
<div className="mb-6 border-b border-gray-100 pb-4">
47+
<h1 className="text-3xl font-bold text-gray-800 mb-2">{article.title_english}</h1>
48+
<h2 className="text-2xl text-ochre font-serif">{article.title_hindi}</h2>
49+
</div>
3850

39-
{/* Right: Text */}
40-
<div className="w-full lg:w-1/2 flex-1 overflow-y-auto pr-2 custom-scrollbar">
41-
<article className="prose prose-ochre max-w-none bg-white p-6 rounded-lg shadow-sm border border-gray-100">
4251
<h3 className="text-lg font-bold text-gray-500 mb-4">{article.chapter} Narrative</h3>
4352
<ChapterTextViewer text={dummyText} />
53+
54+
{/* Mobile Only: Reference Videos inside card */}
55+
<div className="lg:hidden mt-8 pt-6 border-t border-gray-100">
56+
<ReferenceVideos videos={videos} />
57+
</div>
4458
</article>
4559
</div>
60+
61+
{/* Right: Reference Videos (Secondary) - Desktop Only Sidebar */}
62+
<div className="hidden lg:block w-full lg:w-1/3 flex-none custom-scrollbar">
63+
<ReferenceVideos videos={videos} />
64+
</div>
4665
</div>
4766
);
4867
}

‎web/src/app/leela/page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import { Footprints } from 'lucide-react';
44

55
export default function LeelaPage() {
66
return (
7-
<div className="max-w-4xl mx-auto space-y-8 pt-6">
8-
<div className="text-center space-y-2">
9-
<div className="w-16 h-16 bg-ochre/10 rounded-full flex items-center justify-center mx-auto mb-4 text-ochre">
10-
<Footprints className="w-8 h-8" />
7+
<div className="max-w-4xl mx-auto space-y-6 pt-6">
8+
<div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
9+
<div className="w-12 h-12 bg-ochre/10 rounded-full flex items-center justify-center text-ochre flex-none">
10+
<Footprints className="w-6 h-6" />
11+
</div>
12+
<div>
13+
<h1 className="text-2xl font-bold text-ochre">Leela</h1>
14+
<p className="text-sm text-gray-500 font-serif italic">"Devine plays of the Lord"</p>
1115
</div>
12-
<h1 className="text-3xl font-bold text-ochre">Leela</h1>
13-
<p className="text-gray-500 font-serif italic">"Devine plays of the Lord"</p>
1416
</div>
1517

1618
<div className="grid gap-6">

‎web/src/app/live/page.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,18 @@ export default function LivePage() {
2929
}, [isPlaying, closePlayer, router]);
3030

3131
return (
32-
<div className="max-w-6xl mx-auto space-y-12 pt-6">
32+
<div className="max-w-6xl mx-auto space-y-6 pt-6">
3333

3434
{/* Header */}
35-
36-
35+
<div className="flex items-center space-x-4 pb-2 border-b border-gray-100">
36+
<div className="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center text-red-600 flex-none">
37+
<Radio className="w-6 h-6" />
38+
</div>
39+
<div>
40+
<h1 className="text-2xl font-bold text-gray-800">Live Darshan</h1>
41+
<p className="text-sm text-gray-500 font-serif italic">"Experience the divine presence"</p>
42+
</div>
43+
</div>
3744
{/* Live Banner */}
3845
{liveData.live_status && (
3946
<div className="bg-black rounded-xl overflow-hidden shadow-2xl">

‎web/src/components/features/ReferenceVideos.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import VideoPlayer from './VideoPlayer';
5+
import { X, PlayCircle } from 'lucide-react';
6+
7+
interface VideoData {
8+
id: string | number;
9+
youtube_id: string;
10+
title?: string;
11+
description?: string;
12+
}
13+
14+
interface ReferenceVideosProps {
15+
videos: VideoData[];
16+
}
17+
18+
export default function ReferenceVideos({ videos }: ReferenceVideosProps) {
19+
const [selectedVideo, setSelectedVideo] = useState<VideoData | null>(null);
20+
21+
return (
22+
<div className="w-full">
23+
<h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider flex items-center mb-4">
24+
<span className="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
25+
Reference Videos
26+
</h3>
27+
28+
{/* Mobile View: Horizontal Thumbnails */}
29+
<div className="lg:hidden flex space-x-4 overflow-x-auto pb-4 custom-scrollbar">
30+
{videos.map((video) => (
31+
<div
32+
key={video.id}
33+
className="flex-none w-40 cursor-pointer group"
34+
onClick={() => setSelectedVideo(video)}
35+
>
36+
<div className="aspect-video bg-gray-100 rounded-lg overflow-hidden relative shadow-sm border border-gray-200">
37+
<img
38+
src={`https://img.youtube.com/vi/${video.youtube_id}/mqdefault.jpg`}
39+
alt="Video thumbnail"
40+
className="w-full h-full object-cover"
41+
/>
42+
<div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/40 transition">
43+
<PlayCircle className="w-8 h-8 text-white/90" />
44+
</div>
45+
</div>
46+
<p className="mt-2 text-xs text-gray-700 font-medium line-clamp-2">
47+
{video.description || video.title || 'Watch Video'}
48+
</p>
49+
</div>
50+
))}
51+
</div>
52+
53+
{/* Desktop View: Vertical List with Players */}
54+
<div className="hidden lg:flex flex-col space-y-6">
55+
{videos.map((video) => (
56+
<div key={video.id} className="bg-white p-3 rounded-lg shadow-sm border border-gray-100">
57+
<VideoPlayer videoId={video.youtube_id} />
58+
{(video.description || video.title) && (
59+
<div className="mt-3">
60+
{video.title && <h4 className="font-bold text-gray-800 text-sm mb-1">{video.title}</h4>}
61+
{video.description && <p className="text-sm text-gray-600 line-clamp-3">{video.description}</p>}
62+
</div>
63+
)}
64+
</div>
65+
))}
66+
</div>
67+
68+
{/* Mobile Video Modal */}
69+
{selectedVideo && (
70+
<div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4 lg:hidden animate-in fade-in duration-200">
71+
<div className="relative w-full max-w-lg bg-black rounded-lg overflow-hidden shadow-2xl">
72+
<button
73+
onClick={() => setSelectedVideo(null)}
74+
className="absolute top-2 right-2 text-white/80 hover:text-white z-10 p-2 bg-black/50 rounded-full"
75+
>
76+
<X className="w-5 h-5" />
77+
</button>
78+
<div className="w-full">
79+
<VideoPlayer videoId={selectedVideo.youtube_id} />
80+
</div>
81+
{(selectedVideo.description || selectedVideo.title) && (
82+
<div className="p-4 bg-gray-900 text-white">
83+
{selectedVideo.title && <h4 className="font-bold mb-1">{selectedVideo.title}</h4>}
84+
{selectedVideo.description && <p className="text-sm text-gray-300">{selectedVideo.description}</p>}
85+
</div>
86+
)}
87+
</div>
88+
</div>
89+
)}
90+
</div>
91+
);
92+
}

0 commit comments

Comments
 (0)