react-icons/ai#AiFillWarning TypeScript Examples

The following examples show how to use react-icons/ai#AiFillWarning. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: getStatusIconAndText.ts    From nextclade with MIT License 5 votes vote down vote up 
WarningIcon = styled(AiFillWarning)`
  width: 1rem;
  height: 1rem;
  color: ${(props) => props.theme.warning};
  padding-right: 2px;
  filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.2));
`
Example #2
Source File: index.tsx    From slice-machine with Apache License 2.0 5 votes vote down vote up 
VersionDetails: React.FC<VersionDetailsProps> = ({
  changelog,
  selectedVersion,
  packageManager,
}) => {
  return (
    <Flex
      sx={{
        width: "650px",
        minWidth: "650px",
        height: "100%",
        borderRight: "1px solid",
        borderColor: "grey01",
        flexDirection: "column",
      }}
    >
      <Flex
        sx={{
          padding: "32px",
          borderBottom: "1px solid",
          borderColor: "grey01",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Text
          sx={{
            fontSize: "24px",
            fontWeight: 600,
            lineHeight: "32px",
          }}
        >
          {`Version ${selectedVersion.versionNumber}`}
        </Text>
        {!!selectedVersion.kind && (
          <VersionKindLabel versionKind={selectedVersion.kind} />
        )}
      </Flex>

      <Flex
        sx={{
          flexDirection: "column",
          padding: "24px 32px",
          gap: "24px",
        }}
      >
        {selectedVersion.releaseNote?.includes("# Breaking Change") && (
          <Flex
            sx={{
              padding: "16px",
              bg: "lightOrange",
              color: "darkOrange",
              fontSize: "13px",
              lineHeight: "24px",
              borderRadius: "4px",
              gap: "16px",
            }}
            data-testid="breaking-changes-warning"
          >
            <AiFillWarning size="24px" />
            This update includes breaking changes. To update correctly, follow
            the steps below.
          </Flex>
        )}

        <UpdateCommandBox
          changelog={changelog}
          selectedVersion={selectedVersion}
          packageManager={packageManager}
        />
        {selectedVersion?.releaseNote ? (
          <ReleaseNoteDetails releaseNote={selectedVersion.releaseNote} />
        ) : (
          <ReleaseWarning />
        )}
      </Flex>
    </Flex>
  );
}
Example #3
Source File: Dashboard.tsx    From nodestatus with MIT License 4 votes vote down vote up 
Dashboard: FC = () => {
  const { servers, timeSince } = useContext(StatusContext);
  const [count, setCount] = useState({ online: 0, record: {} });

  useEffect(() => {
    let online = 0;
    const record: Record<string, number> = {};
    const add = (key: string) => {
      if (typeof record[key] === 'undefined') {
        record[key] = 0;
      }
      record[key]++;
    };
    for (const item of servers) {
      if (item.status) online++;
      add(item.region);
    }
    setCount({
      online, record
    });
  }, [servers]);

  const columns: ColumnsType<ITable> = useMemo(() => [
    {
      title: 'SERVER',
      dataIndex: 'server',
      render(_, record) {
        return (
          <div className="flex items-center text-sm">
            <svg viewBox="0 0 100 100" className="mr-3 block h-12 w-12">
              <use xlinkHref={`#${record.region}`} />
            </svg>
            <div className="whitespace-nowrap">
              <p className="font-semibold">{record.name}</p>
              <p className="text-left text-xs text-gray-600">{record.location}</p>
            </div>
          </div>
        );
      }
    },
    {
      title: 'STATUS',
      dataIndex: 'status',
      align: 'center',
      render: status => (
        status
          ? <Tag color="success">Online</Tag>
          : <Tag color="error">Offline</Tag>
      )
    },
    {
      title: 'UPTIME',
      dataIndex: 'uptime',
      align: 'center',
      render(uptime) {
        return uptime === '-' ? '-' : parseUptime(uptime);
      }
    },
    {
      title: 'LOAD',
      dataIndex: 'load',
      align: 'center'
    }
  ], []);

  const TableFooter = useCallback(() => (
    <span className="text-xs">
      最后更新：
      {timeSince}
    </span>
  ), [timeSince]);

  return (
    <>
      <Title level={2} className="my-6 text-3xl">Dashboard</Title>
      <Row gutter={32} className="mb-4">
        <Col xs={{ span: 24 }} lg={{ span: 12 }} className="flex items-center mb-4 xs:mb-0">
          <MapChart count={count.record} />
        </Col>
        <Col xs={{ span: 24 }} lg={{ span: 12 }}>
          <Row>
            <Col xs={{ span: 24 }} className="mb-4">
              <StateCard
                title="Servers Total"
                count={servers.length}
                icon={(
                  <RoundIcon
                    icon={BiServer}
                    iconColorClass="text-yellow-500"
                    bgColorClass="bg-yellow-100"
                  />
                )}
              />
            </Col>
            <Col xs={{ span: 24 }} className="mb-4">
              <StateCard
                title="Servers Online"
                count={count.online}
                icon={(
                  <RoundIcon
                    icon={HiOutlineStatusOnline}
                    iconColorClass="text-green-500"
                    bgColorClass="bg-green-100"
                  />
                )}
              />
            </Col>
            <Col xs={{ span: 24 }}>
              <StateCard
                title="Servers Offline"
                count={servers.length - count.online}
                icon={(
                  <RoundIcon
                    icon={AiFillWarning}
                    iconColorClass="text-blue-500"
                    bgColorClass="bg-blue-100"
                  />
                )}
              />
            </Col>
          </Row>
        </Col>
      </Row>
      <Table
        className="rounded-lg max-w-full"
        dataSource={servers}
        columns={columns}
        footer={TableFooter}
        rowKey="id"
      />
    </>
  );
}