From d197fedb4d4296c68a458a93e5a3b6e40fd0ce2d Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Thu, 9 Sep 2021 15:22:29 +0200
Subject: [PATCH] GREG-41: Adding custom link
---
frontend/src/App.tsx | 18 +++++++++++-------
frontend/src/components/link/index.tsx | 25 +++++++++++++++++++++++++
2 files changed, 36 insertions(+), 7 deletions(-)
create mode 100644 frontend/src/components/link/index.tsx
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33f14aad..719320ed 100644
--- a/frontend/src/App.tsx
+++ b/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>
diff --git a/frontend/src/components/link/index.tsx b/frontend/src/components/link/index.tsx
new file mode 100644
index 00000000..65a9e8e0
--- /dev/null
+++ b/frontend/src/components/link/index.tsx
@@ -0,0 +1,25 @@
+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
--
GitLab