Skip to content

Commit 2b1c403

Browse files
fezcodefezcode
committed
fix(cards): stars and margins
1 parent 6ca84d3 commit 2b1c403

File tree

3 files changed

+36
-21
lines changed

3 files changed

+36
-21
lines changed

‎src/components/LogMetadata.js‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,93 @@
11
import React from 'react';
22
import Label from './Label';
3+
import { Star } from '@phosphor-icons/react';
34

45
const LogMetadata = ({ metadata }) => {
56
if (!metadata) {
67
return null;
78
}
89

10+
const renderStars = (rating) => {
11+
const stars = [];
12+
for (let i = 0; i < 5; i++) {
13+
if (i < rating) {
14+
stars.push(<Star key={i} size={16} weight="fill" className="text-yellow-400" />);
15+
} else {
16+
stars.push(<Star key={i} size={16} weight="fill" className="text-gray-500" />);
17+
}
18+
}
19+
return <div className="flex ml-1 mt-1">{stars}</div>;
20+
};
21+
922
return (
1023
<aside className="sticky top-24">
1124
<div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">
1225
<h3 className="text-lg font-semibold text-gray-100 mb-4 border-b pb-2 border-gray-500">About Log</h3>
1326
<div className="space-y-4">
1427
<div>
1528
<Label>Title</Label>
16-
<p className="text-gray-300">{metadata.title}</p>
29+
<p className="text-gray-300 ml-1 mt-1">{metadata.title}</p>
1730
</div>
1831
<div>
1932
<Label>Category</Label>
20-
<p className="text-gray-300">{metadata.category}</p>
33+
<p className="text-gray-300 ml-1 mt-1">{metadata.category}</p>
2134
</div>
2235
{metadata.author && (
2336
<div>
2437
<Label>Author</Label>
25-
<p className="text-gray-300">{metadata.author}</p>
38+
<p className="text-gray-300 ml-1 mt-1">{metadata.author}</p>
2639
</div>
2740
)}
2841
{metadata.director && (
2942
<div>
3043
<Label>Director</Label>
31-
<p className="text-gray-300">{metadata.director}</p>
44+
<p className="text-gray-300 ml-1 mt-1">{metadata.director}</p>
3245
</div>
3346
)}
3447
{metadata.platform && (
3548
<div>
3649
<Label>Platform</Label>
37-
<p className="text-gray-300">{metadata.platform}</p>
50+
<p className="text-gray-300 ml-1 mt-1">{metadata.platform}</p>
3851
</div>
3952
)}
4053
{metadata.source && (
4154
<div>
4255
<Label>Source</Label>
43-
<p className="text-gray-300">{metadata.source}</p>
56+
<p className="text-gray-300 ml-1 mt-1">{metadata.source}</p>
4457
</div>
4558
)}
4659
{metadata.artist && (
4760
<div>
4861
<Label>Artist</Label>
49-
<p className="text-gray-300">{metadata.artist}</p>
62+
<p className="text-gray-300 ml-1 mt-1">{metadata.artist}</p>
5063
</div>
5164
)}
5265
{metadata.year && (
5366
<div>
5467
<Label>Year</Label>
55-
<p className="text-gray-300">{metadata.year}</p>
68+
<p className="text-gray-300 ml-1 mt-1">{metadata.year}</p>
5669
</div>
5770
)}
5871
{metadata.creator && (
5972
<div>
6073
<Label>Creator</Label>
61-
<p className="text-gray-300">{metadata.creator}</p>
74+
<p className="text-gray-300 ml-1 mt-1">{metadata.creator}</p>
6275
</div>
6376
)}
6477
<div>
6578
<Label>Date</Label>
66-
<p className="text-gray-300">{metadata.date}</p>
67-
</div>
68-
<div>
69-
<Label>Rating</Label>
70-
<p className="text-gray-300">{metadata.rating}/5</p>
79+
<p className="text-gray-300 ml-1 mt-1">{metadata.date}</p>
7180
</div>
81+
{metadata.rating !== undefined && metadata.rating !== null && (
82+
<div>
83+
<Label>Rating</Label>
84+
{renderStars(metadata.rating)}
85+
</div>
86+
)}
7287
{metadata.link && (
7388
<div>
7489
<Label>Link</Label>
75-
<p className="text-gray-300"><a href={metadata.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View</a></p>
90+
<p className="text-gray-300 ml-1 mt-1"><a href={metadata.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View</a></p>
7691
</div>
7792
)}
7893
</div>

‎src/components/PostMetadata.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ const PostMetadata = ({ metadata, readingProgress, isAtTop, overrideDate, update
2323
<div className="space-y-4">
2424
<div>
2525
<Label>Title</Label>
26-
<p className="text-gray-300">{metadata.title}</p>
26+
<p className="text-gray-300 ml-1 mt-1 ">{metadata.title}</p>
2727
</div>
2828
<div>
2929
<Label>Date</Label>
30-
<p className="text-gray-300">{displayDate}</p>
30+
<p className="text-gray-300 ml-1 mt-1">{displayDate}</p>
3131
</div>
3232
{updatedDate && (
3333
<div>
3434
<Label>Updated</Label>
35-
<p className="text-gray-300">{updatedDate}</p>
35+
<p className="text-gray-300 ml-1 mt-1">{updatedDate}</p>
3636
</div>
3737
)}
3838
{metadata.tags && (

‎src/components/ProjectMetadata.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@ const ProjectMetadata = ({ project }) => {
1313
<div className="space-y-4">
1414
<div>
1515
<Label>Title</Label>
16-
<p className="text-gray-300">{project.title}</p>
16+
<p className="text-gray-300 ml-1 mt-1">{project.title}</p>
1717
</div>
1818
{project.link && (
1919
<div>
2020
<Label>Link</Label>
21-
<p className="text-gray-300"><a href={project.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View Project</a></p>
21+
<p className="text-gray-300 ml-1 mt-1"><a href={project.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View Project</a></p>
2222
</div>
2323
)}
2424
{project.pinned && (
2525
<div>
2626
<Label>Status</Label>
27-
<p className="text-gray-300">Pinned</p>
27+
<p className="text-gray-300 ml-1 mt-1">Pinned</p>
2828
</div>
2929
)}
3030
{project.technologies && project.technologies.length > 0 && (

0 commit comments

Comments
 (0)