Skip to content

Commit d911166

Browse files
PattiyaYPattiyaY
committed
refactor: mobile responsive
1 parent 230b677 commit d911166

File tree

5 files changed

+75
-64
lines changed

5 files changed

+75
-64
lines changed

‎src/app/globals.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,7 @@
120120
@apply bg-background text-foreground;
121121
}
122122
}
123+
124+
@utility container {
125+
padding: 1.5rem;
126+
}

‎src/app/introduction/page.tsx

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -18,60 +18,65 @@ const chewy = Chewy({ subsets: ["latin"], weight: "400" });
1818
export default function Introduction() {
1919
return (
2020
<>
21-
<div className="flex flex-col items-center justify-center w-full">
22-
<div className="flex flex-col items-center justify-center min-h-screen gap-10 text-center">
23-
<h1
24-
className={`font-bold text-5xl text-[#113946] ${ewert.className}`}
25-
>
26-
Getting Started
27-
</h1>
28-
<Carousel className="w-full max-w-xs">
29-
<CarouselContent className="h-full">
30-
{Object.entries(guide).map(([key, item]) => (
31-
<CarouselItem key={key} className="h-[500px]">
32-
<div className="p-1 h-full">
33-
<Card className="h-full">
34-
<CardContent className="flex flex-col h-full items-center justify-center p-6 text-center space-y-4">
35-
<div className="flex flex-row gap-2 items-center justify-center">
36-
{item.image?.map((img, i) => (
37-
<div key={i} className="w-full flex justify-center">
38-
<Image
39-
src={img}
40-
alt={`${item.title} - ${i}`}
41-
width={200}
42-
height={200}
43-
className="object-contain"
44-
/>
45-
</div>
46-
))}
47-
</div>
21+
<div className="flex flex-col items-center justify-center">
22+
<div className="container w-full">
23+
<div className="flex flex-col items-center justify-center gap-10 text-center ">
24+
<h1
25+
className={`font-bold text-5xl text-[#113946] ${ewert.className}`}
26+
>
27+
Getting Started
28+
</h1>
29+
<Carousel className="w-full relative">
30+
<CarouselContent className="h-full">
31+
{Object.entries(guide).map(([key, item]) => (
32+
<CarouselItem key={key} className="h-[500px]">
33+
<div className="p-1 h-full">
34+
<Card className="h-full">
35+
<CardContent className="flex flex-col h-full items-center justify-center p-6 text-center space-y-4">
36+
<div className="flex flex-row gap-2 items-center justify-center">
37+
{item.image?.map((img, i) => (
38+
<div
39+
key={i}
40+
className="w-full flex justify-center"
41+
>
42+
<Image
43+
src={img}
44+
alt={`${item.title} - ${i}`}
45+
width={200}
46+
height={200}
47+
className="object-contain"
48+
/>
49+
</div>
50+
))}
51+
</div>
4852

49-
<span
50-
className={`text-2xl font-bold text-[#113946] ${chewy.className}`}
51-
>
52-
{item.title}
53-
</span>
54-
{item.subtitle && (
5553
<span
56-
className={`text-lg font-bold text-[#113946] ${chewy.className}`}
54+
className={`text-2xl font-bold text-[#113946] ${chewy.className}`}
5755
>
58-
{item.subtitle}
56+
{item.title}
5957
</span>
60-
)}
61-
<p
62-
className={`text-sm font-medium text-[#6D2932] ${chewy.className}`}
63-
>
64-
{item.description}
65-
</p>
66-
</CardContent>
67-
</Card>
68-
</div>
69-
</CarouselItem>
70-
))}
71-
</CarouselContent>
72-
<CarouselPrevious />
73-
<CarouselNext />
74-
</Carousel>
58+
{item.subtitle && (
59+
<span
60+
className={`text-lg font-bold text-[#113946] ${chewy.className}`}
61+
>
62+
{item.subtitle}
63+
</span>
64+
)}
65+
<p
66+
className={`text-sm font-medium text-[#6D2932] ${chewy.className}`}
67+
>
68+
{item.description}
69+
</p>
70+
</CardContent>
71+
</Card>
72+
</div>
73+
</CarouselItem>
74+
))}
75+
</CarouselContent>
76+
<CarouselPrevious className="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 z-10" />
77+
<CarouselNext className="absolute right-2 md:right-4 top-1/2 -translate-y-1/2 z-10" />
78+
</Carousel>
79+
</div>
7580
</div>
7681
</div>
7782
</>

‎src/app/page.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,20 @@ const ewert = Ewert({ subsets: ["latin"], weight: "400" });
88

99
export default function Home() {
1010
return (
11-
<div className="flex flex-col items-center justify-center w-full">
12-
<div className="flex flex-col items-center justify-center min-h-screen gap-10 text-center">
13-
<h1
14-
className={`font-bold text-5xl text-[#113946] text-center ${ewert.className}`}
15-
>
16-
Welcome To Music Station
17-
</h1>
18-
<Link href={"/introduction"}>
19-
<Button className="bg-teal-700" size="lg">
20-
Start <ChevronRight />
21-
</Button>
22-
</Link>
11+
<div className="flex flex-col items-center justify-center">
12+
<div className="container w-full">
13+
<div className="flex flex-col items-center justify-center min-h-screen gap-10 text-center">
14+
<h1
15+
className={`font-bold text-5xl text-[#113946] text-center ${ewert.className}`}
16+
>
17+
Welcome To Music Station
18+
</h1>
19+
<Link href={"/introduction"}>
20+
<Button className="bg-teal-700" size="lg">
21+
Start <ChevronRight />
22+
</Button>
23+
</Link>
24+
</div>
2325
</div>
2426
</div>
2527
);

‎src/components/AudioController.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
44

55
export default function AudioController() {
66
const audioRef = useRef<HTMLAudioElement>(null);
7-
const [isPlaying, setIsPlaying] = useState(false); // Start as false until play succeeds
7+
const [isPlaying, setIsPlaying] = useState(false);
88

99
useEffect(() => {
1010
const audio = audioRef.current;

‎src/data/guide.const.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const guide: Guide[] = [
3939
title: "Step 3",
4040
subtitle: "Play next song & previous song",
4141
description: "Press the next or previous button to play the next song",
42-
image: [nextSong, previousSong],
42+
image: [previousSong, nextSong],
4343
},
4444
{
4545
title: "Let's play some music!",

0 commit comments

Comments
 (0)