Cra rxjs issue pr card style fix

cra-rxjs-styled-components/src/components/repo-issues/issue-card/IssueCard.styles.tsx → cra-rxjs-styled-components/src/components/issue-pr-card/IssuePRCard.styles.tsx

@@ -1,17 +1,18 @@
 import styled, { css } from 'styled-components';
-import colors from '../../../constants/colors';
+import colors from '../../constants/colors';
 
 const flex = css`
 	display: flex;
 	align-items: center;
 `;
-export const IssueCardWrapper = styled.div`
+export const IssuePRCardWrapper = styled.div`
 	${flex};
 	padding: 15px 20px;
 	border-bottom: 1px solid ${colors.gray300};
 	justify-content: space-between;
 	& > .left {
 		${flex};
+		flex: 1 1 auto;
 		& > .icon {
 			font-size: 1.1rem;
 			margin-right: 0.8rem;
@@ -25,16 +26,28 @@ export const IssueCardWrapper = styled.div`
 			${flex};
 			flex-direction: column;
 			align-items: start;
-			& > .heading {
-				font-weight: 600 !important;
-				font-size: 16px !important;
-				vertical-align: middle !important;
-				color: ${colors.gray800};
+			& > .card_top {
 				margin-bottom: 0.8rem;
-				&:hover {
-					color: ${colors.blue800};
+				& > .heading {
+					font-weight: 600 !important;
+					font-size: 16px !important;
+					vertical-align: middle !important;
+					color: ${colors.gray800};
+					&:hover {
+						color: ${colors.blue800};
+					}
+				}
+				& > .card_label {
+					padding: 0.25rem 0.5rem;
+					border-radius: 9999px;
+					font-size: 0.875rem;
+					line-height: 1.25rem;
+					margin-top: 0.5rem;
+					margin-left: 0.5rem;
+					white-space: nowrap;
 				}
 			}
+
 			& > .sub_heading {
 				color: ${colors.gray600};
 				font-size: 12px !important;
@@ -46,12 +59,16 @@ export const IssueCardWrapper = styled.div`
 	}
 
 	& > .right {
+		width: 20%;
+		flex-shrink: 0;
 		.message {
 			${flex};
+			justify-content: flex-end;
+			align-items: center;
+			gap: 0.1rem;
 			& .icon {
 				font-size: 1.1rem;
 			}
-			flex-direction: column;
 		}
 	}
 

cra-rxjs-styled-components/src/components/issue-pr-card/IssuePRCard.tsx

@@ -0,0 +1,41 @@
+import ClosedIssueIcon from '../icons/ClosedIssueIcon';
+import MessageIcon from '../icons/MessageIcon';
+import OpenIssueIcon from '../icons/OpenIssueIcon';
+import { IssuePRCardWrapper } from './IssuePRCard.styles';
+import { IssuePRData, State } from '../../types/types';
+import IssuePRCardInfo from './IssuePRCardInfo';
+import { ClosedPRIcon } from '../icons';
+import OpenPRIcon from '../icons/OpenPRIcon';
+
+interface Props {
+	data: IssuePRData;
+	type: 'pr' | 'issue';
+}
+
+export default function IssuePRCard({ data, type }: Props) {
+	const getIssueIcon = (state: State) => {
+		switch (state) {
+			case 'closed':
+				return type === 'issue' ? <ClosedIssueIcon /> : <ClosedPRIcon />;
+			case 'open':
+			default:
+				return type === 'issue' ? <OpenIssueIcon /> : <OpenPRIcon />;
+		}
+	};
+	return (
+		<IssuePRCardWrapper>
+			<div className="left">
+				{getIssueIcon(data.state)}
+				<IssuePRCardInfo {...data} />
+			</div>
+			<div className="right">
+				{data.comments > 0 && (
+					<div className="message">
+						<MessageIcon />
+						<span className="count">{data.comments}</span>
+					</div>
+				)}
+			</div>
+		</IssuePRCardWrapper>
+	);
+}

cra-rxjs-styled-components/src/components/issue-pr-card/IssuePRCardInfo.tsx

@@ -0,0 +1,46 @@
+import { IssuePRData } from '@/types/types';
+import { getTextColor } from '../../helpers/dynamicColor';
+import { FormatDistance } from '../../helpers/format-distance';
+
+export default function IssuePRCardInfo(data: IssuePRData) {
+	const baseDate = new Date();
+	const formatDistance = FormatDistance;
+
+	return (
+		<div className="info">
+			<div className="card_top">
+				<a className="heading" href={data.url} target="_blank" rel="noreferrer">
+					{data.title}
+				</a>
+				{(data.labels || []).map((label) => (
+					<span
+						key={label.name}
+						className="card_label"
+						style={{
+							backgroundColor: `#${label.color || 'ccc'}`,
+							color: getTextColor(`#${label.color || 'ccc'}`),
+						}}
+					>
+						{label.name}
+					</span>
+				))}
+			</div>
+			<div className="sub_heading">
+				<span className="opened_num">#{data.number}</span>
+				{data.state === 'open' ? (
+					<span className="opened_day">
+						opened{' '}
+						{formatDistance({
+							date: data.created_at,
+							dateToCompare: baseDate,
+						})}{' '}
+						ago
+					</span>
+				) : (
+					<span className="opened_day">closed {data.closed_at} ago</span>
+				)}
+				{data.user && <span className="opened_by">by {data.user.login}</span>}
+			</div>
+		</div>
+	);
+}

cra-rxjs-styled-components/src/components/pull-request/PullRequest.stories.tsx

@@ -44,32 +44,35 @@ OpenPullRequests.args = {
 			created_at: date,
 			user: { login: 'krtz' },
 			state: 'open',
-			messageCount: 0,
 			merged_at: null,
 			repository_url: '/',
-			comments: '',
+			url: '/1',
+			comments: 11,
+			labels: [{ name: 'dependency', color: '633bcc' }],
 		},
 		{
 			title: '[Nuxt - Pinia - Tailwind] Get PRs comments',
 			number: '2',
 			created_at: date,
 			user: { login: 'jesus4497' },
 			state: 'open',
-			messageCount: 0,
 			merged_at: null,
 			repository_url: '/',
-			comments: '',
+			url: '/23',
+			comments: 30,
+			labels: [],
 		},
 		{
 			title: '[CRA-RXJS-SC] Fix PR API fetch',
-			number: '2',
+			number: '3',
 			created_at: date,
 			user: { login: 'kodejuice' },
 			state: 'open',
-			messageCount: 0,
 			merged_at: null,
 			repository_url: '/',
-			comments: '',
+			url: '/12',
+			comments: 12,
+			labels: [],
 		},
 	],
 };
@@ -86,23 +89,25 @@ MergedPullRequests.args = {
 			created_at: date,
 			user: { login: 'krtz' },
 			state: 'closed',
-			messageCount: 0,
 			isMerged: true,
-			merged_at: date,
+			merged_at: new Date(date),
 			repository_url: '/',
-			comments: '',
+			url: '/x',
+			comments: 10,
+			labels: [],
 		},
 		{
 			title: '[Angular-NgRx-SCSS] Click Away Directive',
 			number: '2',
 			created_at: date,
 			user: { login: 'Amdrel' },
 			state: 'closed',
-			messageCount: 0,
 			isMerged: true,
-			merged_at: date,
+			merged_at: new Date(date),
 			repository_url: '/',
-			comments: '',
+			url: '/bc',
+			comments: 0,
+			labels: [],
 		},
 	],
 };
@@ -118,21 +123,23 @@ ClosedPullRequests.args = {
 			created_at: date,
 			user: { login: 'tyrelchambers' },
 			state: 'closed',
-			messageCount: 0,
 			merged_at: null,
 			repository_url: '/',
-			comments: '',
+			url: '/ab',
+			comments: 1,
+			labels: [],
 		},
 		{
 			title: '[remix-gql-tailwind] Feature/restructure components',
 			number: '2',
 			created_at: date,
 			user: { login: 'sheerikie' },
 			state: 'closed',
-			messageCount: 0,
 			merged_at: null,
 			repository_url: '/',
-			comments: '',
+			url: '/a',
+			comments: 0,
+			labels: [],
 		},
 	],
 };