feat: implement dedicated share model component for sharing links 🚀🔥

0xabdulkhaliq commented 1 year ago

Related Issue

Closes #1558

Description

Enhanced the user experience by adding a new feature that enables users to copy shareable links for products in both the GridView and ListView components.
Implemented a share button behavior that copies the link to the clipboard when clicked.
Introduced user feedback for successful link copying by displaying a "Copied" tooltip on the Share Model component after clicking the copy icon.
Integrated an accessible and adaptable Share Model component for presenting the copied link in a visually appealing manner.
The Share Model component now seamlessly adapts to the dark and light modes of the website, ensuring optimal visibility and experience for users.
This change significantly improves the user experience by streamlining link sharing and providing a user-friendly interface for link presentation.

Demonstrating Video

https://github.com/JasonDsouza212/free-hit/assets/92252895/02c4da14-09bb-4a3a-b371-14e89f00dc9b

Checklist

[x] My code adheres to the established style guidelines of the project.
[x] I have included comments in areas that may be difficult to understand.
[x] My changes have not introduced any new warnings.
[x] I have conducted a self-review of my code.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
free-hit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2023 4:46pm

0xabdulkhaliq commented 1 year ago

Exciting update @JasonDsouza212, @VenomFate-619!!

Implemented a seamless Share Model component enabling users to swiftly copy links, Dark/light mode adaptation included.

Please make sure to review this PR ⭐

JasonDsouza212 commented 1 year ago

@0xabdulkhalid can you also add the video of it in mobile view

0xabdulkhaliq commented 1 year ago

## @JasonDsouza212 👋🏻
### $\textcolor{yellow}{\textsf{For mobile, the sharing component will use }}$ ### $\textcolor{yellow}{\textsf{native Web Share API. If there's no API Support}}$ ### $\textcolor{yellow}{\textsf{and if it fails then only it will fallback}}$ ### $\textcolor{yellow}{\textsf{to use the dedicated share model component.}}$
### $\textcolor{yellow}{\textsf{Let me know if any other doubts you may have!}}$

0xabdulkhaliq commented 1 year ago

## $\textcolor{yellow}{\textsf{If the Mobile device didn't have support for}}$ ## $\textcolor{yellow}{\textsf{Web Share API then it will look like this}}$ ## $\textcolor{yellow}{\textsf{for those devices.}}$

JasonDsouza212 / free-hit