Skip to content

Commit 07fa996

Browse files
author
Alex Patterson
authored
Merge pull request CodingCatDev#145 from CodingCatDev/bug/badge
fixed bug again
2 parents ee645dd + 6811ec1 commit 07fa996

1 file changed

Lines changed: 88 additions & 97 deletions

File tree

‎frontend/main/src/components/PostsCards.tsx‎

Lines changed: 88 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -7,108 +7,99 @@ export default function PostsCards({ posts }: { posts: Post[] }): JSX.Element {
77
return (
88
<>
99
{posts && posts.length > 0 ? (
10-
<div className="p-4 sm:p-10">
11-
<section className="relative grid gap-4 grid-cols-fit sm:gap-10">
12-
{posts.map((post) => {
13-
return (
14-
<div
15-
className="grid transition-all transform rounded-md shadow-lg grid-rows-auto-2 hover:shadow-2xl hover:scale-105 bg-basics-50"
16-
key={post.id}
17-
>
18-
<Link href={`/${post.type}/${post.slug}`}>
19-
<a className="self-start">
20-
{post.coverPhoto?.path && post.type === 'course' ? (
21-
<>
22-
<Image
23-
src={post.coverPhoto?.path}
24-
alt={post.title}
25-
width="480"
26-
height="270"
27-
layout="responsive"
28-
className="rounded-md rounded-b-none cursor-pointer"
29-
/>
30-
</>
31-
) : post.coverPhoto?.path ? (
32-
<>
33-
<Image
34-
src={post.coverPhoto?.path}
35-
alt={post.title}
36-
width="480"
37-
height="270"
38-
layout="responsive"
39-
className="rounded-md rounded-b-none cursor-pointer"
40-
/>
41-
</>
42-
) : (
43-
<div
44-
className="relative"
45-
style={{ paddingBottom: '56.25%' }}
46-
>
47-
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
48-
<AJPrimary className="w-full h-full p-4" />
49-
</div>
50-
{post.type === 'course' ? (
51-
<p className="absolute px-4 py-2 rounded-full bg-secondary-600 dark:bg-secondary-600 -bottom-12 -right-8 text-basics-50 dark:text-basics-50">
52-
Start now
53-
</p>
54-
) : (
55-
<></>
56-
)}
10+
<section className="relative grid gap-4 grid-cols-fit sm:gap-10">
11+
{posts.map((post) => {
12+
return (
13+
<div
14+
className="grid transition-all transform rounded-md shadow-lg grid-rows-auto-2 hover:shadow-2xl hover:scale-105 bg-basics-50"
15+
key={post.id}
16+
>
17+
<Link href={`/${post.type}/${post.slug}`}>
18+
<a className="self-start">
19+
{post.coverPhoto?.path && post.type === 'course' ? (
20+
<>
21+
<Image
22+
src={post.coverPhoto?.path}
23+
alt={post.title}
24+
width="480"
25+
height="270"
26+
layout="responsive"
27+
className="rounded-md rounded-b-none cursor-pointer"
28+
/>
29+
</>
30+
) : post.coverPhoto?.path ? (
31+
<>
32+
<Image
33+
src={post.coverPhoto?.path}
34+
alt={post.title}
35+
width="480"
36+
height="270"
37+
layout="responsive"
38+
className="rounded-md rounded-b-none cursor-pointer"
39+
/>
40+
</>
41+
) : (
42+
<div
43+
className="relative"
44+
style={{ paddingBottom: '56.25%' }}
45+
>
46+
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
47+
<AJPrimary className="w-full h-full p-4" />
5748
</div>
58-
)}
59-
</a>
60-
</Link>
61-
62-
<section className="grid h-full grid-cols-1 gap-2 p-4">
63-
<div className="space-y-2">
64-
<h3 className="font-sans text-lg tracking-wide text-basics-900 text-bold">
65-
<Link href={`/${post.type}/${post.slug}`}>
66-
<a>{post.title}</a>
67-
</Link>
68-
</h3>
69-
{post.excerpt && (
70-
<p className="text-sm font-hairline text-basics-900">
71-
{post.excerpt}
72-
</p>
73-
)}
74-
<div>
75-
{post.authors?.map((author, i) => (
76-
<h4 key={i} className="font-sans text-lg">
77-
{author.displayName}
78-
</h4>
79-
))}
8049
</div>
50+
)}
51+
</a>
52+
</Link>
53+
54+
<section className="grid h-full grid-cols-1 gap-2 p-4">
55+
<div className="space-y-2">
56+
<h3 className="font-sans text-lg tracking-wide text-basics-900 text-bold">
57+
<Link href={`/${post.type}/${post.slug}`}>
58+
<a>{post.title}</a>
59+
</Link>
60+
</h3>
61+
{post.excerpt && (
62+
<p className="text-sm font-hairline text-basics-900">
63+
{post.excerpt}
64+
</p>
65+
)}
66+
<div>
67+
{post.authors?.map((author, i) => (
68+
<h4 key={i} className="font-sans text-lg">
69+
{author.displayName}
70+
</h4>
71+
))}
8172
</div>
82-
<div className="grid self-end justify-start grid-cols-2 gap-2 font-bold tracking-wider">
83-
{post.type === 'course' && (
84-
<>
85-
{post.accessSettings?.accessMode === 'closed' ? (
86-
<>
87-
<p className="px-4 py-2 text-sm rounded-full justify-self-start bg-primary-900 dark:bg-primary-900 text-basics-50 dark:text-basics-50">
88-
Paid
89-
</p>
90-
<p className="px-4 py-2 text-sm font-bold tracking-wider transform -skew-y-12 justify-self-end bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
91-
${post.accessSettings?.price}
92-
</p>
93-
</>
94-
) : post.accessSettings?.accessMode === 'free' ? (
95-
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-primary-50 dark:bg-primary-50 text-primary-900 dark:text-primary-900">
96-
Free
73+
</div>
74+
<div className="grid self-end justify-start grid-cols-2 gap-2 font-bold tracking-wider">
75+
{post.type === 'course' && (
76+
<>
77+
{post.accessSettings?.accessMode === 'closed' ? (
78+
<>
79+
<p className="px-4 py-2 text-sm rounded-full justify-self-start bg-primary-900 dark:bg-primary-900 text-basics-50 dark:text-basics-50">
80+
Paid
9781
</p>
98-
) : (
99-
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
100-
Start now
82+
<p className="px-4 py-2 text-sm font-bold tracking-wider transform -skew-y-12 justify-self-end bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
83+
${post.accessSettings?.price}
10184
</p>
102-
)}
103-
</>
104-
)}
105-
</div>
106-
</section>
107-
</div>
108-
);
109-
})}
110-
</section>
111-
</div>
85+
</>
86+
) : post.accessSettings?.accessMode === 'free' ? (
87+
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-primary-50 dark:bg-primary-50 text-primary-900 dark:text-primary-900">
88+
Free
89+
</p>
90+
) : (
91+
<p className="px-4 py-2 text-sm font-bold tracking-wider rounded-full justify-self-start bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
92+
Start now
93+
</p>
94+
)}
95+
</>
96+
)}
97+
</div>
98+
</section>
99+
</div>
100+
);
101+
})}
102+
</section>
112103
) : (
113104
<>
114105
<div className="p-4 pt-8">

0 commit comments

Comments
 (0)