mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
113 lines
3.2 KiB
TypeScript
113 lines
3.2 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 CheckIcon = `export const CheckIcon = ({
|
|
size,
|
|
height,
|
|
width,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<svg
|
|
width={size || width || 18}
|
|
height={size || height || 18}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
const App = `import {Badge, Avatar} from "@nextui-org/react";
|
|
import {NotificationIcon} from "./NotificationIcon";
|
|
import {CheckIcon} from "./CheckIcon";
|
|
|
|
export default function App() {
|
|
return (
|
|
<div className="flex gap-5 items-center">
|
|
<Badge content="5" color="danger">
|
|
<Avatar
|
|
radius="lg"
|
|
src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
|
|
/>
|
|
</Badge>
|
|
<Badge content="" color="success" shape="circle" placement="bottom-right">
|
|
<Avatar
|
|
radius="full"
|
|
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
|
/>
|
|
</Badge>
|
|
<Badge content="new" color="danger" size="sm">
|
|
<Avatar
|
|
isBordered
|
|
radius="lg"
|
|
color="danger"
|
|
src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
|
|
/>
|
|
</Badge>
|
|
<Badge
|
|
isOneChar
|
|
content={<CheckIcon />}
|
|
color="success"
|
|
placement="bottom-right"
|
|
>
|
|
<Avatar
|
|
isBordered
|
|
color="success"
|
|
radius="lg"
|
|
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
|
|
/>
|
|
</Badge>
|
|
<Badge
|
|
isOneChar
|
|
content={<NotificationIcon size={12} />}
|
|
color="danger"
|
|
shape="circle"
|
|
placement="top-right"
|
|
>
|
|
<Avatar
|
|
radius="full"
|
|
size="lg"
|
|
src="https://i.pravatar.cc/300?u=a042581f4e29026704f"
|
|
/>
|
|
</Badge>
|
|
</div>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
"/NotificationIcon.jsx": NotificationIcon,
|
|
"/CheckIcon.jsx": CheckIcon,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|