176 lines
3.9 KiB
Plaintext
176 lines
3.9 KiB
Plaintext
---
|
|
import type { PrivacyPolicyResponse } from '@utils/fetch-privacy-policy';
|
|
|
|
import { formatDate, timeAgo } from '@utils/dates-n-stuff';
|
|
import FontAwesome from "@components/form/FontAwesome.svelte"
|
|
|
|
|
|
interface Props {
|
|
privacyData: PrivacyPolicyResponse;
|
|
}
|
|
|
|
const { privacyData } = Astro.props;
|
|
|
|
const priv = privacyData.parameters;
|
|
|
|
const getIconName = (clasification: string) => {
|
|
if (clasification === 'good') return 'faceGood';
|
|
if (clasification === 'neutral') return 'faceMeh';
|
|
if (clasification === 'bad') return 'faceBad';
|
|
return '';
|
|
}
|
|
|
|
---
|
|
|
|
{priv && (
|
|
<div class="privacy-policy-wrapper">
|
|
|
|
{(priv.points && priv.points.length) > 0 && (
|
|
<div class="left">
|
|
<h4>Privacy Policy Summary</h4>
|
|
<ul class="no-point">
|
|
{priv.points.map((point) => (
|
|
<li class={`clasification ${point.case.classification}`}>
|
|
<FontAwesome iconName={getIconName(point.case.classification)} />
|
|
{point.title}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
<div class="right">
|
|
{ priv.rating && (
|
|
<h4>Score</h4>
|
|
<div class={`rating rating-${priv.rating}`}>
|
|
<p>{priv.rating}</p>
|
|
</div>
|
|
)}
|
|
{priv.documents && priv.documents.length > 0 && (
|
|
<h4>Documents</h4>
|
|
<ul>
|
|
{priv.documents.map((document) => (
|
|
<li class="list-item">
|
|
<a href={document.url} target="_blank">{document.name}</a>
|
|
<div class="date-block">
|
|
Created {formatDate(document.created_at)},
|
|
Last modified {timeAgo(document.updated_at)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{priv.urls && priv.urls.length > 1 && (
|
|
<h4>Domains Covered by Policy</h4>
|
|
<ul>
|
|
{priv.urls.map((url) => (
|
|
<li>{url}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{priv.points && priv.points.length > 0 && (
|
|
<h4>About the Data</h4>
|
|
<p class="about-tosdr">
|
|
This data is kindly provided by <a href="https://tosdr.org/">tosdr.org</a>.
|
|
Read full report at: <a href={`https://tosdr.org/en/service/${priv.id}`}>#{priv.id}</a>
|
|
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<style lang="scss">
|
|
|
|
.privacy-policy-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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
margin: 1rem 0 0 0;
|
|
font-size: 1.2rem;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
:global(svg) {
|
|
width: 1rem;
|
|
}
|
|
img {
|
|
border-radius: var(--curve-sm);
|
|
}
|
|
}
|
|
li {
|
|
:global(svg) {
|
|
width: 1rem;
|
|
margin-right: 0.2rem;
|
|
}
|
|
&.clasification {
|
|
&.good :global(svg) { color: #35b969; }
|
|
&.neutral :global(svg) { color: #ecd40f; }
|
|
&.bad :global(svg) { color: #e3154f; }
|
|
}
|
|
}
|
|
ul {
|
|
padding-left: 1rem;
|
|
list-style: circle;
|
|
max-height: 700px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
img {
|
|
border-radius: var(--curve-sm);
|
|
}
|
|
.list-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0.5rem;
|
|
.date-block {
|
|
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
&.no-point {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.rating {
|
|
font-size: 4rem;
|
|
width: fit-content;
|
|
padding: 0.5rem 1.5rem;
|
|
border-radius: var(--curve-lg);
|
|
border: 4px solid;
|
|
margin: 0 auto;
|
|
font-weight: bold;
|
|
|
|
&.rating-A { --rating-color: #35b969; }
|
|
&.rating-B { --rating-color: #6bb935; }
|
|
&.rating-C { --rating-color: #c7cc22; }
|
|
&.rating-D { --rating-color: #e1bb23; }
|
|
&.rating-E { --rating-color: #df8b1e; }
|
|
&.rating-F { --rating-color: #df541e; }
|
|
&.rating-G { --rating-color: #df1e1e; }
|
|
color: var(--rating-color);
|
|
border-color: var(--rating-color);
|
|
}
|
|
|
|
.about-tosdr {
|
|
display: inline;
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|