Created ComponentChip and CellComponentChip and their stories (#186)

* Created ComponentChip and CellComponentChip and their stories

* Fixed from comments

* Fixed icon color

* Fixed needle in a haystack bug

front/src/components/comments/CommentChip.tsx

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import { IconComment } from '../icons';
+
+export type CommentChipProps = {
+  count: number;
+  onClick?: () => void;
+};
+
+const StyledChip = styled.div`
+  height: 26px;
+  min-width: 34px;
+
+  padding-left: 2px;
+  padding-right: 2px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 2px;
+
+  background: ${(props) => props.theme.secondaryBackgroundTransparent};
+  backdrop-filter: blur(6px);
+
+  border-radius: ${(props) => props.theme.borderRadius};
+
+  cursor: pointer;
+
+  color: ${(props) => props.theme.text30};
+
+  &:hover {
+    background: ${(props) => props.theme.tertiaryBackground};
+    color: ${(props) => props.theme.text40};
+  }
+
+  user-select: none;
+`;
+
+const StyledCount = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export function CommentChip({ count, onClick }: CommentChipProps) {
+  const formattedCount = count > 99 ? '99+' : count;
+
+  return (
+    <StyledChip onClick={onClick}>
+      <StyledCount>{formattedCount}</StyledCount>
+      <IconComment size={12} />
+    </StyledChip>
+  );
+}