Post

src/components/timeline/Post.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Post from './Post';
+
+const meta = {
+  component: Post,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Post>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NormalPost: Story = {
+  args: {
+    displayName: 'ククルス',
+    userName: 'cuculus',
+    postedAt: new Date(),
+    profileImageUrl: '/',
+    text: 'ココに文章が表示されます。\n改行も適用されます。',
+  },
+};

src/components/timeline/Post.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Avatar, styled } from '@mui/material';
+
+const Article = styled('article')`
+  padding: 0 16px;
+  border-bottom: 1px solid rgb(239, 243, 244);
+  max-width: 600px;
+`;
+
+const Original = styled('div')`
+  padding: 12px 0;
+  display: flex;
+  gap: 10px;
+`;
+
+const Content = styled('div')`
+  flex: 1;
+`;
+
+const Header = styled('div')`
+  display: flex;
+  margin-bottom: 5px;
+  gap: 4px;
+`;
+
+const DisplayName = styled('span')`
+  font-width: bold;
+`;
+
+const UserName = styled('span')`
+  color: #8899a6;
+`;
+
+const Text = styled('div')`
+  white-space: pre-wrap;
+`;
+
+const Footer = styled('div')`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+type Props = {
+  displayName: string;
+  userName: string;
+  profileImageUrl: string;
+  text: string;
+  postedAt: Date;
+};
+
+export default function Post({
+  displayName,
+  userName,
+  profileImageUrl,
+  text,
+  postedAt,
+}: Props) {
+  return (
+    <div>
+      <Article>
+        {/*<div>〇〇さんがリポストしました。</div>*/}
+        <Original>
+          <Avatar sx={{ backgroundColor: '' }}>TODO</Avatar>
+          <Content>
+            <Header>
+              <DisplayName>{displayName}</DisplayName>
+              <UserName>@{userName}</UserName>
+              <UserName>·</UserName>
+              <UserName>1分前</UserName>
+            </Header>
+            <Text>{text}</Text>
+            <Footer>
+              <div>返信</div>
+              <div>リポスト</div>
+              <div>ふぁぼ</div>
+            </Footer>
+          </Content>
+        </Original>
+      </Article>
+    </div>
+  );
+}