awesome-privacy/web/src/components/things/AndroidDetailedInfo.astro

---
import type { AndroidInfo } from '@utils/fetch-android-info';
import { formatDate } from '@utils/dates-n-stuff';
import FontAwesome from '@components/form/FontAwesome.svelte';

interface Props {
	androidData: AndroidInfo;
}

const { androidData } = Astro.props;

function permissionToReadable(permission: string): string {
	return (permission.split('.').pop() || '')
		.replace(/_/g, ' ')
		.toLowerCase()
		.split(' ')
		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
		.join(' ');
}
---

<div class="android-info-wrapper">
	<div class="left">
		<h4>Update Info</h4>
		<ul class="list-table">
			<li>
				<span class="lbl">App</span>
				<span class="val">
					<!-- <img width="20" src={`https://reports.exodus-privacy.eu.org/en/reports/${androidData.version_code}/icon`} alt="Android Icon" /> -->
					<a
						href={`https://play.google.com/store/apps/details?id=${androidData.handle}`}
						>{androidData.app_name}</a
					>
				</span>
			</li>
			<li>
				<span class="lbl">Creation Date</span>
				<span class="val">{formatDate(androidData.created)}</span>
			</li>
			<li>
				<span class="lbl">Last Updated</span>
				<span class="val">{formatDate(androidData.updated)}</span>
			</li>
			<li>
				<span class="lbl">Current Version</span>
				<span class="val">{androidData.version_name}</span>
			</li>
			{
				androidData.creator && (
					<li>
						<span class="lbl">Creator</span>
						<span class="val">{androidData.creator}</span>
					</li>
				)
			}
			{
				androidData.downloads && (
					<li>
						<span class="lbl">Downloads</span>
						<span class="val">{androidData.downloads}</span>
					</li>
				)
			}
		</ul>

		<h4>Trackers</h4>
		{
			(androidData.trackers || []).length === 0 && (
				<p class="all-good">
					<FontAwesome iconName="noTrackers" />
					No trackers found
				</p>
			)
		}
		<ul class="list">
			{
				(androidData.trackers || []).map((track) => (
					<li title={track.code_signature}>{track.name}</li>
				))
			}
		</ul>
	</div>

	<div class="right">
		<h4>Permissions</h4>
		{
			(androidData.permissions || []).length === 0 && (
				<p class="all-good">
					<FontAwesome iconName="noTrackers" />
					No permissions required
				</p>
			)
		}
		<ul class="list">
			{
				(androidData.permissions || []).map((perm) => (
					<li title={perm}>{permissionToReadable(perm)}</li>
				))
			}
		</ul>
	</div>
</div>

<style lang="scss">
	.android-info-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem;
		.left,
		.right {
			width: calc(50% - 1rem);
			@media screen and (max-width: 768px) {
				width: 100%;
			}
		}
	}

	h3 {
		margin: 0;
		font-size: 1.6rem;
	}

	h4 {
		margin: 1rem 0 0 0;
		font-size: 1.2rem;
	}

	ul {
		padding-left: 0;
		list-style: none;
		max-height: 300px;
		overflow-y: auto;
		overflow-x: hidden;
		img {
			border-radius: var(--curve-sm);
		}
		.list-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 0.5rem;
		}
		&.list-table {
			font-size: 0.9rem;
			padding-left: 0;
			li {
				display: flex;
				justify-content: space-between;
				padding: 0.1rem 0;
				.lbl {
					font-weight: 400;
				}
				.val {
					img {
						margin-right: 0.5rem;
					}
				}
				&:not(:last-child) {
					border-bottom: 1px solid #5f53f440;
				}
			}
		}
		&.list {
			list-style: circle;
			padding-left: 1rem;
		}
	}

	.all-good {
		color: var(--success);
		display: flex;
		align-items: center;
		gap: 0.5rem;
		:global(svg) {
			width: 1.5rem;
		}
	}
</style>