/
BannerBrand1.tsx
57 lines (52 loc) · 1.49 KB
/
BannerBrand1.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import * as React from "react";
import { Address } from "../types/Address";
import Cta from "./Cta";
export interface BannerProps {
name?: string;
address?: Address;
}
const renderPrettyAddress = (address?: Address) => {
return (
<>
{address && (
<span>
{address.line1} in {address.city}, {address.region}
</span>
)}
</>
);
};
const BannerBrand1 = (props: BannerProps) => {
const { name, address } = props;
return (
<>
<div
className={`relative z-10 w-full bg-cover bg-center h-96 bg-[url(/src/assets/images/banner.avif)] `}
>
<div className="absolute left-0 right-0 flex flex-col items-center">
<div className="w-96 my-8 rounded-xl bg-primary border-8 shadow-xl border-amber-600 px-4 py-2 text-center">
<div>
<h1 className="text-white text-3xl font-semibold">{name}</h1>
<p className="text-lg pt-2 text-white font-semibold">
{renderPrettyAddress(address)}
</p>
</div>
<div className="flex py-3 justify-between">
<Cta
buttonText="Order Pickup"
url="#"
style="text-orange bg-white"
></Cta>
<Cta
buttonText="Order Delivery"
url="#"
style="text-orange bg-white"
></Cta>
</div>
</div>
</div>
</div>
</>
);
};
export default BannerBrand1;