First shlink-frontend-kit iteration

shlink-frontend-kit/src/block/Message.tsx

@@ -0,0 +1,54 @@
+import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+import { Card, Row } from 'reactstrap';
+
+type MessageType = 'default' | 'error';
+
+const getClassForType = (type: MessageType) => {
+  const map: Record<MessageType, string> = {
+    error: 'border-danger',
+    default: '',
+  };
+
+  return map[type];
+};
+const getTextClassForType = (type: MessageType) => {
+  const map: Record<MessageType, string> = {
+    error: 'text-danger',
+    default: 'text-muted',
+  };
+
+  return map[type];
+};
+
+export type MessageProps = PropsWithChildren<{
+  className?: string;
+  loading?: boolean;
+  fullWidth?: boolean;
+  type?: MessageType;
+}>;
+
+export const Message: FC<MessageProps> = (
+  { className, children, loading = false, type = 'default', fullWidth = false },
+) => {
+  const classes = classNames({
+    'col-md-12': fullWidth,
+    'col-md-10 offset-md-1': !fullWidth,
+  });
+
+  return (
+    <Row className={classNames('g-0', className)}>
+      <div className={classes}>
+        <Card className={getClassForType(type)} body>
+          <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>
+            {loading && <FontAwesomeIcon icon={preloader} spin />}
+            {loading && <span className="ms-2">{children ?? 'Loading...'}</span>}
+            {!loading && children}
+          </h3>
+        </Card>
+      </div>
+    </Row>
+  );
+};

shlink-frontend-kit/src/block/Result.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+import { Row } from 'reactstrap';
+import { SimpleCard } from './SimpleCard';
+
+export type ResultType = 'success' | 'error' | 'warning';
+
+export type ResultProps = PropsWithChildren<{
+  type: ResultType;
+  className?: string;
+  small?: boolean;
+}>;
+
+export const Result: FC<ResultProps> = ({ children, type, className, small = false }) => (
+  <Row className={className}>
+    <div className={classNames({ 'col-md-10 offset-md-1': !small, 'col-12': small })}>
+      <SimpleCard
+        role="document"
+        className={classNames('text-center', {
+          'bg-main': type === 'success',
+          'bg-danger': type === 'error',
+          'bg-warning': type === 'warning',
+          'text-white': type !== 'warning',
+        })}
+        bodyClassName={classNames({ 'p-2': small })}
+      >
+        {children}
+      </SimpleCard>
+    </div>
+  </Row>
+);

shlink-frontend-kit/src/block/SimpleCard.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { CardProps } from 'reactstrap';
+import { Card, CardBody, CardHeader } from 'reactstrap';
+
+interface SimpleCardProps extends Omit<CardProps, 'title'> {
+  title?: ReactNode;
+  bodyClassName?: string;
+}
+
+export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
+  <Card {...rest}>
+    {title && <CardHeader role="heading">{title}</CardHeader>}
+    <CardBody className={bodyClassName}>{children}</CardBody>
+  </Card>
+);

shlink-frontend-kit/src/block/index.ts

@@ -0,0 +1,3 @@
+export * from './Message';
+export * from './Result';
+export * from './SimpleCard';