ptb-fe/components/Main/DetailPT.js

import React, { useState, useEffect } from "react";

function DetailPT({ data }) {
	return (
		<div className="card card-default">
			<div className="card-body">
				<div className="text-center">
					<h3 className="mt-0">{data.nama}</h3>
					<p>{data.sk_pendirian}</p>
					<p>Pembina: {data.pembina.nama}</p>
					<p>{`${data.alamat.jalan} ${data.alamat.rt ? `rt ${data.alamat.rt}` : ""} ${data.alamat.rw ? `rt ${data.alamat.rw}` : ""}, ${data.alamat.kab_kota.nama}, ${data.propinsi.nama}`}</p>
				</div>
				<hr />
				<ul className="list-unstyled px-4">
					<li>
						<em className="fa fa-globe fa-fw mr-3"></em>
						<a href={`https://${data.website}`}>{data.website}</a>
					</li>
					<li>
						<em className="fa fa-phone fa-fw mr-3"></em>
						{data.telepon}
					</li>
					<li>
						<em className="fa fa-at fa-fw mr-3"></em>
						<a href={`mailto:${data.email}`}>{data.email}</a>
					</li>
				</ul>
			</div>
		</div>
	);
}

export default DetailPT;