Skip to content

Commit

Permalink
Merge pull request #2339 from HS-90/exerciseList
Browse files Browse the repository at this point in the history
Discussions Card Component Design Only
  • Loading branch information
HS-90 authored Sep 28, 2022
2 parents 012c830 + 3b93981 commit 212fa00
Show file tree
Hide file tree
Showing 5 changed files with 486 additions and 0 deletions.
256 changes: 256 additions & 0 deletions __tests__/__snapshots__/storyshots.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4859,6 +4859,262 @@ exports[`Storyshots Components/DiffView Default 1`] = `
</div>
`;

exports[`Storyshots Components/DiscussionsCard Discussions Card Main 1`] = `
<div
className="card_body_main"
>
<div
className="card_user_info_main"
>
<div>
<img
className="user_pic"
src="https://ssb.wiki.gallery/images/thumb/6/61/Ryu_SSBU.png/1200px-Ryu_SSBU.png"
/>
<span
className="username"
>
user01
</span>
<span>

</span>
<span>
-
</span>
<span>
September 22, 2022 @ 3:00 UTC
</span>
</div>
</div>
<div
className="card_content"
>
dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit: dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:
</div>
<div
className="card_buttons"
>
<div
className="buttons_left"
>
<div
className="reply_button"
onClick={[Function]}
>
<svg
aria-hidden="true"
className="octicon octicon-comment"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z\\"></path>",
}
}
fill="currentColor"
height={16}
role="img"
style={
Object {
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 16 16"
width={16}
/>
Reply
</div>
<div
className="edit_delete"
>
<div
onClick={[Function]}
>
<svg
aria-hidden="true"
className="pencil"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M17.263 2.177a1.75 1.75 0 012.474 0l2.586 2.586a1.75 1.75 0 010 2.474L19.53 10.03l-.012.013L8.69 20.378a1.75 1.75 0 01-.699.409l-5.523 1.68a.75.75 0 01-.935-.935l1.673-5.5a1.75 1.75 0 01.466-.756L14.476 4.963l2.787-2.786zm-2.275 4.371l-10.28 9.813a.25.25 0 00-.067.108l-1.264 4.154 4.177-1.271a.25.25 0 00.1-.059l10.273-9.806-2.94-2.939zM19 8.44l2.263-2.262a.25.25 0 000-.354l-2.586-2.586a.25.25 0 00-.354 0L16.061 5.5 19 8.44z\\"></path>",
}
}
fill="currentColor"
height={28}
role="img"
style={
Object {
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 24 24"
width={28}
/>
</div>
<div
onClick={[Function]}
>
<svg
aria-hidden="true"
className="trash"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M16 1.75V3h5.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H8V1.75C8 .784 8.784 0 9.75 0h4.5C15.216 0 16 .784 16 1.75zm-6.5 0a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25V3h-5V1.75z\\"></path><path d=\\"M4.997 6.178a.75.75 0 10-1.493.144L4.916 20.92a1.75 1.75 0 001.742 1.58h10.684a1.75 1.75 0 001.742-1.581l1.413-14.597a.75.75 0 00-1.494-.144l-1.412 14.596a.25.25 0 01-.249.226H6.658a.25.25 0 01-.249-.226L4.997 6.178z\\"></path><path d=\\"M9.206 7.501a.75.75 0 01.793.705l.5 8.5A.75.75 0 119 16.794l-.5-8.5a.75.75 0 01.705-.793zm6.293.793A.75.75 0 1014 8.206l-.5 8.5a.75.75 0 001.498.088l.5-8.5z\\"></path>",
}
}
fill="currentColor"
height={28}
role="img"
style={
Object {
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 24 24"
width={28}
/>
</div>
</div>
</div>
</div>
</div>
`;

exports[`Storyshots Components/DiscussionsCard Discussions Card Sub 1`] = `
<div
className="card_body_sub"
>
<div
className="card_user_info_sub"
>
<div>
<img
className="user_pic"
src="https://ssb.wiki.gallery/images/thumb/6/61/Ryu_SSBU.png/1200px-Ryu_SSBU.png"
/>
<span
className="username"
>
user01
</span>
<span>

</span>
<span>
-
</span>
<span>
September 22, 2022 @ 3:00 UTC
</span>
</div>
</div>
<div
className="card_content"
>
dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit: dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:. Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:Lorem ipsum, dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:
</div>
<div
className="card_buttons"
>
<div
className="buttons_left"
>
<div
className="reply_button"
onClick={[Function]}
>
<svg
aria-hidden="true"
className="octicon octicon-comment"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z\\"></path>",
}
}
fill="currentColor"
height={16}
role="img"
style={
Object {
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 16 16"
width={16}
/>
Reply
</div>
<div
className="edit_delete"
>
<div
onClick={[Function]}
>
<svg
aria-hidden="true"
className="pencil"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M17.263 2.177a1.75 1.75 0 012.474 0l2.586 2.586a1.75 1.75 0 010 2.474L19.53 10.03l-.012.013L8.69 20.378a1.75 1.75 0 01-.699.409l-5.523 1.68a.75.75 0 01-.935-.935l1.673-5.5a1.75 1.75 0 01.466-.756L14.476 4.963l2.787-2.786zm-2.275 4.371l-10.28 9.813a.25.25 0 00-.067.108l-1.264 4.154 4.177-1.271a.25.25 0 00.1-.059l10.273-9.806-2.94-2.939zM19 8.44l2.263-2.262a.25.25 0 000-.354l-2.586-2.586a.25.25 0 00-.354 0L16.061 5.5 19 8.44z\\"></path>",
}
}
fill="currentColor"
height={28}
role="img"
style={
Object {
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 24 24"
width={28}
/>
</div>
<div
onClick={[Function]}
>
<svg
aria-hidden="true"
className="trash"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M16 1.75V3h5.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H8V1.75C8 .784 8.784 0 9.75 0h4.5C15.216 0 16 .784 16 1.75zm-6.5 0a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25V3h-5V1.75z\\"></path><path d=\\"M4.997 6.178a.75.75 0 10-1.493.144L4.916 20.92a1.75 1.75 0 001.742 1.58h10.684a1.75 1.75 0 001.742-1.581l1.413-14.597a.75.75 0 00-1.494-.144l-1.412 14.596a.25.25 0 01-.249.226H6.658a.25.25 0 01-.249-.226L4.997 6.178z\\"></path><path d=\\"M9.206 7.501a.75.75 0 01.793.705l.5 8.5A.75.75 0 119 16.794l-.5-8.5a.75.75 0 01.705-.793zm6.293.793A.75.75 0 1014 8.206l-.5 8.5a.75.75 0 001.498.088l.5-8.5z\\"></path>",
}
}
fill="currentColor"
height={28}
role="img"
style={
Object {
"display": "inline-block",
"overflow": "visible",
"userSelect": "none",
"verticalAlign": "text-bottom",
}
}
viewBox="0 0 24 24"
width={28}
/>
</div>
</div>
</div>
</div>
</div>
`;

exports[`Storyshots Components/DropdownMenu Basic 1`] = `
<div
className="dropdown"
Expand Down
63 changes: 63 additions & 0 deletions components/DiscussionsCard/DiscussionsCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react'
import styles from './discussionsCard.module.scss'
import { CommentIcon, TrashIcon, PencilIcon } from '@primer/octicons-react'

export type DiscussionsCardProps = {
isMain: boolean
username: string
userPic: string
timeStamp: string
content: string
likes: number
dislikes: number
replyClick: () => void
editClick: () => void
deleteClick: () => void
}

const DiscussionsCard: React.FC<DiscussionsCardProps> = ({
isMain,
username,
userPic,
timeStamp,
content,
replyClick,
editClick,
deleteClick
}) => {
return (
<div className={isMain ? styles.card_body_main : styles.card_body_sub}>
<div
className={
isMain ? styles.card_user_info_main : styles.card_user_info_sub
}
>
<div>
<img src={userPic} className={styles.user_pic} />
<span className={styles.username}>{username}</span>
<span> </span>
<span> - </span>
<span>{timeStamp}</span>
</div>
</div>
<div className={styles.card_content}>{content}</div>
<div className={styles.card_buttons}>
<div className={styles.buttons_left}>
<div className={styles.reply_button} onClick={replyClick}>
<CommentIcon /> Reply
</div>
<div className={styles.edit_delete}>
<div onClick={editClick}>
<PencilIcon size={28} className={styles.pencil} />
</div>
<div onClick={deleteClick}>
<TrashIcon size={28} className={styles.trash} />
</div>
</div>
</div>
</div>
</div>
)
}

export default DiscussionsCard
Loading

1 comment on commit 212fa00

@vercel
Copy link

@vercel vercel bot commented on 212fa00 Sep 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.