@integrigo/integrigo-ui 1.6.18-c → 1.6.18-e

package/src/components/organisms/Comment/Comment.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "styled-components";
+import { Avatar, DateTime, Typography } from "../../atoms";
+
+export interface CommentProps {
+  avatar: {
+    src: string;
+    alt: string;
+  };
+  body: string;
+  author: string;
+  createdAt: Date;
+}
+
+export const Comment: React.FC<CommentProps> = ({
+  avatar,
+  body,
+  author,
+  createdAt,
+}) => {
+  return (
+    <Root>
+      <Avatar {...avatar} />
+
+      <NameAndDate>
+        <Typography.Hero size="s">{author}</Typography.Hero>
+        <DateTime date={createdAt} />
+      </NameAndDate>
+
+      <div />
+
+      <Typography.Body>{body}</Typography.Body>
+    </Root>
+  );
+};
+
+const Root = styled.div`
+  display: grid;
+  grid-template-columns: 32px auto;
+  grid-template-rows: 32px auto;
+  column-gap: var(--padding-m);
+  row-gap: var(--padding-m);
+
+  & > p {
+    margin: 0;
+  }
+`;
+
+const NameAndDate = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & > h5 {
+    margin: 0;
+    color: var(--color-orange);
+  }
+`;

package/src/components/organisms/Comment/index.ts

@@ -0,0 +1 @@
+export { Comment } from './Comment'

package/src/components/organisms/index.ts

@@ -2,4 +2,5 @@ export { Menu } from './Menu';
 export { Setting } from './Setting';
 export { Modal } from './Modal';
 export { Select } from './Select';
-export { Table } from './Table';
+export { Table } from './Table';
+export { Comment } from './Comment'

package/src/index.ts

@@ -12,7 +12,7 @@ export {
   Chip,
   Dot,
   Gradient,
-} from './components/atoms';
+} from "./components/atoms";
 
 export {
   InfoCard,
@@ -25,8 +25,16 @@ export {
   Radio,
   Tile,
   Switch,
-} from './components/molecules';
+  IconButton,
+} from "./components/molecules";
 
-export { Menu, Setting, Modal, Select, Table } from './components/organisms';
+export {
+  Menu,
+  Setting,
+  Modal,
+  Select,
+  Table,
+  Comment,
+} from "./components/organisms";
 
-export { GlobalStyles as IntegrigoUI, Color } from './styles';
+export { GlobalStyles as IntegrigoUI, Color } from "./styles";