Skip to content

Commit 3469d58

Browse files
gabriel-logangabriel-logan
committed
feat: enhance HomePage layout and functionality with improved styling and icon integration
1 parent bbf20d1 commit 3469d58

1 file changed

Lines changed: 49 additions & 45 deletions

File tree

‎frontend/src/pages/Home.tsx‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { useTranslation } from "react-i18next";
2+
import { FiCalendar, FiEdit2, FiEye, FiPlus, FiTrash2 } from "react-icons/fi";
23
import { Link } from "react-router";
34
import { toast } from "react-toastify";
45

56
import { useCVsStore } from "../stores/cVsStore";
7+
import { useUserStore } from "../stores/userStore";
68
import type { CV } from "../types";
79

810
export default function HomePage() {
911
const { t } = useTranslation();
1012

13+
const { locale } = useUserStore();
14+
1115
const { cVs, deleteCV } = useCVsStore();
1216

1317
function handleDelete(cVId: CV["id"]) {
@@ -27,91 +31,91 @@ export default function HomePage() {
2731
}
2832

2933
return (
30-
<main className="min-h-screen bg-zinc-950 px-6 py-10 text-zinc-100">
34+
<main className="min-h-screen bg-zinc-950 px-4 py-8 text-zinc-100">
3135
<title>{t("Home")} - CV Maker</title>
3236

33-
<div className="mx-auto max-w-2xl space-y-8">
34-
<div className="rounded-lg border border-indigo-500/40 bg-indigo-500/10 px-4 py-3 text-sm font-medium text-indigo-300">
37+
<div className="mx-auto max-w-3xl space-y-8">
38+
<div className="rounded-lg border border-indigo-500/40 bg-indigo-500/10 px-4 py-3 text-sm text-indigo-300">
3539
{t("WelcomeBackMsg", { count: cVs.length })}
3640
</div>
3741

38-
<div className="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-4 py-3 text-sm font-medium text-yellow-300">
42+
<div className="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-4 py-3 text-sm text-yellow-300">
3943
{t("PreviewButtonMsg")}
4044
</div>
4145

42-
<div className="text-center">
46+
<div className="flex justify-center">
4347
<Link
4448
to="/preview"
45-
className="rounded-md bg-yellow-500 px-4 py-2 text-sm font-medium text-yellow-900 transition hover:bg-yellow-400"
49+
className="inline-flex items-center gap-2 rounded-md bg-yellow-500 px-5 py-2 text-sm font-medium text-yellow-900 transition hover:bg-yellow-400"
4650
>
51+
<FiEye />
4752
{t("SeePreviews")}
4853
</Link>
4954
</div>
5055

51-
<div className="space-y-6 rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow">
52-
<div className="flex items-center justify-between">
53-
<h1 className="text-2xl font-semibold">{t("YourCVs")}</h1>
56+
<section className="space-y-6 rounded-xl border border-zinc-800 bg-zinc-900 p-5 shadow">
57+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
58+
<h1 className="text-xl font-semibold">{t("YourCVs")}</h1>
5459

5560
<Link
5661
to="/create"
57-
className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-indigo-500"
62+
className="inline-flex items-center justify-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-indigo-500"
5863
>
64+
<FiPlus />
5965
{t("CreateCV")}
6066
</Link>
6167
</div>
6268

6369
{cVs.length > 0 ? (
64-
<ul className="space-y-3">
70+
<ul className="space-y-4">
6571
{cVs.map((cV) => (
6672
<li
6773
key={cV.id}
68-
className="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3"
74+
className="rounded-lg border border-zinc-800 bg-zinc-950 p-4"
6975
>
70-
<div className="flex items-center justify-between">
71-
<div>
72-
<h2 className="font-medium text-zinc-100">
73-
{t("NameColonSpace")}
74-
{cV.cVName}
75-
</h2>
76-
<p className="text-sm text-zinc-400">
76+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
77+
<div className="space-y-1">
78+
<h2 className="font-medium text-zinc-100">{cV.cVName}</h2>
79+
80+
<p className="flex items-center gap-2 text-sm text-zinc-400">
81+
<FiCalendar size={14} />
7782
{t("CreatedAtColonSpace")}
78-
{new Date(cV.createdAt).toLocaleDateString(
79-
window.navigator.language,
80-
{
81-
year: "numeric",
82-
month: "long",
83-
day: "numeric",
84-
hour: "2-digit",
85-
minute: "2-digit",
86-
},
87-
)}
83+
{new Date(cV.createdAt).toLocaleDateString(locale, {
84+
year: "numeric",
85+
month: "long",
86+
day: "numeric",
87+
hour: "2-digit",
88+
minute: "2-digit",
89+
})}
8890
</p>
89-
<p className="text-sm text-zinc-400">
91+
92+
<p className="flex items-center gap-2 text-sm text-zinc-400">
93+
<FiCalendar size={14} />
9094
{t("UpdatedAtColonSpace")}
91-
{new Date(cV.updatedAt).toLocaleDateString(
92-
window.navigator.language,
93-
{
94-
year: "numeric",
95-
month: "long",
96-
day: "numeric",
97-
hour: "2-digit",
98-
minute: "2-digit",
99-
},
100-
)}
95+
{new Date(cV.updatedAt).toLocaleDateString(locale, {
96+
year: "numeric",
97+
month: "long",
98+
day: "numeric",
99+
hour: "2-digit",
100+
minute: "2-digit",
101+
})}
101102
</p>
102103
</div>
103104

104-
<div className="flex space-x-5">
105+
<div className="flex gap-4 sm:gap-5">
105106
<Link
106107
to={`/edit/${cV.id}`}
107-
className="text-sm font-medium text-indigo-400 hover:underline"
108+
className="inline-flex items-center gap-1 text-sm font-medium text-indigo-400 hover:underline"
108109
>
110+
<FiEdit2 size={14} />
109111
{t("Edit")}
110112
</Link>
113+
111114
<button
112115
onClick={() => handleDelete(cV.id)}
113-
className="text-sm font-medium text-red-500 hover:underline"
116+
className="inline-flex items-center gap-1 text-sm font-medium text-red-500 hover:underline"
114117
>
118+
<FiTrash2 size={14} />
115119
{t("Delete")}
116120
</button>
117121
</div>
@@ -120,11 +124,11 @@ export default function HomePage() {
120124
))}
121125
</ul>
122126
) : (
123-
<div className="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-6 text-sm text-zinc-400">
127+
<div className="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-6 text-center text-sm text-zinc-400">
124128
No CVs yet. Click <strong>Create CV</strong> to get started.
125129
</div>
126130
)}
127-
</div>
131+
</section>
128132
</div>
129133
</main>
130134
);

0 commit comments

Comments
 (0)