d2c-starter-kit/src/components/search/Hit.tsx at 3e67b73f4b31c2856e54c679170da1bdf4dd2fc7 · elasticpath/d2c-starter-kit · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { ProductSearchResultItems } from "./search-hit-types";
import {
  Button,
  Center,
  Flex,
  Grid,
  GridItem,
  Heading,
  Image,
  LinkBox,
  LinkOverlay,
  Text,
  useColorModeValue,
} from "@chakra-ui/react";
import { ViewOffIcon } from "@chakra-ui/icons";
import Link from "next/link";
import Price from "../product/Price";
import StrikePrice from "../product/StrikePrice";
import { useDisclosure } from "@chakra-ui/react";
import { ProductModalContainer } from "../product-modal/ProductModalContainer";

export default function HitComponent({
  hit,
}: {
  hit: ProductSearchResultItems;
}): JSX.Element {
  const { ep_price, ep_name, objectID, ep_main_image_url, ep_description } =
    hit;
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <LinkBox display="grid" gridTemplateRows="auto 1fr" h="full">
      <GridItem position="relative" overflow="hidden" pb="100%">
        {ep_main_image_url ? (
          <Image
            boxSize="100%"
            position="absolute"
            objectFit="cover"
            src={ep_main_image_url}
            alt={ep_name}
            roundedTop="lg"
          />
        ) : (
          <Center
            w="100%"
            h="100%"
            bg="gray.200"
            color="white"
            position="absolute"
          >
            <ViewOffIcon w="10" h="10" />
          </Center>
        )}
      </GridItem>
      <Grid gridTemplateRows="auto 1fr auto" gap={2} p={4}>
        <Heading size="sm">
          <Link href={`/products/${objectID}`} passHref>
            <LinkOverlay>{ep_name}</LinkOverlay>
          </Link>
        </Heading>
        <Text
          color="gray.500"
          fontWeight="semibold"
          letterSpacing="wide"
          fontSize="xs"
          mt="1"
          noOfLines={6}
        >
          {ep_description}
        </Text>
        <Flex alignItems="center">
          <Text fontSize="md" fontWeight="semibold" mt="1">
            {ep_price && (
              <Price
                price={ep_price["USD"]?.formatted_price || ""}
                currency="USD"
              />
            )}
            {ep_price["USD"].sale_prices && (
              <StrikePrice
                price={
                  ep_price["USD"].sale_prices.original_price.formatted_price
                }
                currency="USD"
              />
            )}
          </Text>
        </Flex>
        <Button
          rounded="md"
          w="full"
          mt={4}
          py="7"
          bg={useColorModeValue("brand.primary", "blue.50")}
          color={useColorModeValue("white", "gray.900")}
          _hover={{
            transform: "translateY(-2px)",
            boxShadow: "lg",
          }}
          onClick={onOpen}
        >
          Quick View
        </Button>
      </Grid>
      <ProductModalContainer
        isOpen={isOpen}
        onClose={onClose}
        productId={objectID}
      />
    </LinkBox>
  );
}