GREG-41: Adding custom link

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import './i18n'
 import { Button } from './components/button'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
+import { Link } from './components/link'
 
 const App = () => {
   const [apiHealth, setApiHealth] = useState('not yet')
@@ -31,16 +32,16 @@ const App = () => {
   }
 
   return (
-    <Suspense fallback="loading">
-      <div className="App">
-        <header className="App-header">
-          <Button href="https://example.com" target="_blank" rel="noopener">
+    <Suspense fallback='loading'>
+      <div className='App'>
+        <header className='App-header'>
+          <Button href='https://example.com' target='_blank' rel='noopener'>
             Knapp
           </Button>
           <Button
-            href="https://example.com"
-            target="_blank"
-            rel="noopener"
+            href='https://example.com'
+            target='_blank'
+            rel='noopener'
             pink
           >
             Rosa knapp
@@ -70,6 +71,9 @@ const App = () => {
             <br />
             API reachable? {apiHealth}
           </p>
+
+          <Link to='test' external={false}>Test</Link>
+          <Link to='test2' external={true}>Test2</Link>
         </header>
       </div>
     </Suspense>

frontend/src/components/link/index.tsx

+import styled from 'styled-components/macro'
+
+
+interface LinkProps {
+  children?: React.ReactNode
+  external?: boolean
+  to?: string
+}
+
+const StyledLink = styled.a<LinkProps>`
+  background: ${(props) => props.external ? 'green' : 'red'};
+`
+
+export function Link(props: LinkProps) {
+
+  if (props.external) {
+    return (
+      <StyledLink href={props.to} {...props} />
+    )
+  }
+
+  return (
+    <StyledLink href={props.to} {...props} />
+  )
+}
\ No newline at end of file