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

Tokunbo #91

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Tokunbo #91

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ba8bcf
feat: added a heart-break icon
Teea-dev Jan 3, 2025
323f1cf
feat: added the heart icon
Teea-dev Jan 3, 2025
9c75ee1
feat & fix : added the lock icon and also fixed the clipboar-check ic…
Teea-dev Jan 3, 2025
9101be0
feat: ran npm run lint
Teea-dev Jan 3, 2025
bc2da2a
fix: changed the heart animation to a pulsating one, fixed the lock s…
Teea-dev Jan 4, 2025
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
Next Next commit
feat: added a heart-break icon
  • Loading branch information
@Teea-dev
Teea-dev committed Jan 3, 2025
commit 2ba8bcff3beafaf811d986b5b0e6394b0806c2f9
60 changes: 60 additions & 0 deletions icons/heart-crack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
'use client';

import type { Variants } from 'motion/react';
import { motion, useAnimation } from 'motion/react';

const iconVariants: Variants = {
normal: {
pathLength: 1,
opacity: 1,
},
animate: {
pathLength: [0, 1],
opacity: [0, 1],
transition: {
duration: 0.9,
ease: 'easeInOut',
},
},
};

const HeartCrackIcon = () => {
const controls = useAnimation();

return (
<div
className="cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
onMouseEnter={() => controls.start('animate')}
onMouseLeave={() => controls.start('normal')}
style={{ display: 'inline-block' }}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do you need that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you mean the style right?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep

>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
width="24"
height="24"
width="28"
height="28"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making changes to these now

viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<motion.path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
initial="normal"
animate={controls}
variants={iconVariants}
/>

<motion.path
d="m12 13-1-1 2-2-3-3 2-2"
initial="normal"
animate={controls}
variants={iconVariants}
/>
</svg>
</div>
);
};

export { HeartCrackIcon };
6 changes: 6 additions & 0 deletions icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ import { MoonIcon } from '@/icons/moon';
import { VibrateIcon } from '@/icons/vibrate';
import { SmartphoneChargingIcon } from '@/icons/smartphone-charging';
import { CastIcon } from '@/icons/cast';
import { HeartCrackIcon } from '@/icons/heart-crack';

type IconListItem = {
name: string;
Expand Down Expand Up @@ -1576,6 +1577,11 @@ const ICON_LIST: IconListItem[] = [
icon: CastIcon,
keywords: ['cast', 'screen', 'chromecast', 'airplay'],
},
{
name: 'heart-crack',
icon: HeartCrackIcon,
keywords: ['heart', 'love', 'like', 'emotion', 'crack'],
}
];

export { ICON_LIST };
4 changes: 2 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2826,7 +2826,7 @@ react-style-singleton@^2.2.1:
invariant "^2.2.4"
tslib "^2.0.0"

"react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8 || ^17 || ^18", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8 || 17.x || 18.x", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.x || ^17.x || ^18.x || ^19.x", react@^18.0.0, "react@^18.0.0 || ^19.0.0", "react@^18.2.0 || 19.0.0-rc-02c0e824-20241028", react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0", react@>=16.8.0, react@>=16.8.1, "react@>=18.2.0 || ^19.0.0-0", react@18:
react@*, "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8 || ^17 || ^18", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8 || 17.x || 18.x", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.x || ^17.x || ^18.x || ^19.x", react@^18.0.0, "react@^18.0.0 || ^19.0.0", "react@^18.2.0 || 19.0.0-rc-02c0e824-20241028", react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0", react@>=16.8.0, react@>=16.8.1, "react@>=18.2.0 || ^19.0.0-0", react@18:
version "18.3.1"
resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
Expand Down Expand Up @@ -3418,7 +3418,7 @@ use-callback-ref@^1.3.0:

use-debounce@^10.0.4:
version "10.0.4"
resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.4.tgz#2135be498ad855416c4495cfd8e0e130bd33bb24"
resolved "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz"
integrity sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==

use-sidecar@^1.1.2:
Expand Down