Organize

src/core/client/stream/components/Comment/Comment.tsx

@@ -3,8 +3,8 @@ import { StatelessComponent } from "react";
 
 import { Typography } from "talk-ui/components";
 
-import CommentTimestamp from "./CommentTimestamp";
-import CommentTopBar from "./CommentTopBar";
+import Timestamp from "./Timestamp";
+import TopBar from "./TopBar";
 import Username from "./Username";
 
 export interface CommentProps {
@@ -18,10 +18,10 @@ export interface CommentProps {
 const Comment: StatelessComponent<CommentProps> = props => {
   return (
     <div role="article">
-      <CommentTopBar>
+      <TopBar>
         {props.author && <Username>{props.author.username}</Username>}
-        <CommentTimestamp>{props.createdAt}</CommentTimestamp>
-      </CommentTopBar>
+        <Timestamp>{props.createdAt}</Timestamp>
+      </TopBar>
       <Typography>{props.body}</Typography>
     </div>
   );

src/core/client/stream/components/Comment/Timestamp.tsx

@@ -3,14 +3,14 @@ import { StatelessComponent } from "react";
 
 import { RelativeTime } from "talk-ui/components";
 
-import * as styles from "./CommentTimestamp.css";
+import * as styles from "./Timestamp.css";
 
-export interface CommentTimestampProps {
+export interface TimestampProps {
   children: string;
 }
 
-const CommentTimestamp: StatelessComponent<CommentTimestampProps> = props => (
+const Timestamp: StatelessComponent<TimestampProps> = props => (
   <RelativeTime className={styles.root} date={props.children} />
 );
 
-export default CommentTimestamp;
+export default Timestamp;

src/core/client/stream/components/Comment/TopBar.tsx

@@ -4,14 +4,14 @@ import { StatelessComponent } from "react";
 
 import { Flex, MatchMedia } from "talk-ui/components";
 
-import * as styles from "./CommentTopBar.css";
+import * as styles from "./TopBar.css";
 
-export interface CommentTopBarProps {
+export interface TopBarProps {
   className?: string;
   children: React.ReactNode;
 }
 
-const CommentTopBar: StatelessComponent<CommentTopBarProps> = props => {
+const TopBar: StatelessComponent<TopBarProps> = props => {
   const rootClassName = cn(styles.root, props.className);
   return (
     <MatchMedia minWidth="xs">
@@ -29,4 +29,4 @@ const CommentTopBar: StatelessComponent<CommentTopBarProps> = props => {
   );
 };
 
-export default CommentTopBar;
+export default TopBar;

src/core/client/stream/components/Comment/index.ts

@@ -0,0 +1 @@
+export { default, default as Comment, CommentProps } from "./Comment";