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
Prev Previous commit
Next Next commit
feat & fix : added the lock icon and also fixed the clipboar-check ic… 
…on opacity
  • Loading branch information
@Teea-dev
Teea-dev committed Jan 3, 2025
commit 9c75ee10d1e7af352b433db75a17272fd7ba28d0
2 changes: 1 addition & 1 deletion icons/clipboard-check.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { Variants } from 'motion/react';
const checkVariants: Variants = {
normal: {
pathLength: 1,
opacity: 0,
opacity: 1,
transition: {
duration: 0.3,
},
Expand Down
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 @@ -159,6 +159,7 @@ import { SmartphoneChargingIcon } from '@/icons/smartphone-charging';
import { CastIcon } from '@/icons/cast';
import { HeartCrackIcon } from '@/icons/heart-crack';
import { HeartIcon } from '@/icons/heart';
import { LockIcon } from '@/icons/lock';

type IconListItem = {
name: string;
Expand Down Expand Up @@ -1587,6 +1588,11 @@ const ICON_LIST: IconListItem[] = [
name: 'heart',
icon: HeartIcon,
keywords: ['heart', 'love', 'like', 'emotion'],
},
{
name: 'lock',
icon: LockIcon,
keywords: ['lock', 'secure', 'safe', 'security', 'password'],
}
];

Expand Down
82 changes: 82 additions & 0 deletions icons/lock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import type { Variants } from 'motion/react';
import { motion, useAnimation } from 'motion/react';

const pathVariants: Variants = {
normal: {
pathLength: 1,
opacity: 1,
y: 0,
},
animate: {
pathLength: [1, 0.8, 1],
opacity: 1,
y: [-2, 0],
transition: {
duration: 1.2,
ease: [0.4, 0, 0.2, 1],
times: [0, 0.5, 1],
},
},
};
const bodyVariants: Variants = {
normal: {
opacity: 1,
scale: 1,
y: 0,
},
animate: {
opacity: 1,
scale: [1, 0.95, 1],
y: [0, 2, 0],
transition: {
duration: 1.2,
ease: [0.4, 0, 0.2, 1],
times: [0, 0.5, 1],
},
},
};

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

return (
<div
className="cursor-pointer select-none p-2 rounded-md flex items-center justify-center"
onMouseEnter={() => controls.start('animate')}
onMouseLeave={() => controls.start('normal')}
>
<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.

same here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

would do

viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<motion.rect
width="18"
height="11"
x="3"
y="11"
rx="2"
ry="2"
initial="normal"
animate={controls}
variants={bodyVariants}
/>
<motion.path
d="M7 11V7a5 5 0 0 1 10 0v4"
initial="normal"
animate={controls}
variants={pathVariants}
/>
</svg>
</div>
);
};

export { LockIcon };