mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
|
|
return (
|
|
<svg
|
|
fill="none"
|
|
height={size || height || 24}
|
|
viewBox="0 0 24 24"
|
|
width={size || width || 24}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
clipRule="evenodd"
|
|
d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
|
|
fill='currentColor'
|
|
fillRule="evenodd"
|
|
/>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
export const CartIcon = `export const CartIcon = ({ size, height, width, ...props }) => {
|
|
return (
|
|
<svg
|
|
fill="none"
|
|
height={size || height || 24}
|
|
viewBox="0 0 24 24"
|
|
width={size || width || 24}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
|
|
fill='currentColor'
|
|
/>
|
|
<path
|
|
d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
|
|
fill='currentColor'
|
|
/>
|
|
<path
|
|
d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
|
|
fill='currentColor'
|
|
/>
|
|
<path
|
|
d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
|
|
fill='currentColor'
|
|
/>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
const App = `import {Badge, Avatar, Switch} from "@nextui-org/react";
|
|
import {NotificationIcon} from "./NotificationIcon";
|
|
import {CartIcon} from "./CartIcon";
|
|
|
|
export default function App() {
|
|
const [isInvisible, setIsInvisible] = React.useState(false);
|
|
|
|
return (
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<Badge color="danger" content={5} isInvisible={isInvisible} shape="circle">
|
|
<NotificationIcon className="fill-current" size={30} />
|
|
</Badge>
|
|
<Badge color="danger" content={50} isInvisible={isInvisible} shape="circle">
|
|
<CartIcon size={30} />
|
|
</Badge>
|
|
</div>
|
|
<Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
|
|
Show badge
|
|
</Switch>
|
|
</div>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
"/NotificationIcon.jsx": NotificationIcon,
|
|
"/CartIcon.jsx": CartIcon,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|