Skip to content

Commit d5693c9

Browse files
authored
feat: add contact info and maps, update sidebar (#4)
* feat: Add contact information and maps url * feat: Add contact info and maps to content item card * fix: Update sidebar copy and GitHub link * fix: Add mailto and tel links for email and phone number
1 parent 32e65a7 commit d5693c9

File tree

4 files changed

+92
-31
lines changed

4 files changed

+92
-31
lines changed

_contents/SMKN1JKT.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@
22
name: 'SMK Negeri 1 Jakarta'
33
address: 'Jl. Budi Utomo No. 7, Jakarta Pusat, DKI Jakarta'
44
major: 'Teknik Komputer dan Jaringan, Rekayasa Perangkat Lunak, Akuntansi, Otomotif'
5+
6+
phone: '(021) 381 3630'
7+
website: 'https://www.smkn1jakarta.sch.id'
8+
maps: 'https://maps.app.goo.gl/EMCVY9B9kFiLadFb9'
59
---

_contents/SMKN2SBY.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@
22
name: 'SMK Negeri 2 Surabaya'
33
address: 'Jl. Tentara Genie Pelajar No. 41, Surabaya, Jawa Timur'
44
major: 'Teknik Otomotif, Teknik Komputer dan Jaringan, Teknik Elektronika, Teknik Mesin'
5+
6+
phone: '0315343708'
7+
website: 'https://web.smkn2sby.sch.id'
8+
maps: 'https://maps.app.goo.gl/7jGsg358xg75RH6HA'
59
---

components/ContentItem.js

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,68 @@
1+
import {
2+
HiOutlineMail,
3+
HiOutlinePhone,
4+
HiOutlineGlobeAlt,
5+
HiMap,
6+
} from 'react-icons/hi';
7+
18
export default function ContentItem({ content }) {
29
return (
3-
<div className="bg-[#263859] border border-[#6B778D] p-5 rounded-md flex flex-col gap-2">
4-
<h3 className="text-xl font-medium">{content?.name}</h3>
5-
<p className="text-[#DDE6ED]/[0.9] pb-2">{content?.address}</p>
6-
<div className="border-t pt-4 border-[#6B778D]/[0.5]">
10+
<div className="bg-[#263859] border border-[#6B778D] p-5 rounded-md space-y-4">
11+
<div className="space-y-2">
12+
<h3 className="text-xl font-medium">{content?.name}</h3>
13+
<p className="text-[#DDE6ED]/[0.9]">{content?.address}</p>
714
<p className="text-[#DDE6ED]/[0.9]">
815
Jurusan Kompetensi Keahlian: {''}
916
<span className="text-white">{content?.major}</span>
1017
</p>
1118
</div>
19+
<div className="border-t pt-4 border-[#6B778D]/[0.5]">
20+
<div className="flex gap-6">
21+
{content?.email && (
22+
<a
23+
href={`mailto:${content?.email}`}
24+
className="flex items-center gap-x-1.5"
25+
>
26+
<HiOutlineMail className="text-xl" /> {content?.email}
27+
</a>
28+
)}
29+
{content?.phone && (
30+
<a
31+
href={`tel:${content?.phone}`}
32+
className="flex items-center gap-x-1.5"
33+
>
34+
<HiOutlinePhone className="text-xl" /> {content?.phone}
35+
</a>
36+
)}
37+
{content?.website && (
38+
<a
39+
href={content?.website}
40+
target="_blank"
41+
className="flex items-center gap-x-1.5"
42+
>
43+
<HiOutlineGlobeAlt className="text-xl" />{' '}
44+
{content?.website.replace('https://', '')}
45+
</a>
46+
)}
47+
{content?.maps && (
48+
<a
49+
href={content?.maps}
50+
target="_blank"
51+
className="flex items-center gap-x-1.5"
52+
>
53+
<HiMap className="text-xl" /> Maps Sekolah
54+
</a>
55+
)}
56+
{!content?.email &&
57+
!content?.phone &&
58+
!content?.website &&
59+
!content?.maps && (
60+
<p className="text-[#DDE6ED]/[0.9]">
61+
Informasi kontak belum tersedia
62+
</p>
63+
)}
64+
</div>
65+
</div>
1266
</div>
1367
);
1468
}

components/SideBar.js

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,39 @@
11
import { FaGithub } from 'react-icons/fa';
2-
import { BsDiscord } from 'react-icons/bs';
32

43
export default function SideBar() {
54
return (
65
<div className="w-2/6 border-r border-[#6B778D]/[0.8]">
7-
<div className="w-2/6 fixed p-8 flex flex-col gap-8 min-h-screen">
6+
<div className="w-2/6 fixed p-8 flex flex-col gap-6 min-h-screen">
87
<div className="flex flex-col gap-2">
98
<h1 className="text-2xl">SMKID</h1>
109
<p className="text-justify">
11-
Platform ini hadir untuk membantu kamu menemukan SMK di seluruh
12-
Indonesia! Di sini, kamu bisa melihat daftar SMK lengkap dengan
13-
alamatnya. Cukup klik nama sekolah untuk langsung menuju situs
14-
resminya dan mulai eksplorasi jurusan yang cocok buatmu!
10+
Jelajahi SMK di seluruh Indonesia dengan mudah! Temukan informasi
11+
lengkap mulai dari alamat, jurusan, hingga kontak sekolah yang kamu
12+
butuhkan.
13+
</p>
14+
<p className="text-justify">
15+
Kamu juga bisa ikut berperan dalam menambah informasi sekolah SMK.
16+
Yuk, bantu kami memperkaya data SMK di Indonesia dengan
17+
berkontribusi langsung{' '}
18+
<a
19+
href="https://github.com/24-dev/smkid"
20+
target="_blank"
21+
className="underline underline-offset-2"
22+
>
23+
di sini
24+
</a>
25+
!
1526
</p>
1627
</div>
17-
18-
<div className="flex gap-6">
19-
<a
20-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
21-
href="https://github.com/24-dev"
22-
target="_blank"
23-
rel="noopener noreferrer"
24-
>
25-
<FaGithub />
26-
Github
27-
</a>
28-
<a
29-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
30-
href="https://discord.gg/nzCPg9mq"
31-
target="_blank"
32-
rel="noopener noreferrer"
33-
>
34-
<BsDiscord />
35-
Discord
36-
</a>
37-
</div>
28+
<a
29+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
30+
href="https://github.com/24-dev/smkid"
31+
target="_blank"
32+
rel="noopener noreferrer"
33+
>
34+
<FaGithub />
35+
Github
36+
</a>
3837
</div>
3938
</div>
4039
);

0 commit comments

Comments
 (0)