-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(components): update component to v2
- Loading branch information
1 parent
867cd74
commit 0e99639
Showing
8 changed files
with
309 additions
and
194 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,166 +1,161 @@ | ||
<template> | ||
<footer class="pdap-footer"> | ||
<div class="pdap-flex-container-center"> | ||
<ul class="pdap-footer-social-links"> | ||
<li | ||
v-for="link in links" | ||
:key="link.text" | ||
class="pdap-footer-link-container" | ||
<footer | ||
ref="footerRef" | ||
class="bg-brand-wine text-neutral-50 dark:text-neutral-950 flex flex-col lg:flex-row gap-4 xl:gap-12 p-6 lg:p-4 sticky bottom-0 text-med xl:text-xl" | ||
> | ||
<!-- LINKS --> | ||
<ul | ||
class="grid grid-cols-2 gap-2 md:grid-cols-[auto_auto_auto] lg:w-max lg:gap-x-3 xl:gap-x-4" | ||
> | ||
<li v-for="link in links" :key="link.text"> | ||
<a v-if="link.href" :href="link.href" target="_blank" rel="noreferrer"> | ||
<FontAwesomeIcon v-if="link.icon" :icon="iconMap.get(link.icon)!" /> | ||
{{ link.text }} | ||
</a> | ||
<router-link | ||
v-if="link.path" | ||
active-class="pdap-footer-social-link-current" | ||
exact-active-class="pdap-footer-social-link-current-exact" | ||
class="pdap-footer-social-link" | ||
:to="link.path" | ||
> | ||
<a | ||
v-if="link.href" | ||
class="pdap-footer-social-link" | ||
:href="link.href" | ||
target="_blank" | ||
referrerpolicy="no-referrer" | ||
>{{ link.text }}</a | ||
> | ||
<router-link | ||
v-if="link.path" | ||
active-class="pdap-footer-social-link-current" | ||
exact-active-class="pdap-footer-social-link-current-exact" | ||
class="pdap-footer-social-link" | ||
:to="link.path" | ||
>{{ link.text }}</router-link | ||
> | ||
</li> | ||
</ul> | ||
<FontAwesomeIcon v-if="link.icon" :icon="iconMap.get(link.icon)!" /> | ||
{{ link.text }} | ||
</router-link> | ||
</li> | ||
</ul> | ||
|
||
<!-- FUNDRAISING METER --> | ||
<div> | ||
<span class="flex gap-1"> | ||
<a href="https://pdap.io/donate" target="_blank" rel="noreferrer"> | ||
<span><FontAwesomeIcon :icon="faCircleDollarToSlot" /> Donate</span> | ||
(${{ fundraisingData.raised }} of ${{ fundraisingData.goal }} raised | ||
<span v-if="fundraisingData.raised === fundraisingData.goal">🎉</span | ||
>) | ||
</a> | ||
</span> | ||
|
||
<span | ||
class="inline-block bg-neutral-50 dark:bg-neutral-950 h-3 w-full rounded-full relative before:inline-block before:h-full before:w-[var(--fundraising-progress)] before:bg-brand-gold before:absolute before:rounded-l-full" | ||
:class="{ | ||
'before:rounded-r-full': | ||
fundraisingData.raised === fundraisingData.goal, | ||
}" | ||
/> | ||
</div> | ||
|
||
<!-- Copyright and policies --> | ||
<p class="pdap-footer-copyright"> | ||
© {{ new Date().getFullYear() }} Police Data Accessibility Project<br /> | ||
</p> | ||
<p class="pdap-footer-copyright"> | ||
PDAP is a non-profit. EIN: 85-4207132. | ||
<a | ||
href="https://docs.pdap.io/meta/policy/pdap-privacy-policy" | ||
alt="Privacy Policy" | ||
target="_blank" | ||
><br /> | ||
Privacy Policy <i class="fa fa-external-link" /></a | ||
><br /> | ||
<a href="mailto:[email protected]">[email protected]</a> | ||
<!-- COPYRIGHT AND TRANSPARENCY --> | ||
<div class="flex gap-4 justify-between lg:justify-start lg:ml-auto"> | ||
<p class="lg:max-w-[325px] lg:text-right xl:max-w-[375px]"> | ||
© {{ new Date().getFullYear() }} Police Data Accessibility Project is a | ||
non-profit. EIN: 85-4207132. | ||
</p> | ||
|
||
<!-- Widget / logo links --> | ||
<div class="pdap-footer-widget-links"> | ||
<a href="https://www.guidestar.org/profile/85-4207132" target="_blank"> | ||
<img | ||
alt="platinum transparency" | ||
src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4" | ||
/> | ||
</a> | ||
|
||
<a | ||
v-if="!navLogoLinkIsPath" | ||
:href="logoImageAnchorPath" | ||
class="pdap-footer-logo" | ||
><img | ||
:src="logoImageSrc" | ||
loading="lazy" | ||
width="250" | ||
alt="Police Data Accessibility Project Logo" | ||
/></a> | ||
<router-link v-else :to="logoImageAnchorPath" class="pdap-footer-logo" | ||
><img | ||
:src="logoImageSrc" | ||
loading="lazy" | ||
width="250" | ||
alt="Police Data Accessibility Project Logo" | ||
/></router-link> | ||
</div> | ||
<a | ||
href="https://www.guidestar.org/profile/85-4207132" | ||
target="_blank" | ||
rel="noreferrer" | ||
> | ||
<img | ||
class="w-14 h-14" | ||
alt="platinum transparency" | ||
src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4" | ||
/> | ||
</a> | ||
</div> | ||
</footer> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { inject } from 'vue'; | ||
import { PdapFooterProps, PdapFooterSocialLinks } from './types'; | ||
import acronym from '../../assets/acronym.svg'; | ||
const props = withDefaults(defineProps<PdapFooterProps>(), { | ||
logoImageSrc: acronym, | ||
logoImageAnchorPath: '/', | ||
}); | ||
import { inject, onMounted, ref } from 'vue'; | ||
import { | ||
PdapFooterSocialLinks, | ||
FooterIconName, | ||
PdapFooterProps, | ||
} from './types'; | ||
import { FOOTER_LINK_ICONS } from './constants'; | ||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; | ||
import { | ||
faGithub, | ||
faDiscord, | ||
faLinkedin, | ||
IconDefinition, | ||
} from '@fortawesome/free-brands-svg-icons'; | ||
import { | ||
faSmile, | ||
faInbox, | ||
faBook, | ||
faCircleDollarToSlot, | ||
} from '@fortawesome/free-solid-svg-icons'; | ||
const { fundraisingData } = defineProps<PdapFooterProps>(); | ||
const iconMap = new Map<FooterIconName, IconDefinition>([ | ||
[FOOTER_LINK_ICONS.GITHUB, faGithub], | ||
[FOOTER_LINK_ICONS.DISCORD, faDiscord], | ||
[FOOTER_LINK_ICONS.LINKEDIN, faLinkedin], | ||
[FOOTER_LINK_ICONS.JOBS, faSmile], | ||
[FOOTER_LINK_ICONS.NEWSLETTER, faInbox], | ||
[FOOTER_LINK_ICONS.DOCS, faBook], | ||
]); | ||
const links = inject<PdapFooterSocialLinks[]>('footerLinks', [ | ||
{ | ||
href: 'https://github.com/orgs/Police-Data-Accessibility-Project', | ||
text: 'Github', | ||
icon: FOOTER_LINK_ICONS.GITHUB, | ||
}, | ||
{ | ||
href: 'https://discord.gg/wMqex8nKZJ', | ||
text: 'Discord', | ||
icon: FOOTER_LINK_ICONS.DISCORD, | ||
}, | ||
{ | ||
href: 'https://www.linkedin.com/company/pdap', | ||
text: 'LinkedIn', | ||
icon: FOOTER_LINK_ICONS.LINKEDIN, | ||
}, | ||
{ | ||
path: '/jobs', | ||
href: 'https://pdap.io/jobs', | ||
text: 'Jobs', | ||
icon: FOOTER_LINK_ICONS.JOBS, | ||
}, | ||
{ | ||
href: 'https://newsletter.pdap.io/', | ||
text: 'Newsletter', | ||
icon: FOOTER_LINK_ICONS.NEWSLETTER, | ||
}, | ||
{ | ||
href: 'https://docs.pdap.io/', | ||
text: 'Docs', | ||
icon: FOOTER_LINK_ICONS.DOCS, | ||
}, | ||
]); | ||
const navLogoLinkIsPath = props.logoImageAnchorPath.startsWith('/'); | ||
const footerRef = ref(); | ||
onMounted(() => { | ||
setFundraisingProgress(); | ||
}); | ||
function setFundraisingProgress() { | ||
const progress = (fundraisingData.raised / fundraisingData.goal) * 100; | ||
console.debug({ progress }); | ||
if (footerRef.value) | ||
footerRef.value.style.setProperty('--fundraising-progress', progress + '%'); | ||
} | ||
</script> | ||
|
||
<script lang="ts"> | ||
/** | ||
* # `Footer` | ||
* | ||
* ## Props | ||
* @prop {string} logoImageSrc Src for the PDAP logo image to be displayed | ||
* @prop {string } logoImageAnchorPath Path for the link that wraps the PDAP logo image | ||
* | ||
*/ | ||
export default { | ||
name: 'PdapFooter', | ||
}; | ||
</script> | ||
|
||
<style> | ||
@tailwind components; | ||
@layer components { | ||
.pdap-footer { | ||
@apply bg-brand-wine mt-auto mx-auto px-2 py-6 relative text-center text-[rgba(255,251,250)] text-lg; | ||
@apply md:py-8 md:px-2; | ||
} | ||
.pdap-footer-social-links { | ||
@apply flex justify-center flex-wrap gap-2; | ||
@apply md:flex-nowrap; | ||
} | ||
.pdap-footer-social-links > * { | ||
@apply mb-2; | ||
} | ||
.pdap-footer .pdap-flex-container > * { | ||
@apply mb-2 text-inherit; | ||
} | ||
.pdap-footer-widget-links { | ||
@apply flex justify-center mt-6; | ||
} | ||
.pdap-footer-logo { | ||
@apply invert ml-7 w-[10rem]; | ||
} | ||
.pdap-footer-logo img { | ||
@apply w-full; | ||
} | ||
.pdap-nav-link-container { | ||
@apply align-top basis-[max-content] inline-block list-none relative; | ||
@apply lg:flex-shrink-0 lg:mx-2 lg:mb-2; | ||
} | ||
.pdap-footer-social-link { | ||
@apply cursor-pointer border-2 border-brand-gold decoration-0 disabled:opacity-50 font-semibold inline-block mx-1 px-6 py-2 rounded-none text-center text-lg w-full bg-brand-gold text-neutral-50; | ||
@apply hover:brightness-85 lg:text-xl sm:max-w-max; | ||
} | ||
} | ||
</style> |
103 changes: 68 additions & 35 deletions
103
src/components/Footer/__snapshots__/footer.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,76 @@ | ||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
||
exports[`Footer component > Renders a footer 1`] = ` | ||
<footer class="pdap-footer"> | ||
<div class="pdap-flex-container-center"> | ||
<ul class="pdap-footer-social-links"> | ||
<li class="pdap-footer-link-container"> | ||
<a class="pdap-footer-social-link" href="https://github.com/orgs/Police-Data-Accessibility-Project" referrerpolicy="no-referrer" target="_blank">Github</a> | ||
<!--v-if--> | ||
</li> | ||
<li class="pdap-footer-link-container"> | ||
<a class="pdap-footer-social-link" href="https://discord.gg/wMqex8nKZJ" referrerpolicy="no-referrer" target="_blank">Discord</a> | ||
<!--v-if--> | ||
</li> | ||
<li class="pdap-footer-link-container"> | ||
<a class="pdap-footer-social-link" href="https://www.linkedin.com/company/pdap" referrerpolicy="no-referrer" target="_blank">LinkedIn</a> | ||
<!--v-if--> | ||
</li> | ||
<li class="pdap-footer-link-container"> | ||
<!--v-if--> | ||
<router-link active-class="pdap-footer-social-link-current" class="pdap-footer-social-link" exact-active-class="pdap-footer-social-link-current-exact" to="/jobs">Jobs</router-link> | ||
</li> | ||
</ul><!-- Copyright and policies --> | ||
<p class="pdap-footer-copyright"> © 2024 Police Data Accessibility Project | ||
<br> | ||
</p> | ||
<p class="pdap-footer-copyright"> PDAP is a non-profit. EIN: 85-4207132. <a alt="Privacy Policy" href="https://docs.pdap.io/meta/policy/pdap-privacy-policy" target="_blank"> | ||
<br> Privacy Policy <i class="fa fa-external-link"></i> | ||
<footer class="bg-brand-wine text-neutral-50 dark:text-neutral-950 flex flex-col lg:flex-row gap-4 xl:gap-12 p-6 lg:p-4 sticky bottom-0 text-med xl:text-xl" style="--fundraising-progress: 50%;"> | ||
<!-- LINKS --> | ||
<ul class="grid grid-cols-2 gap-2 md:grid-cols-[auto_auto_auto] lg:w-max lg:gap-x-3 xl:gap-x-4"> | ||
<li> | ||
<a href="https://github.com/orgs/Police-Data-Accessibility-Project" rel="noreferrer" target="_blank"> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-github" data-icon="github" data-prefix="fab" focusable="false" role="img" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" fill="currentColor" /> | ||
</svg> Github | ||
</a> | ||
<br> | ||
<a href="mailto:[email protected]">[email protected]</a> | ||
</p><!-- Widget / logo links --> | ||
<div class="pdap-footer-widget-links"> | ||
<a href="https://www.guidestar.org/profile/85-4207132" target="_blank"> | ||
<img alt="platinum transparency" src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4"> | ||
<!--v-if--> | ||
</li> | ||
<li> | ||
<a href="https://discord.gg/wMqex8nKZJ" rel="noreferrer" target="_blank"> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-discord" data-icon="discord" data-prefix="fab" focusable="false" role="img" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" fill="currentColor" /> | ||
</svg> Discord | ||
</a> | ||
<router-link class="pdap-footer-logo" to="/"> | ||
<img alt="Police Data Accessibility Project Logo" src="/src/assets/acronym.svg" width="250"> | ||
</router-link> | ||
</div> | ||
<!--v-if--> | ||
</li> | ||
<li> | ||
<a href="https://www.linkedin.com/company/pdap" rel="noreferrer" target="_blank"> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-linkedin" data-icon="linkedin" data-prefix="fab" focusable="false" role="img" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" fill="currentColor" /> | ||
</svg> LinkedIn | ||
</a> | ||
<!--v-if--> | ||
</li> | ||
<li> | ||
<a href="https://pdap.io/jobs" rel="noreferrer" target="_blank"> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-face-smile" data-icon="face-smile" data-prefix="fas" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.1 325.5C182 346.2 212.6 368 256 368s74-21.8 91.9-42.5c5.8-6.7 15.9-7.4 22.6-1.6s7.4 15.9 1.6 22.6C349.8 372.1 311.1 400 256 400s-93.8-27.9-116.1-53.5c-5.8-6.7-5.1-16.8 1.6-22.6s16.8-5.1 22.6 1.6zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" fill="currentColor" /> | ||
</svg> Jobs | ||
</a> | ||
<!--v-if--> | ||
</li> | ||
<li> | ||
<a href="https://newsletter.pdap.io/" rel="noreferrer" target="_blank"> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-inbox" data-icon="inbox" data-prefix="fas" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z" fill="currentColor" /> | ||
</svg> Newsletter | ||
</a> | ||
<!--v-if--> | ||
</li> | ||
<li> | ||
<a href="https://docs.pdap.io/" rel="noreferrer" target="_blank"> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-book" data-icon="book" data-prefix="fas" focusable="false" role="img" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M96 0C43 0 0 43 0 96L0 416c0 53 43 96 96 96l288 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64c17.7 0 32-14.3 32-32l0-320c0-17.7-14.3-32-32-32L384 0 96 0zm0 384l256 0 0 64L96 448c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16zm16 48l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" fill="currentColor" /> | ||
</svg> Docs | ||
</a> | ||
<!--v-if--> | ||
</li> | ||
</ul><!-- FUNDRAISING METER --> | ||
<div> | ||
<span class="flex gap-1"> | ||
<a href="https://pdap.io/donate" rel="noreferrer" target="_blank"> | ||
<span> | ||
<svg aria-hidden="true" class="svg-inline--fa fa-circle-dollar-to-slot" data-icon="circle-dollar-to-slot" data-prefix="fas" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> | ||
<path class="" d="M326.7 403.7c-22.1 8-45.9 12.3-70.7 12.3s-48.7-4.4-70.7-12.3l-.8-.3c-30-11-56.8-28.7-78.6-51.4C70 314.6 48 263.9 48 208C48 93.1 141.1 0 256 0S464 93.1 464 208c0 55.9-22 106.6-57.9 144c-1 1-2 2.1-3 3.1c-21.4 21.4-47.4 38.1-76.3 48.6zM256 91.9c-11.1 0-20.1 9-20.1 20.1l0 6c-5.6 1.2-10.9 2.9-15.9 5.1c-15 6.8-27.9 19.4-31.1 37.7c-1.8 10.2-.8 20 3.4 29c4.2 8.8 10.7 15 17.3 19.5c11.6 7.9 26.9 12.5 38.6 16l2.2 .7c13.9 4.2 23.4 7.4 29.3 11.7c2.5 1.8 3.4 3.2 3.7 4c.3 .8 .9 2.6 .2 6.7c-.6 3.5-2.5 6.4-8 8.8c-6.1 2.6-16 3.9-28.8 1.9c-6-1-16.7-4.6-26.2-7.9c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-2.2-.7-4.3-1.5-6.4-2.1c-10.5-3.5-21.8 2.2-25.3 12.7s2.2 21.8 12.7 25.3c1.2 .4 2.7 .9 4.4 1.5c7.9 2.7 20.3 6.9 29.8 9.1l0 6.4c0 11.1 9 20.1 20.1 20.1s20.1-9 20.1-20.1l0-5.5c5.3-1 10.5-2.5 15.4-4.6c15.7-6.7 28.4-19.7 31.6-38.7c1.8-10.4 1-20.3-3-29.4c-3.9-9-10.2-15.6-16.9-20.5c-12.2-8.8-28.3-13.7-40.4-17.4l-.8-.2c-14.2-4.3-23.8-7.3-29.9-11.4c-2.6-1.8-3.4-3-3.6-3.5c-.2-.3-.7-1.6-.1-5c.3-1.9 1.9-5.2 8.2-8.1c6.4-2.9 16.4-4.5 28.6-2.6c4.3 .7 17.9 3.3 21.7 4.3c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-4.4-1.2-14.4-3.2-21-4.4l0-6.3c0-11.1-9-20.1-20.1-20.1zM48 352l16 0c19.5 25.9 44 47.7 72.2 64L64 416l0 32 192 0 192 0 0-32-72.2 0c28.2-16.3 52.8-38.1 72.2-64l16 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48z" fill="currentColor" /> | ||
</svg> Donate | ||
</span> ($5000 of $10000 raised | ||
<!--v-if-->) | ||
</a> | ||
</span> | ||
<span class="inline-block bg-neutral-50 dark:bg-neutral-950 h-3 w-full rounded-full relative before:inline-block before:h-full before:w-[var(--fundraising-progress)] before:bg-brand-gold before:absolute before:rounded-l-full"></span> | ||
</div><!-- COPYRIGHT AND TRANSPARENCY --> | ||
<div class="flex gap-4 justify-between lg:justify-start lg:ml-auto"> | ||
<p class="lg:max-w-[325px] lg:text-right xl:max-w-[375px]"> © 2024 Police Data Accessibility Project is a non-profit. EIN: 85-4207132. </p><!-- Widget / logo links --> | ||
<a href="https://www.guidestar.org/profile/85-4207132" rel="noreferrer" target="_blank"> | ||
<img alt="platinum transparency" class="w-14 h-14" src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4"> | ||
</a> | ||
</div> | ||
</footer> | ||
`; |
Oops, something went wrong.