src/platform/site-wide/va-footer/components/CrisisPanel.jsx
/* eslint-disable @department-of-veterans-affairs/prefer-telephone-component */
import React from 'react';
export default function CrisisPanel() {
return (
<div
id="modal-crisisline"
className="va-overlay va-modal va-modal-large"
role="alertdialog"
>
<div className="va-crisis-panel va-modal-inner">
<button
aria-label="Close this modal"
className="va-modal-close va-overlay-close va-crisis-panel-close"
type="button"
>
{/* close icon */}
{/* Convert to va-icon when injected header/footer split is in prod: https://github.com/department-of-veterans-affairs/vets-website/pull/27590 */}
<svg
aria-hidden="true"
className="va-overlay-close"
focusable="false"
id="close-button-icon"
viewBox="2 2 20 20"
width="30"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#005ea2"
d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5a10.1 10.1 0 0 1-9.21-6.1A9.74 9.74 0 0 1 2 12a10.1 10.1 0 0 1 6.1-9.21A9.74 9.74 0 0 1 12 2a10.1 10.1 0 0 1 9.21 6.1c.53 1.22.79 2.52.79 3.9s-.26 2.68-.79 3.9a10.1 10.1 0 0 1-5.31 5.31A9.74 9.74 0 0 1 12 22Z"
/>
</svg>
</button>
<div className="va-overlay-body va-crisis-panel-body">
<h3 className="va-crisis-panel-title">
We’re here anytime, day or night – 24/7
</h3>
<p>
If you are a Veteran in crisis or concerned about one, connect with
our caring, qualified responders for confidential help. Many of them
are Veterans themselves.
</p>
<ul className="va-crisis-panel-list">
<li>
{/* telephone icon */}
{/* Convert to va-icon when injected header/footer split is in prod: https://github.com/department-of-veterans-affairs/vets-website/pull/27590 */}
<svg
aria-hidden="true"
className="va-crisis-panel-icon"
focusable="false"
style={{ transform: 'rotate(270deg)' }}
viewBox="0 0 23 23"
width="26"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#000"
fillRule="evenodd"
clipRule="evenodd"
d="M6.62 10.79C8.06 13.62 10.38 15.93 13.21 17.38L15.41 15.18C15.68 14.91 16.08 14.82 16.43 14.94C17.55 15.31 18.76 15.51 20 15.51C20.55 15.51 21 15.96 21 16.51V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.7 6.45 9.07 7.57C9.18 7.92 9.1 8.31 8.82 8.59L6.62 10.79Z"
/>
</svg>
{
// eslint-disable-next-line @department-of-veterans-affairs/prefer-telephone-component
<a href="tel:988">
Call <strong>988 and select 1</strong>
</a>
}
</li>
<li>
{/* mobile phone icon */}
{/* Convert to va-icon when injected header/footer split is in prod: https://github.com/department-of-veterans-affairs/vets-website/pull/27590 */}
<svg
aria-hidden="true"
className="va-crisis-panel-icon"
focusable="false"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#000"
d="M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1Zm-4 21a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5-4H7V4h9v14Z"
/>
</svg>
<a href="sms:838255">
Text <strong>838255</strong>
</a>
</li>
<li>
{/* chat icon */}
{/* Convert to va-icon when injected header/footer split is in prod: https://github.com/department-of-veterans-affairs/vets-website/pull/27590 */}
<svg
aria-hidden="true"
className="va-crisis-panel-icon"
focusable="false"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#000"
fillRule="evenodd"
clipRule="evenodd"
d="M21 6H19V15H6V17C6 17.55 6.45 18 7 18H18L22 22V7C22 6.45 21.55 6 21 6ZM17 12V3C17 2.45 16.55 2 16 2H3C2.45 2 2 2.45 2 3V17L6 13H16C16.55 13 17 12.55 17 12Z"
/>
</svg>
<a
className="no-external-icon"
href="https://www.veteranscrisisline.net/get-help-now/chat/"
>
Start a confidential chat
</a>
</li>
<li>
<svg
aria-hidden="true"
className="va-crisis-panel-icon"
focusable="false"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#1B1B1B"
fillRule="evenodd"
d="m20.51 22-6.79-6.79c-.34.28-.62.52-.86.75-.24.22-.44.45-.6.7a6.72 6.72 0 0 0-.48.8 11.8 11.8 0 0 0-.44 1.03c-.31.81-.8 1.45-1.45 1.9a3.84 3.84 0 0 1-2.25.7 3.3 3.3 0 0 1-2.36-.95 3.52 3.52 0 0 1-1.1-2.34h1.38a2.19 2.19 0 0 0 .7 1.37 2 2 0 0 0 1.38.54c.55 0 1.04-.18 1.46-.52a3.9 3.9 0 0 0 1.07-1.55 11.2 11.2 0 0 1 1.1-2c.21-.27.44-.53.67-.76a8.24 8.24 0 0 1 .77-.68L5.83 7.32a6.64 6.64 0 0 0-.2.72 5.16 5.16 0 0 0-.1.77H4.16a8.29 8.29 0 0 1 .2-1.33c.1-.43.23-.83.41-1.21L2 3.49l.99-.99 18.5 18.51-.98.99Zm-2.32-6.26-.98-.99a8.6 8.6 0 0 0 1.56-2.7A9.05 9.05 0 0 0 19.29 9c0-1.17-.2-2.28-.6-3.33a7.82 7.82 0 0 0-1.78-2.74L17.94 2a9.5 9.5 0 0 1 2.02 3.17 10.4 10.4 0 0 1 .08 7.4 10.5 10.5 0 0 1-1.85 3.17Zm-2.52-2.52-1.05-1.06a5.57 5.57 0 0 0 .78-3.07c0-1.38-.47-2.54-1.4-3.48a4.68 4.68 0 0 0-3.47-1.4c-.56 0-1.1.07-1.6.22a5.16 5.16 0 0 0-1.38.67l-.99-.99a6.34 6.34 0 0 1 1.84-.95 6.77 6.77 0 0 1 2.13-.33c1.84 0 3.34.58 4.5 1.75a6.12 6.12 0 0 1 1.74 4.5 9.3 9.3 0 0 1-.26 2.29 6.03 6.03 0 0 1-.84 1.85ZM12.46 10 9.59 7.14a2.24 2.24 0 0 1 .46-.17 2.02 2.02 0 0 1 2 .58 2.2 2.2 0 0 1 .41 2.45Zm-1.97 1.21c-.6 0-1.1-.2-1.52-.62a2.06 2.06 0 0 1-.62-1.51 2.27 2.27 0 0 1 .23-.99l2.9 2.9a2.27 2.27 0 0 1-1 .22Z"
clipRule="evenodd"
/>
</svg>
<p>
<a href="tel:711" aria-label="7 1 1">
For TTY, call <strong>711 then 988</strong>
</a>
</p>
</li>
</ul>
Get more resources at{' '}
<a
className="no-external-icon"
href="https://www.veteranscrisisline.net/"
>
VeteransCrisisLine.net
</a>
.
</div>
</div>
</div>
);
}