Skip to content

Commit 8f37b11

Browse files
Vidhi KatariaVidhi Kataria
Vidhi Kataria
authored and
Vidhi Kataria
committed
background linear gradient fixed
1 parent 5725c55 commit 8f37b11

File tree

4 files changed

+336
-28
lines changed

4 files changed

+336
-28
lines changed

‎pages/Home/ZomatoCategories.tsx

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from "react";
2+
3+
import { useRouter } from "next/router";
4+
import {
5+
Box,
6+
Center,
7+
FlatList,
8+
Image,
9+
Pressable,
10+
useBreakpointValue,
11+
VStack,
12+
} from "native-base";
13+
14+
const list = [
15+
{
16+
imageUri:
17+
"https://b.zmtcdn.com/webFrontend/64dffaa58ffa55a377cdf42b6a690e721585809275.png?fit=around|402:360&crop=402:360;*,*",
18+
text: "Order Food Online",
19+
},
20+
{
21+
imageUri:
22+
"https://b.zmtcdn.com/webFrontend/95f005332f5b9e71b9406828b63335331585809309.png?fit=around|402:360&crop=402:360;*,*",
23+
text: "Go out for a meal",
24+
},
25+
{
26+
imageUri:
27+
"https://b.zmtcdn.com/webFrontend/b256d0dd8a29f9e0623ecaaea910534d1585809352.png?fit=around|402:360&crop=402:360;*,*",
28+
text: "Zomato Pro",
29+
},
30+
{
31+
imageUri:
32+
"https://b.zmtcdn.com/webFrontend/8ff4212b71b948ed5b6d2ce0d2bc99981594031410.png?fit=around|402:360&crop=402:360;*,*",
33+
text: "Nightlife & Clubs",
34+
},
35+
];
36+
37+
function ZomatoCategories() {
38+
const router = useRouter();
39+
const noColumn = useBreakpointValue({
40+
base: 2,
41+
md: 4,
42+
});
43+
return (
44+
<FlatList
45+
w="90%"
46+
mx="4"
47+
mt="8"
48+
numColumns={noColumn}
49+
key={noColumn}
50+
data={list}
51+
keyExtractor={(item, index) => "key" + index}
52+
ItemSeparatorComponent={() => <Box w="10" h="10" />}
53+
columnWrapperStyle={{
54+
justifyContent: "space-between",
55+
}}
56+
renderItem={({ item, index }) => (
57+
<Pressable
58+
key={index}
59+
onPress={() => {
60+
router.push("/goformeal");
61+
}}
62+
width={{ base: "49%", md: "22%" }}
63+
>
64+
<Card item={item} />
65+
</Pressable>
66+
)}
67+
/>
68+
);
69+
}
70+
71+
function Card(props: any) {
72+
return (
73+
<VStack
74+
w="100%"
75+
alignItems="center"
76+
borderWidth={1}
77+
borderColor="coolGray.200"
78+
borderRadius="lg"
79+
>
80+
<Image
81+
borderTopLeftRadius="lg"
82+
borderTopRightRadius="lg"
83+
w="100%"
84+
h={220}
85+
source={{
86+
uri: props.item.imageUri,
87+
}}
88+
alt="Alternate Text"
89+
/>
90+
<Center
91+
h={20}
92+
py={2}
93+
_text={{ fontSize: "lg", textAlign: "center" }}
94+
color="coolGray.800"
95+
fontWeight="extrabold"
96+
>
97+
{props.item.text}
98+
</Center>
99+
</VStack>
100+
);
101+
}
102+
103+
export default ZomatoCategories;

‎pages/Home/index.tsx

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import React, { useState } from "react";
2+
import {
3+
Box,
4+
Center,
5+
CloseIcon,
6+
Divider,
7+
HamburgerIcon,
8+
Heading,
9+
HStack,
10+
Icon,
11+
Input,
12+
Pressable,
13+
Image,
14+
Text,
15+
useBreakpointValue,
16+
VStack,
17+
View,
18+
} from "native-base";
19+
import ZomatoCategories from "./ZomatoCategories";
20+
// import Footer from "../../components/Footer";
21+
// import Image from "next/image";
22+
import { AntDesign, Entypo, FontAwesome } from "@native-base/icons";
23+
24+
// const img = require("/public/images/tomatoWhite.png");
25+
export default function Home() {
26+
const isTablet = useBreakpointValue({
27+
base: false,
28+
md: true,
29+
});
30+
31+
const [isSlideOpen, setSlideOpen] = useState(false);
32+
console.log("HEREEEE");
33+
return (
34+
<Box w="100%">
35+
<VStack
36+
alignItems="center"
37+
w="100%"
38+
bg="coolGray.50"
39+
display={!isSlideOpen ? "flex" : "none"}
40+
>
41+
<VStack w="100%" h={500} nativeID="1234">
42+
{/* <Image
43+
position="absolute"
44+
zIndex="-1"
45+
source={{
46+
uri: "https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png",
47+
}}
48+
alt="Alternate Text"
49+
width="100%"
50+
height={500}
51+
/> */}
52+
{/* {isTablet ? (
53+
<HStack
54+
alignItems="center"
55+
justifyContent="space-between"
56+
mx={{ base: 10, md: 20, lg: 40 }}
57+
py={4}
58+
>
59+
<Pressable flexDir="row" alignItems="center">
60+
<Icon as={FontAwesome} name="mobile" size="xs" color="white" />
61+
<Text color="white" fontWeight="medium" fontSize="md">
62+
Get the App
63+
</Text>
64+
</Pressable>
65+
66+
<HStack space={{ base: "5", sm: "10" }} alignItems="center">
67+
<Pressable>
68+
<Text color="white" fontWeight="medium" fontSize="md">
69+
Add restaurant
70+
</Text>
71+
</Pressable>
72+
<Pressable>
73+
<Text color="white" fontWeight="medium" fontSize="md">
74+
Log in
75+
</Text>
76+
</Pressable>
77+
<Pressable>
78+
<Text color="white" fontWeight="medium" fontSize="md">
79+
Sign up
80+
</Text>
81+
</Pressable>
82+
</HStack>
83+
</HStack>
84+
) : (
85+
<HStack>
86+
<Pressable m="3" onPress={() => setSlideOpen(true)}>
87+
<HamburgerIcon color="white" />
88+
</Pressable>
89+
</HStack>
90+
)} */}
91+
<Center mt={20} w="100%">
92+
{/* <Image
93+
width={80}
94+
height={16}
95+
source={{ uri: img.default.src }}
96+
alt="Alternate Text"
97+
/> */}
98+
<View
99+
textAlign="center"
100+
bg={{ base: "red.800", md: "green.300", lg: "blue.300" }}
101+
// w={{ base: "90%", md: "60%", lg: "48%" }}
102+
// color="white"
103+
// fontSize={"3xl"}
104+
// fontSize={{ base: "xl", md: "3xl", lg: "3xl", xl: "4xl" }}
105+
// fontSize={["3xl", "3xl", "4xl"]}
106+
fontWeight="normal"
107+
lineHeight="xs"
108+
mt={10}
109+
// mx={{ base: 10 }}
110+
>
111+
Discover the best food &amp; drinks in Delhi NCR
112+
</View>
113+
114+
{/* <HStack
115+
bg="white"
116+
space="3"
117+
alignItems="center"
118+
w={{ base: "90%", md: "60%", lg: "48%" }}
119+
py={2}
120+
mt={12}
121+
borderRadius="lg"
122+
>
123+
<Pressable flexDir="row" alignItems="center">
124+
<Icon
125+
ml="2"
126+
as={Entypo}
127+
name="location-pin"
128+
size="6"
129+
color="red.400"
130+
/>
131+
<Text color="coolGray.500" fontSize="md" mx="1">
132+
Bangla Sahib Gurdwara |
133+
</Text>
134+
<Icon
135+
as={AntDesign}
136+
name="caretdown"
137+
size="3"
138+
color="coolGray.600"
139+
/>
140+
<Divider h={5} w={0.5} ml={2} orientation="vertical" />
141+
</Pressable>
142+
<HStack space="3" alignItems="center" flex={1}>
143+
<Icon
144+
ml={3}
145+
as={AntDesign}
146+
name="search1"
147+
size="5"
148+
color="coolGray.500"
149+
/>
150+
<Input
151+
w="100%"
152+
_hover={{ bg: "white" }}
153+
_focus={{ bg: "white" }}
154+
color="coolGray.500"
155+
fontSize="md"
156+
flex={1}
157+
borderWidth={0}
158+
outline="undefined"
159+
/>
160+
</HStack>
161+
</HStack> */}
162+
</Center>
163+
</VStack>
164+
{/* <ZomatoCategories /> */}
165+
{/* <Footer /> */}
166+
</VStack>
167+
{/* <Box
168+
w="100%"
169+
h="100vh"
170+
bg="white"
171+
display={isSlideOpen ? "flex" : "none"}
172+
>
173+
<HStack
174+
justifyContent="space-between"
175+
my="6"
176+
px="4"
177+
alignItems="center"
178+
>
179+
<Pressable onPress={() => setSlideOpen(false)}>
180+
<CloseIcon size="xs" color="black" />
181+
</Pressable>
182+
<Heading fontWeight="black" color="black" size="xl" italic>
183+
Tomato
184+
</Heading>
185+
</HStack>
186+
<VStack py="2" px="7" space="8" mt="8">
187+
<Pressable>
188+
<Text color="trueGray.500" fontSize="xl">
189+
Add restaurant
190+
</Text>
191+
</Pressable>
192+
<Pressable>
193+
<Text color="trueGray.500" fontSize="xl">
194+
Log in
195+
</Text>
196+
</Pressable>
197+
<Pressable>
198+
<Text color="trueGray.500" fontSize="xl">
199+
Sign up
200+
</Text>
201+
</Pressable>
202+
</VStack>
203+
</Box> */}
204+
</Box>
205+
);
206+
}

‎pages/_app.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ declare module "native-base" {
1313

1414
const config = {
1515
dependencies: {
16-
"linear-gradient": require("react-native-web-linear-gradient")
17-
.LinearGradient,
16+
"linear-gradient": require("react-native-web-linear-gradient").default,
1817
},
1918
};
2019
function MyApp({ Component, pageProps }: AppProps) {

‎src/new-components/markdown-components/CodeBlock/Showcase.tsx

+26-26
Original file line numberDiff line numberDiff line change
@@ -173,38 +173,38 @@ export const Showcase = (
173173
rounded="lg"
174174
// _dark={{ borderColor: "blueGray.800" }}
175175
// _light={{ borderColor: "blueGray.300" }}
176-
_light={{
177-
bg: {
178-
linearGradient: {
179-
colors: lightModeGradientArray,
180-
start: [0, 0],
181-
end: [1, 0],
182-
},
183-
},
184-
}}
185-
_dark={{
186-
bg: {
187-
linearGradient: {
188-
colors: darkModeGradientArray,
189-
start: [0, 0],
190-
end: [1, 0],
191-
},
192-
},
193-
}}
194176
// _light={{
195-
// style: {
196-
// // @ts-ignore
197-
// backgroundImage:
198-
// "linear-gradient(135deg," + lightModeGradientArray + ")",
177+
// bg: {
178+
// linearGradient: {
179+
// colors: lightModeGradientArray,
180+
// start: [0, 0],
181+
// end: [1, 0],
182+
// },
199183
// },
200184
// }}
201185
// _dark={{
202-
// style: {
203-
// // @ts-ignore
204-
// backgroundImage:
205-
// "linear-gradient(135deg," + darkModeGradientArray + ")",
186+
// bg: {
187+
// linearGradient: {
188+
// colors: darkModeGradientArray,
189+
// start: [0, 0],
190+
// end: [1, 0],
191+
// },
206192
// },
207193
// }}
194+
_light={{
195+
style: {
196+
// @ts-ignore
197+
backgroundImage:
198+
"linear-gradient(135deg," + lightModeGradientArray + ")",
199+
},
200+
}}
201+
_dark={{
202+
style: {
203+
// @ts-ignore
204+
backgroundImage:
205+
"linear-gradient(135deg," + darkModeGradientArray + ")",
206+
},
207+
}}
208208
style={{
209209
// @ts-ignore
210210
transition: "background-image 1s",

0 commit comments

Comments
 (0)