-
-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8c188a6
commit 91c5309
Showing
4 changed files
with
136 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from "react"; | ||
import type { Meta, StoryObj } from "@storybook/react"; | ||
import storyDialog from "../../../.storybook/decorators/storyDialog"; | ||
import Usage from "../usage.mdx"; | ||
import CardSocialPost from "./CardSocialPost"; | ||
|
||
const meta = { | ||
title: "Card/Social/Post", | ||
component: CardSocialPost, | ||
parameters: { | ||
layout: "centered", | ||
githubUsername: "patorseing", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar | ||
}, | ||
decorators: [storyDialog(Usage)], | ||
} satisfies Meta<typeof CardSocialPost>; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Post: Story = { | ||
render: () => ( | ||
<div | ||
style={{ | ||
width: 340, | ||
padding: 20, | ||
maxWidth: "100%", | ||
resize: "horizontal", | ||
overflow: "auto", | ||
}} | ||
> | ||
<CardSocialPost /> | ||
</div> | ||
), | ||
}; | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import React from "react"; | ||
import { | ||
Avatar, | ||
AvatarGroup, | ||
Card, | ||
CardContent, | ||
Stack, | ||
Typography, | ||
} from "@mui/joy"; | ||
|
||
export default function CardSocialPost() { | ||
|
||
const post = { | ||
users:['https://images.unsplash.com/photo-1698296449732-d0a3195f147a?auto=format&fit=crop&q=80&w=3087&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 'https://images.unsplash.com/photo-1686040054953-9cb42085ca9c?auto=format&fit=crop&q=80&w=3087&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 'https://images.unsplash.com/photo-1697917225161-f43b4e60d2f4?auto=format&fit=crop&q=80&w=1811&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'], | ||
likes: 47, | ||
info:{ | ||
comments: 10, | ||
shared:2 | ||
} | ||
} | ||
return ( | ||
<Card | ||
variant="plain" | ||
sx={(theme) => ({ | ||
boxShadow: theme.shadow.md, | ||
borderRadius: "1.5rem", | ||
background: "background.body" | ||
})} | ||
> | ||
<Stack | ||
direction="row" | ||
justifyContent="flex-start" | ||
alignItems="center" | ||
spacing={2} | ||
> | ||
<Avatar | ||
alt="avatar" | ||
src="https://images.unsplash.com/photo-1694564717876-7436bdf6a236?auto=format&fit=crop&q=80&w=2905&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
/> | ||
<Stack> | ||
<Typography sx={{ fontWeight: 600 }}>Imam Farrhoak</Typography> | ||
<Typography level="body-sm" sx={{ color: "gray" }}> | ||
4 mins ago | ||
</Typography> | ||
</Stack> | ||
</Stack> | ||
<CardContent> | ||
We are facing a serious business dilemma, with Facebook taking away a | ||
good chunk of traffic to news and content sites, and ad blocker eating | ||
into what's left of it while slashing ad revenues. | ||
</CardContent> | ||
<Stack | ||
direction="row" | ||
justifyContent="space-between" | ||
alignItems="center" | ||
spacing={2} | ||
> | ||
<Stack | ||
direction="row" | ||
justifyContent="flex-start" | ||
alignItems="center" | ||
spacing={2} | ||
> | ||
<AvatarGroup> | ||
{post.users.map( (user, id) => <Avatar | ||
key={id} | ||
size="sm" | ||
alt="avatar" | ||
src={user} | ||
/>)} | ||
</AvatarGroup> | ||
<Typography level="body-sm">{post.likes} likes</Typography> | ||
</Stack> | ||
<Stack | ||
direction="row" | ||
justifyContent="flex-start" | ||
alignItems="center" | ||
spacing={2} | ||
> | ||
{Object.entries(post.info).map(([key, value], id) => <Typography level="body-sm" key={`${key}-${id}`}>{value} {key}</Typography>)} | ||
</Stack> | ||
</Stack> | ||
</Card> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as CardSocialPost } from "./CardSocialPost"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Meta, Source } from "@storybook/blocks"; | ||
import raw from "./src/CardSocialPost?raw"; | ||
|
||
<Meta title="Card/Social/Post" /> | ||
|
||
## CLI | ||
|
||
```sh | ||
npx joy-treasury@latest clone card-social-post | ||
``` | ||
|
||
## CardSocialComment | ||
|
||
<Source code={raw} language="tsx" /> |