Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: added the hover affect to icons #2669

Merged
merged 12 commits into from
Mar 22, 2024
Merged

fix: added the hover affect to icons #2669

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
53b838d
Added the hover affect to icons
sagarkori143 Feb 18, 2024
c989429
Merge branch 'master' into icons
sagarkori143 Mar 1, 2024
f51df3a
Added requested changes
sagarkori143 Mar 3, 2024
3758e4c
final
sagarkori143 Mar 4, 2024
46bfdb2
Merge branch 'master' into icons
akshatnema Mar 6, 2024
cfa09d9
Merge branch 'asyncapi:master' into icons
sagarkori143 Mar 10, 2024
35f5e4b
Merge branch 'master' into icons
sagarkori143 Mar 10, 2024
3ee94e7
Requested changes done :)
sagarkori143 Mar 10, 2024
bd88d7d
Merge branch 'icons' of github.com:sagarkori143/website into icons
sagarkori143 Mar 10, 2024
e6ce92d
Final commit
sagarkori143 Mar 10, 2024
f0364f5
Update components/icons/Twitter.js
akshatnema Mar 22, 2024
520f4a6
Merge branch 'master' into icons
akshatnema Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 94 additions & 31 deletions pages/community/tsc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import GenericLayout from "../../components/layout/GenericLayout";
import TSCMembersList from "../../config/MAINTAINERS.json";
import {sortBy} from 'lodash';
import { sortBy } from 'lodash';
import NewsletterSubscribe from "../../components/NewsletterSubscribe";
import TextLink from '../../components/typography/TextLink';
import { useState } from 'react';

function addAdditionalUserInfo(user) {
const userData = {
Expand All @@ -20,7 +21,7 @@ function addAdditionalUserInfo(user) {
if (userData.twitter)
userData.twitter = `https://www.twitter.com/${userData.twitter}`;

// add avatar url
// add avatar url
// github redirects to avatar url using `https://www.github.com/<username>.png`
userData.avatarUrl = userData.github + ".png";

Expand All @@ -37,7 +38,7 @@ export default function TSC() {
const description =
"Meet the current AsyncAPI TSC members and learn how you can become one.";
const image = "/img/social/community-tsc.webp";

const tscMembers = sortBy(
TSCMembersList.map((user) => addAdditionalUserInfo(user)),
["name"]
Expand Down Expand Up @@ -240,45 +241,107 @@ function QuestionCard() {
);
}


function TwitterSVG() {
const [isHovered, setIsHovered] = useState(false);

return (
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
<div className="relative w-5 h-5">
{/* Original SVG icon */}
<svg
className={`w-5 h-5 absolute top-0 left-0 transition-all duration-300 ${isHovered ? 'opacity-0' : 'opacity-100'}`}
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
</svg>
sagarkori143 marked this conversation as resolved.
Show resolved Hide resolved

{/* SVG icon on hover */}
<svg
className={`w-5 h-5 absolute top-0 left-0 transition-all duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
fill="none"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<path fill="#1D9BF0" d="M13.567 5.144c.008.123.008.247.008.371 0 3.796-2.889 8.173-8.172 8.173v-.002A8.131 8.131 0 011 12.398a5.768 5.768 0 004.25-1.19 2.876 2.876 0 01-2.683-1.995c.431.083.875.066 1.297-.05A2.873 2.873 0 011.56 6.348v-.036c.4.222.847.345 1.304.36a2.876 2.876 0 01-.89-3.836 8.152 8.152 0 005.92 3 2.874 2.874 0 014.895-2.619 5.763 5.763 0 001.824-.697 2.883 2.883 0 01-1.262 1.588A5.712 5.712 0 0015 3.656a5.834 5.834 0 01-1.433 1.488z" />
</svg>
</div>
);
}


function GithubSVG() {
const [isHovered, setIsHovered] = useState(false);

return (
<svg
className="w-5 h-5"
fill="currentColor"
aria-hidden="true"
viewBox="0 0 48 48"
>
<path d="M44,24c0,8.96-5.88,16.54-14,19.08V38c0-1.71-0.72-3.24-1.86-4.34c5.24-0.95,7.86-4,7.86-9.66c0-2.45-0.5-4.39-1.48-5.9 c0.44-1.71,0.7-4.14-0.52-6.1c-2.36,0-4.01,1.39-4.98,2.53C27.57,14.18,25.9,14,24,14c-1.8,0-3.46,0.2-4.94,0.61 C18.1,13.46,16.42,12,14,12c-1.42,2.28-0.84,4.74-0.3,6.12C12.62,19.63,12,21.57,12,24c0,5.66,2.62,8.71,7.86,9.66 c-0.67,0.65-1.19,1.44-1.51,2.34H16c-1.44,0-2-0.64-2.77-1.68c-0.77-1.04-1.6-1.74-2.59-2.03c-0.53-0.06-0.89,0.37-0.42,0.75 c1.57,1.13,1.68,2.98,2.31,4.19C13.1,38.32,14.28,39,15.61,39H18v4.08C9.88,40.54,4,32.96,4,24C4,12.95,12.95,4,24,4 S44,12.95,44,24z" />
</svg>
<div className="relative w-5 h-5">
{/* Original SVG icon */}
<svg
className="w-5 h-5 absolute top-0 left-0 transition-all duration-300"
fill={isHovered ? "#000000" : "currentColor"}
aria-hidden="true"
viewBox="0 0 48 48"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<path d="M44,24c0,8.96-5.88,16.54-14,19.08V38c0-1.71-0.72-3.24-1.86-4.34c5.24-0.95,7.86-4,7.86-9.66c0-2.45-0.5-4.39-1.48-5.9 c0.44-1.71,0.7-4.14-0.52-6.1c-2.36,0-4.01,1.39-4.98,2.53C27.57,14.18,25.9,14,24,14c-1.8,0-3.46,0.2-4.94,0.61 C18.1,13.46,16.42,12,14,12c-1.42,2.28-0.84,4.74-0.3,6.12C12.62,19.63,12,21.57,12,24c0,5.66,2.62,8.71,7.86,9.66 c-0.67,0.65-1.19,1.44-1.51,2.34H16c-1.44,0-2-0.64-2.77-1.68c-0.77-1.04-1.6-1.74-2.59-2.03c-0.53-0.06-0.89,0.37-0.42,0.75 c1.57,1.13,1.68,2.98,2.31,4.19C13.1,38.32,14.28,39,15.61,39H18v4.08C9.88,40.54,4,32.96,4,24C4,12.95,12.95,4,24,4 S44,12.95,44,24z" />
</svg>

{/* SVG icon on hover */}
<svg
className="w-5 h-5 absolute top-0 left-0 transition-all duration-300 opacity-0 hover:opacity-100"
fill="#000000"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<path d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z" />
</svg>
</div>
);
}

function LinkedInSVG() {
const [isHovered, setIsHovered] = useState(false);

return (
<svg
className="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>
<div className="relative w-5 h-5">
{/* Here is the original SVG icon */}
<svg
className={`w-5 h-5 absolute top-0 left-0 transition-all duration-300 ${isHovered ? 'opacity-0' : 'opacity-100'}`}
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<path
fillRule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clipRule="evenodd"
/>
</svg>

{/* Here is the SVG icon on hover */}
<svg
className={`w-5 h-5 absolute top-0 left-0 transition-all duration-300 ${isHovered ? 'opacity-100' : 'opacity-0 hover:opacity-100'}`}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
fill="none"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<path
fill="#0A66C2"
d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"
/>
</svg>
</div>
);
}
2 changes: 1 addition & 1 deletion pages/tools/generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function GeneratorPage() {
className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
/> */}
<GithubButton
className="w-full sm:w-auto"
className="ml-2 block mt-2 md:mt-0 md:inline-block w-full sm:w-auto"
href="https://www.github.com/asyncapi/generator"
/>
<Button text="View Docs" href="/docs/tools/generator" className="ml-2 block mt-2 md:mt-0 md:inline-block w-full sm:w-auto"/>
Expand Down
Loading