react-icons/fi#FiHeart TypeScript Examples

Networks = (): JSX.Element => {
  const { siteConfig } = useDocusaurusContext();

  const { data, error } = useSWR<Showcase[]>(
    `${siteConfig.customFields.API_URL}/showcase`,
    fetcher,
  );

  const selectedTags = useSelectedTags();
  const filteredNetworks = useFilteredNetworks(data ?? []);

  return (
    <section className="margin-top--lg margin-bottom--xl">
      {!error ? (
        selectedTags.length === 0 ? (
          <>
            <NetworkSection
              title="Our favorites"
              icon={<FiHeart />}
              iconColor="rgb(190 24 93)"
              networks={data?.filter((network) =>
                network.tags.find((tag) => tag.label === 'Favorite'),
              )}
            />
            <NetworkSection title="All networks" networks={data} />
          </>
        ) : (
          <NetworkSection
            title="Results"
            icon={<FiSearch />}
            networks={filteredNetworks}
          />
        )
      ) : (
        <div>{JSON.stringify(error)}</div>
      )}
    </section>
  );
}

Filters = (): JSX.Element => {
  const { siteConfig } = useDocusaurusContext();

  const { data, error } = useSWR<ShowcaseTag[]>(
    `${siteConfig.customFields.API_URL}/showcase/tags`,
    fetcher,
  );

  return (
    <section className="margin-top--l margin-bottom--lg container">
      {data && !error ? (
        <ul
          style={{
            padding: '0',
            display: 'flex',
            alignItems: 'center',
            flexWrap: 'wrap',
          }}
        >
          {data.map((tag, i) => {
            const { label, description, color } = tag;
            const id = `showcase_checkbox_id_${tag};`;

            return (
              <div
                key={i}
                style={{
                  boxSizing: 'border-box',
                  position: 'relative',
                  display: 'inline-flex',
                  alignItems: 'center',
                  height: '2rem',
                  marginTop: '0.5rem',
                  marginRight: '0.5rem',
                  fontSize: '0.875rem',
                  lineHeight: '1.25rem',
                  verticalAlign: 'middle',
                  userSelect: 'none',
                }}
              >
                <TagSelect
                  tag={tag}
                  id={id}
                  label={label}
                  icon={
                    tag.label === 'Favorite' ? (
                      <span
                        style={{
                          display: 'flex',
                          marginLeft: '0.5rem',
                          color: 'rgb(190 24 93)',
                        }}
                      >
                        <FiHeart />
                      </span>
                    ) : (
                      <span
                        style={{
                          backgroundColor: color,
                          width: 10,
                          height: 10,
                          borderRadius: '50%',
                          marginLeft: 8,
                        }}
                      />
                    )
                  }
                />
              </div>
            );
          })}
        </ul>
      ) : (
        <PlaceholderTagSelect />
      )}
    </section>
  );
}

HeroVideo = forwardRef((_props, ref: React.Ref<HTMLDivElement>) => {
  const videosRef = useRef<HTMLVideoElement[]>([]);

  const [currentVideo, setCurrentVideo] = useState<number>();
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    if (isInitialized || !videosRef.current) return;
    setIsInitialized(true);
    const currentVideo = randomIntFromInterval(0, 2);
    videosRef.current[currentVideo].play();
    setCurrentVideo(currentVideo);
  }, [isInitialized]);

  const onVideoEnded = useCallback(
    (i) => {
      if (!videosRef.current) return;
      const newCurrentVideo = i + 1 < videosRef.current.length ? i + 1 : 0;
      videosRef.current[newCurrentVideo].play();
      setCurrentVideo(newCurrentVideo);
    },
    [videosRef]
  );

  return (
    <Box
      ref={ref}
      css={{
        width: "100%",
        mx: "auto",
        overflow: "hidden",
        borderRadius: "4vw",
        "@bp3": {
          borderRadius: "36px",
        },
      }}>
      <Box as="figure" css={{ margin: 0, width: "100%", position: "relative" }}>
        <Box
          css={{
            position: "absolute",
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            height: "100%",
            width: "100%",
          }}>
          <Image
            layout="fill"
            objectFit="cover"
            src="/hero-videos/poster.png"
            alt="video poster"
          />
        </Box>
        {videos.map(({ src }, i) => (
          <Box
            as="video"
            onEnded={() => onVideoEnded(i)}
            key={`video-swapper-item-${i}`}
            ref={(el) => (videosRef.current[i] = el)}
            css={{
              position: "absolute",
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              objectFit: "cover",
              height: "100%",
              width: "100%",
              opacity: i === currentVideo ? 1 : 0,
              transition: "opacity 1s ease-out",
            }}
            src={src}
            muted
            playsInline
          />
        ))}
        <Box
          css={{
            position: "absolute",
            top: "$3",
            left: "$3",
            display: "flex",
            alignItems: "center",
            width: "fit-content",
          }}>
          <Badge variant="red" size="2" css={{ fontWeight: 700, mr: "$2" }}>
            Live
          </Badge>
          <Badge variant="primary" size="2" css={{ fontWeight: 700 }}>
            <Box
              as="i"
              css={{ display: "flex", alignItems: "center", mr: "$1" }}>
              <FiEye />
            </Box>
            {currentVideo !== undefined ? videos[currentVideo].views : "..."}
          </Badge>
        </Box>
        <Box
          css={{
            position: "absolute",
            bottom: "$3",
            left: "$3",
            right: "$3",
            display: "flex",
            alignItems: "center",
          }}>
          <Box
            as="input"
            placeholder="Write a comment..."
            css={{
              borderRadius: 24,
              width: "100%",
              border: 0,
              backgroundColor: "rgba(0,0,0,0.5)",
              mr: "$5",
              px: "$5",
              height: "42px",
              color: "$panel",
              fontSize: "14px",
              "&:placeholder": {
                color: "#CDCDCD",
              },
              "&:focus": {
                outline: "none",
                boxShadow: "0px 0px 0px 3px rgba(148, 60, 255, 0.3)",
                borderColor: "$violet9",
              },
            }}
          />
          <Box
            css={{
              background: "linear-gradient(180deg, #BD90F2 0%, #6e56cf 100%)",
              borderRadius: "50%",
              color: "$primary7",
              height: "42px",
              width: "42px",
              minWidth: "42px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}>
            <FiHeart />
          </Box>
        </Box>
      </Box>
      <Box
        id="background-gradient"
        css={{
          width: "100%",
          position: "absolute",
          background:
            "linear-gradient(180deg, $colors$loContrast 20%, rgba(255, 255, 255, 0) 160%)",
          height: "100%",
          top: 0,
          pointerEvents: "none",
        }}
      />
    </Box>
  );
})