Create Commens Columns

lexicongovernance · May 3, 2024 · 776fa8e · 776fa8e
1 parent 88830d4
commit 776fa8e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx b/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { FlexRow } from '../containers/FlexRow.styled';
+
+export const Card = styled(FlexRow)`
+  border-bottom: 2px solid var(--color-black);
+  gap: 0;
+  width: 100%;
+`;
+
+export const Comment = styled(FlexRow)`
+  flex: 1;
+  font-weight: bold;
+  min-width: 11rem;
+  padding: 1.5rem;
+  p {
+    cursor: pointer;
+  }
+`;
+
+export const Author = styled(FlexRow)`
+  display: none;
+  @media (min-width: 600px) {
+    display: flex;
+    font-weight: bold;
+    max-width: 10rem;
+    min-width: 8rem;
+    padding: 1.5rem;
+
+    p {
+      cursor: pointer;
+    }
+  }
+`;
+export const Date = styled(FlexRow)`
+  display: none;
+  @media (min-width: 600px) {
+    display: flex;
+    font-weight: bold;
+    max-width: 10rem;
+    min-width: 8rem;
+    padding: 1.5rem;
+
+    p {
+      cursor: pointer;
+    }
+  }
+`;
+
+export const Likes = styled(FlexRow)`
+  gap: 0.5rem;
+  max-width: 5rem;
+  padding: 1.5rem;
+`;
diff --git a/packages/berlin/src/components/comments-columns/CommentsColumns.tsx b/packages/berlin/src/components/comments-columns/CommentsColumns.tsx
@@ -0,0 +1,32 @@
+import IconButton from '../icon-button';
+import { Body } from '../typography/Body.styled';
+import { Author, Card, Comment, Date, Likes } from './CommentsColumns.styled';
+
+type CycleColumnsProps = {
+  onColumnClick: (column: string) => void;
+};
+
+function CycleColumns({ onColumnClick }: CycleColumnsProps) {
+  return (
+    <Card>
+      <Comment>
+        <Body>Comment</Body>
+      </Comment>
+      <Author onClick={() => onColumnClick('author')}>
+        <Body>Author</Body>
+      </Author>
+      <Date>
+        <Body>Date</Body>
+      </Date>
+      <Likes onClick={() => onColumnClick('likes')}>
+        <IconButton
+          $padding={0}
+          $color="secondary"
+          icon={{ src: `/icons/thumb-up-active.svg`, alt: 'Thumbs up icon' }}
+        />
+      </Likes>
+    </Card>
+  );
+}
+
+export default CycleColumns;
diff --git a/packages/berlin/src/components/comments-columns/index.ts b/packages/berlin/src/components/comments-columns/index.ts
@@ -0,0 +1 @@
+export { default } from './CommentsColumns';