UI init

src/App.tsx

@@ -1,9 +1,6 @@
+import Home from './screens/Home'
 const App = () => {
-	return (
-		<div>
-			<h1 className="text-3xl">Init Break</h1>
-		</div>
-	)
+	return <Home />
 }
 
 export default App

src/components/Button.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import './button.css'
+type ButtonProps = {
+	text: string
+	anotherText?: string
+	onclick: () => void
+	width: number
+	height: number
+	size: number
+	padding?: number
+}
+export default function Button({
+	text,
+	anotherText,
+	onclick,
+	width,
+	height,
+	size,
+	padding = 10,
+}: ButtonProps) {
+	const [isPlaying, setIsPlaying] = useState(false)
+	function toggleStartStop() {
+		setIsPlaying(!isPlaying)
+		onclick()
+	}
+	return (
+		<div className="flex items-end">
+			<button
+				className="button text-white text-2xl flex justify-center items-center"
+				onClick={toggleStartStop}
+				style={{
+					width: `${width}rem`,
+					height: `${height}rem`,
+					fontSize: `${size}rem`,
+					padding: `${padding}px`,
+				}}
+			>
+				{isPlaying ? <h1> {text}</h1> : <h1> {anotherText}</h1>}
+			</button>
+		</div>
+	)
+}

src/components/IconButton.tsx

@@ -0,0 +1,32 @@
+type IconsProps = {
+	activeIcon?: string
+	inActiveIcon?: string
+	size?: number
+	onChange: (isActive: boolean) => void
+	isActive?: boolean
+}
+
+export default function IconButton({
+	activeIcon,
+	inActiveIcon,
+	size = 40,
+	isActive,
+	onChange,
+}: IconsProps) {
+	function handleClick() {
+		onChange(!isActive)
+	}
+	return (
+		<button
+			onClick={handleClick}
+			className="mx-3"
+			style={{ height: `${size}px`, width: `${size}px` }}
+		>
+			{isActive ? (
+				<img src={activeIcon} className="w-full" />
+			) : (
+				<img src={inActiveIcon} className="w-full" />
+			)}
+		</button>
+	)
+}

src/components/InputBar.tsx

@@ -0,0 +1,18 @@
+import './inputBar.css'
+import InputBg from '../assets/background/inputbg.png'
+
+type InputBarProps = {
+	value: number
+}
+export default function InputBar({ value }: InputBarProps) {
+	return (
+		<div>
+			<input
+				type="text"
+				className="input bg-no-repeat bg-contain px-3 text-black"
+				style={{ backgroundImage: `url(${InputBg})` }}
+				value={value}
+			/>
+		</div>
+	)
+}

src/components/MusicItem.tsx

@@ -0,0 +1,38 @@
+export type Music = {
+	audio: HTMLAudioElement
+	title: string
+	artist: string
+	cover: string
+}
+
+type MusicItemProps = {
+	music: Music
+	onChange: (music: Music) => void
+}
+
+const MusicItem = ({ music, onChange }: MusicItemProps) => {
+	function playAudio() {
+		onChange(music)
+	}
+
+	return (
+		<div
+			onClick={playAudio}
+			style={{ cursor: 'pointer' }}
+			className=" w-[80%] mb-1 p-2 px-4 flex  h-16 border-b items-center border-[rgb(255,255,255,23%)]"
+		>
+			<img
+				src={music.cover}
+				style={{ height: '3rem', width: '3rem' }}
+				className="rounded mr-4"
+			/>
+			<div>
+				<h1 className="pb-[0.3rem] text-[0.6rem] font-['eightBit']">
+					{music.title}
+				</h1>
+				<div className="  text-[0.4rem] font-['eightBit']">{music.artist}</div>
+			</div>
+		</div>
+	)
+}
+export default MusicItem