Add Multiple Calendar Options to Add to Calendar Link on Events Page

[fuyalasmit]

Linked Issue

Closes: #1319

Description

This PR improves the functionality of the event calendar feature. Previously, the "Add to Calendar" option was a simple link for downloading the .ics file. Now, I have introduced SVG icons to make the UI more visually appealing while maintaining its functionality.

Before

After

Methodology

Continued using calendar-link as implemented by Joe in this PR

Code of Conduct

By submitting this pull request, you agree to follow our Code of Conduct

[netlify]

👷 Deploy Preview for virtual-coffee-io processing.

Name	Link
🔨 Latest commit	9da687d
🔍 Latest deploy log	https://app.netlify.com/sites/virtual-coffee-io/deploys/67a377f936ec8100083d2e68

[danieltott]

@fuyalasmit thanks for this PR!

In general the approach is great. I have a couple changes we'll need to merge.

• In the icon files, all of the svg attributes need to be set in JSX style, not html/svg style. So fill-rule needs to be fillRule, etc.
• The links (<a href... />) should have a title prop set
• The icon files also need to have a <title /> element. Your components have a title prop, but they aren't using it. Example:

  <title id="googleSvgTitle">{title}</title>

• The icon files also need to have role="img" and aria-labelledby="googleSvgTitle" (for example) props set.
• The general ICS icon isn't really ideal. Let's replace that with perhaps a calendar icon (similar to the apple calendar icon maybe?)

Let me know if you have any questions here!

[fuyalasmit]

Okay, thank you for the suggestion, @danieltott
I have made the changes, please take a look.

[danieltott]

This is great @fuyalasmit ! Thanks for getting those changes in so fast 🙌