From 3d976577c1167dea4767b6a01030629b9ea51386 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Thu, 13 Apr 2023 17:25:35 +0200
Subject: [PATCH] Add CellLink

---
 front/src/components/cell-link/CellLink.tsx | 39 +++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 front/src/components/cell-link/CellLink.tsx

diff --git a/front/src/components/cell-link/CellLink.tsx b/front/src/components/cell-link/CellLink.tsx
new file mode 100644
index 000000000..9073de59b
--- /dev/null
+++ b/front/src/components/cell-link/CellLink.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+type OwnProps = {
+  name: string;
+  picture?: string;
+  href: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: 4px;
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px 4px 4px;
+  gap: 4px;
+
+  img {
+    height: 1rem;
+    width: 1rem;
+    border-radius: 0.5rem;
+    object-fit: cover;
+  }
+`;
+
+function CellLink({ name, picture, href }: OwnProps) {
+  return (
+    <Link to={href}>
+      <StyledContainer>
+        {picture && <img src={picture?.toString()} alt="" />}
+        {name}
+      </StyledContainer>
+    </Link>
+  );
+}
+
+export default CellLink;