feat(redirect): add redirect component

libs/data/src/lib/data.tsx

@@ -11,6 +11,7 @@ export enum Layer {
 
 export enum ContentType {
   Text = "text",
+  Redirect = "redirect",
   Video = "video",
   Image = "image",
   Game = "game",
@@ -23,11 +24,13 @@ export interface Content {
   type: string
   layer: string
   value: string
+  title?: string
 }
 
 export interface Group {
   grouped: boolean
   row: boolean
+  background?: string
   content: Content[]
 }
 

libs/ui/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/redirect/redirect';
 export * from './lib/scrollicon/scrollicon';
 export * from './lib/puzzle/puzzle';
 export * from './lib/smokingpit/smokingpit';

libs/ui/src/lib/redirect/redirect.scss

@@ -0,0 +1,18 @@
+.link-button {
+  background-color: transparent;
+  text-decoration: none;
+  color: var(--color-link);
+  border: none;
+  cursor: pointer;
+  display: inline;
+
+  &:hover,
+  &:focus {
+    color: var(--color-link-highlighted);
+  }
+
+  .redirect {
+    width: 75vw;
+    margin: auto;
+  }
+}

libs/ui/src/lib/redirect/redirect.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Redirect from './redirect';
+
+describe(' Redirect', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Redirect />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui/src/lib/redirect/redirect.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import './redirect.scss';
+
+/* eslint-disable-next-line */
+export interface RedirectProps {
+  value: string
+}
+
+export const Redirect = (props: RedirectProps) => {
+  return (
+    <button type='button' className='link-button redirect'>{props.value}</button>
+  );
+};
+
+export default Redirect;