Skip to content

Commit 0261312

Browse files
Rishav-02Rishav-02
committed
Tailwind CSS File
1 parent 16a585c commit 0261312

15 files changed

+646
-81
lines changed

‎postcss.config.js

+6
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.css

-38
This file was deleted.

‎src/App.test.js

-8
This file was deleted.

‎src/components/Category.jsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { categories } from "../data/data.js";
2+
3+
const Category = () => {
4+
return (
5+
//Main div container
6+
<div className="max-w-[1640px] m-auto px-4 pt-8">
7+
8+
<h1 className="text-green-500 font-bold text-4xl text-center">
9+
Select the Category
10+
</h1>
11+
{/* Categories, this div control image and name change */}
12+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 py-8">
13+
14+
{/* key={index} to remove warning */}
15+
{/* Inside this div content and images */}
16+
{categories.map((item, index) => (
17+
<div
18+
key={index}
19+
className="bg-gray-200 rounded-lg p-4 flex justify-between items-center"
20+
>
21+
<h2 className="font-bold sm:text-xl ">{item.name}</h2>
22+
<img src={item.image} alt={item.id} className="w-20" />
23+
</div>
24+
))}
25+
</div>
26+
</div>
27+
);
28+
};
29+
30+
31+
export default Category;

‎src/components/Food.jsx

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React, { useState } from "react";
2+
import { data } from "../data/data.js";
3+
4+
const Food = () => {
5+
6+
//State Hook
7+
const [foods, setFoods] = useState(data);
8+
9+
//Filter by Type burgers/pizza/etc
10+
const filterType = (type) => {
11+
setFoods(
12+
data.filter((item) => {
13+
return item.category === type;
14+
})
15+
);
16+
};
17+
18+
//Filter by Price
19+
const filterPrice = (price) => {
20+
setFoods(
21+
data.filter((item) => {
22+
return item.price === price;
23+
})
24+
);
25+
};
26+
27+
28+
return (
29+
<div className="max-w-[1640px] m-auto px-4 py-12 ">
30+
<h1 className="text-black-600 font-bold text-4xl text-center">
31+
Top Rated Menu Items{" "}
32+
</h1>
33+
34+
{/* Filter Row */}
35+
<div className="flex flex-col lg:flex-row justify-between">
36+
37+
{/* Filter Type */}
38+
<div>
39+
<p className="font-bold text-gray-700 pl-2 pt-4">Filter Type</p>
40+
{/* This div take care of buttons and all functions */}
41+
<div className="flex justify-between flex-wrap w-full ">
42+
{/* when click button(All) then setFoods function run and show all data */}
43+
<button
44+
onClick={() => setFoods(data)}
45+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white "
46+
>
47+
All
48+
</button>
49+
{/* when click rest of 4 buttons then filterType function run and filter the data */}
50+
<button
51+
onClick={() => filterType("burger")}
52+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white"
53+
>
54+
Burger
55+
</button>
56+
<button
57+
onClick={() => filterType("pizza")}
58+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white "
59+
>
60+
Pizza
61+
</button>
62+
<button
63+
onClick={() => filterType("salad")}
64+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white "
65+
>
66+
Salad
67+
</button>
68+
<button
69+
onClick={() => filterType("chicken")}
70+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white "
71+
>
72+
Chicken
73+
</button>
74+
<button
75+
onClick={() => filterType("dessert")}
76+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white "
77+
>
78+
Dessert
79+
</button>
80+
</div>
81+
</div>
82+
83+
{/* Filter Price */}
84+
<div>
85+
<p className="font-bold text-gray-700 flex-wrap pl-2 pt-4">Filter Price</p>
86+
<div className="flex justify-between flex-wrap w-full">
87+
<button
88+
onClick={() => filterPrice("Rs 199")}
89+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white"
90+
>
91+
Rs 199
92+
</button>
93+
<button
94+
onClick={() => filterPrice("Rs 299")}
95+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white"
96+
>
97+
Rs 299
98+
</button>
99+
<button
100+
onClick={() => filterPrice("Rs 399")}
101+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white"
102+
>
103+
Rs 399
104+
</button>
105+
<button
106+
onClick={() => filterPrice("Rs 499")}
107+
className="m-1 border-green-500 text-green-500 focus:bg-yellow-500 focus:text-white"
108+
>
109+
Rs 499
110+
</button>
111+
</div>
112+
</div>
113+
</div>
114+
115+
{/* Display food images, All images control by this div */}
116+
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 pt-8">
117+
{foods.map((item, index) => (
118+
119+
<div
120+
// hover:scale-105 and duration-300 tells when we hover on image then images react after 0.3s or 300milliseconds duration.
121+
key={index}
122+
className="border shadow-lg cursor-pointer rounded-lg hover:scale-105 duration-300"
123+
>
124+
<img
125+
src={item.image}
126+
alt={item.name}
127+
className="w-full h-[300px] object-cover rounded-t-lg"
128+
/>
129+
{/* Inside This div name and price are take */}
130+
<div className="flex justify-between px-2 py-4">
131+
<p className="font-bold">{item.name}</p>
132+
<p>
133+
<span className="bg-orange-500 text-white p-1 rounded-full flex text-center">
134+
{item.price}
135+
</span>
136+
</p>
137+
</div>
138+
</div>
139+
))}
140+
</div>
141+
</div>
142+
);
143+
};
144+
145+
export default Food;

‎src/components/HeadlineCards.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const HeadlineCards = () => {
2+
return (
3+
// Main div container,if app resize to medium then grid divides into 3 columns
4+
<div className="max-w-[1640px] mx-auto p-4 py-8 grid md:grid-cols-3 gap-4">
5+
6+
{/* All 3 Cards have same className and properties */}
7+
{/* Card 1 */}
8+
<div className="rounded-xl relative">
9+
{/* Overlay, this div is for content inside First image */}
10+
<div className="absolute w-full h-full bg-black/50 rounded-xl text-white">
11+
<p className="font-bold text-2xl px-2 pt-4">Don't Starve, Just Order</p>
12+
<p className="px-2">We serve 24 X 7</p>
13+
<button className="border-white bg-white text-black mx-2 absolute bottom-4">
14+
Order Now
15+
</button>
16+
</div>
17+
<img
18+
className="max-h-[160px] md:max-h-[400px] w-full object-cover rounded-xl"
19+
src="https://images.unsplash.com/photo-1613769049987-b31b641f25b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjF8fGJyZWFrZmFzdHxlbnwwfDB8MHx8&auto=format&fit=crop&w=800&q=60"
20+
alt="card1"
21+
/>
22+
</div>
23+
24+
{/* Card 2 */}
25+
<div className="rounded-xl relative">
26+
{/* Overlay, this div is for content inside Second image */}
27+
<div className="absolute w-full h-full bg-black/50 rounded-xl text-white">
28+
<p className="font-bold text-2xl px-2 pt-4">New Restaurants</p>
29+
<p className="px-2">Added Daily</p>
30+
<button className="border-white bg-white text-black mx-2 absolute bottom-4">
31+
Order Now
32+
</button>
33+
</div>
34+
<img
35+
className="max-h-[160px] md:max-h-[400px] w-full object-cover rounded-xl"
36+
src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGJicXxlbnwwfDB8MHx8&auto=format&fit=crop&w=800&q=60"
37+
alt="card2" />
38+
</div>
39+
40+
{/* Card 3 */}
41+
<div className="rounded-xl relative">
42+
{/* Overlay, this div is for content inside Third image */}
43+
<div className="absolute w-full h-full bg-black/50 rounded-xl text-white">
44+
<p className="font-bold text-2xl px-2 pt-4">We Deliver Desserts Too</p>
45+
<p className="px-2">Tasty Treats</p>
46+
<button className="border-white bg-white text-black mx-2 absolute bottom-4">
47+
Order Now
48+
</button>
49+
</div>
50+
<img
51+
className="max-h-[160px] md:max-h-[400px] w-full object-cover rounded-xl"
52+
src="https://images.unsplash.com/photo-1559715745-e1b33a271c8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGRlc3NlcnR8ZW58MHwwfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
53+
alt="card3" />
54+
</div>
55+
56+
</div>
57+
);
58+
};
59+
60+
61+
export default HeadlineCards;

‎src/components/Hero.jsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const Hero = () => {
2+
return (
3+
// This div capture whole image if we will not give 1640px then after increase size of app the image contracts.
4+
<div className="max-w-[1640px] mx-auto p-4">
5+
{/* this div take care of max-height and position */}
6+
<div className="max-h-[500px] relative">
7+
8+
{/* Overlay, this div take care of content inside image */}
9+
<div className="absolute w-full h-full text-gray-200 max-h-[500px] bg-black/40 flex flex-col justify-center">
10+
11+
<h1 className="px-4 text-4xl sm:text-5xl md:text-6xl lg:text-6xl font-bold text-yellow-500">
12+
The<span> Best</span>
13+
</h1>
14+
15+
<h1 className="px-5 text-4xl sm:text-5xl md:text-6xl lg:text-6xl font-bold text-green-500">
16+
Foods<span> Delivered</span>
17+
</h1>
18+
</div>
19+
<img
20+
className="w-full max-h-[500px] object-cover"
21+
src="https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg"
22+
alt="first"
23+
/>
24+
</div>
25+
</div>
26+
);
27+
};
28+
29+
30+
export default Hero;

0 commit comments

Comments
 (0)