Skip to content

Commit 7269bb5

Browse files
muhammadpauzimuhammadpauzi
committed
initial commit
0 parents  commit 7269bb5

17 files changed

+1433
-0
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "my-quran-app",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
9+
"dependencies": {
10+
"@headlessui/react": "^1.4.3",
11+
"@heroicons/react": "^1.0.5",
12+
"react": "^17.0.2",
13+
"react-dom": "^17.0.2"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-react": "^1.0.7",
17+
"autoprefixer": "^10.4.2",
18+
"postcss": "^8.4.5",
19+
"tailwindcss": "^3.0.15",
20+
"vite": "^2.7.2"
21+
}
22+
}

‎postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/App.jsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import Container from './components/Container';
2+
import Heading from './components/Heading';
3+
import Input from './components/Input';
4+
import Navbar from './components/Navbar';
5+
import Player from './components/Player';
6+
import SurahCard from './components/SurahCard';
7+
8+
const surah = [
9+
{
10+
"number": 1,
11+
"name": "سُورَةُ ٱلْفَاتِحَةِ",
12+
"englishName": "Al-Faatiha",
13+
"englishNameTranslation": "The Opening",
14+
"numberOfAyahs": 7,
15+
"revelationType": "Meccan"
16+
},
17+
{
18+
"number": 2,
19+
"name": "سُورَةُ البَقَرَةِ",
20+
"englishName": "Al-Baqara",
21+
"englishNameTranslation": "The Cow",
22+
"numberOfAyahs": 286,
23+
"revelationType": "Medinan"
24+
},
25+
{
26+
"number": 3,
27+
"name": "سُورَةُ آلِ عِمۡرَانَ",
28+
"englishName": "Aal-i-Imraan",
29+
"englishNameTranslation": "The Family of Imraan",
30+
"numberOfAyahs": 200,
31+
"revelationType": "Medinan"
32+
}
33+
];
34+
35+
function App() {
36+
return (
37+
<div className="bg-gray-50 min-h-screen relative">
38+
<Navbar />
39+
<Container>
40+
<div className="flex items-center justify-between mb-5">
41+
<Heading className="text-3xl font-bold">Surah</Heading>
42+
<Input withLabel={false} placeholder="Enter a keyword..." nameAndID="keyword" className="w-72" />
43+
</div>
44+
45+
<div className="grid grid-cols-3 gap-2">
46+
{surah.map((s, i) => {
47+
return (
48+
<SurahCard {...s} key={i} />
49+
)
50+
})}
51+
</div>
52+
</Container>
53+
54+
<Player />
55+
</div>
56+
)
57+
}
58+
59+
export default App;

‎src/components/Card.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Card({ children }) {
2+
return (
3+
<div className="rounded p-4 bg-white">
4+
{children}
5+
</div>
6+
)
7+
}

‎src/components/Container.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Container({ children, withPadding = true, props }) {
2+
return (
3+
<div {...props} className={`max-w-4xl mx-auto${withPadding ? ' p-5 py-8' : ''}`} >
4+
{children}
5+
</div >
6+
);
7+
}

‎src/components/Heading.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function Heading({ tag = "h1", children, ...props }) {
2+
const element = {
3+
"h1": (<h1 {...props}> {children}</h1>),
4+
"h2": (<h2 {...props}>{children}</h2>),
5+
"h3": (<h3 {...props}>{children}</h3>),
6+
"h4": (<h4 {...props}>{children}</h4>),
7+
"h5": (<h5 {...props}>{children}</h5>),
8+
"h6": (<h6 {...props}>{children}</h6>)
9+
}
10+
return element[tag];
11+
}

‎src/components/Input.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Input({ placeholder, nameAndID, type = "text", className = "", withLabel = true, labelText }) {
2+
return (
3+
<div className="mb-3">
4+
{withLabel &&
5+
<label htmlFor={nameAndID} className="font-bold text-gray-800 mb-2">{labelText}</label>
6+
}
7+
<input type={type} name={nameAndID} id={nameAndID} placeholder={placeholder} className={`p-3 rounded border-2 border-gray-200 focus:border-green-400 outline-none transition focus:shadow-sm ${className}`} />
8+
</div>
9+
)
10+
}

‎src/components/Navbar.jsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Fragment } from 'react'
2+
import { Disclosure, Menu, Transition } from '@headlessui/react'
3+
import Container from "./Container"
4+
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
5+
6+
const navigation = [
7+
{ name: 'Home', href: '#', type: "link", current: true },
8+
{ name: 'About', href: '#', type: "link", current: false },
9+
{ name: 'Support', href: '#', type: "button", current: false },
10+
]
11+
12+
function classNames(...classes) {
13+
return classes.filter(Boolean).join(' ')
14+
}
15+
16+
export default function Navbar() {
17+
return (
18+
<Disclosure as="nav" className="py-6 px-5 bg-white">
19+
{({ open }) => (
20+
<>
21+
<Container withPadding={false}>
22+
<div className="relative flex items-center justify-between">
23+
<div className="absolute inset-y-0 right-0 flex items-center sm:hidden">
24+
{/* Mobile menu button*/}
25+
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
26+
<span className="sr-only">Open main menu</span>
27+
{open ? (
28+
<XIcon className="block h-6 w-6" aria-hidden="true" />
29+
) : (
30+
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
31+
)}
32+
</Disclosure.Button>
33+
</div>
34+
<div className="flex-1 flex items-center justify-between sm:items-stretch">
35+
<div className="flex-shrink-0 flex items-center">
36+
<a href="" className="text-xl text-black font-bold">
37+
My
38+
<span className="text-green-500">Quran</span>
39+
</a>
40+
</div>
41+
<div className="hidden sm:block sm:ml-6">
42+
<div className="flex space-x-4">
43+
{navigation.map((item) => (
44+
<a
45+
key={item.name}
46+
href={item.href}
47+
className={classNames(
48+
item.current ? 'text-green-500' : 'text-gray-800 hover:text-green-500', item.type === "button" && 'bg-green-500 text-white hover:text-white',
49+
'px-3 py-2 rounded-md text-md font-medium'
50+
)}
51+
aria-current={item.current ? 'page' : undefined}
52+
>
53+
{item.name}
54+
</a>
55+
))}
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</Container>
61+
62+
<Disclosure.Panel className="sm:hidden">
63+
<div className="px-2 pt-5 pb-3 space-y-1">
64+
{navigation.map((item) => (
65+
<Disclosure.Button
66+
key={item.name}
67+
as="a"
68+
href={item.href}
69+
className={classNames(
70+
item.current ? 'text-green-500 bg-green-100' : 'text-gray-800 hover:bg-green-100 hover:text-green-500',
71+
'block px-3 py-2 rounded-md text-base font-medium'
72+
)}
73+
aria-current={item.current ? 'page' : undefined}
74+
>
75+
{item.name}
76+
</Disclosure.Button>
77+
))}
78+
</div>
79+
</Disclosure.Panel>
80+
</>
81+
)}
82+
</Disclosure>
83+
)
84+
}

0 commit comments

Comments
 (0)