Skip to content

Commit f2edefe

Browse files
nayan458nayan458
authored
Merge pull request #69 from CleanCode366/task/33-component-empty-state-component
feat: EmptyState composite component created.
2 parents 8de823a + 6cc5715 commit f2edefe

9 files changed

Lines changed: 413 additions & 13 deletions

File tree

‎src/shared/composites/EmptyState/EmptyState.stories.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
3+
import { CheckCircleIcon } from '@heroicons/react/24/outline'
4+
5+
import { EmptyState } from './EmptyState'
6+
import FilterEmptyIcon from '@/shared/illustrations/FilterEmptyIcon'
7+
import NoUsersIcon from '@/shared/illustrations/NoUsersIcon'
8+
import NoAnalyticsIcon from '@/shared/illustrations/NoAnalyticsIcon'
9+
import { SearchWindowIcon } from '@/shared/illustrations/NoResutsFoundIcon'
10+
import { BellSlashIcon } from '@/shared/illustrations/NoNotifications'
11+
12+
const meta = {
13+
title: 'Shared/Composites/EmptyState',
14+
15+
component: EmptyState,
16+
17+
tags: ['autodocs'],
18+
19+
parameters: {
20+
layout: 'fullscreen',
21+
},
22+
23+
decorators: [
24+
(Story) => (
25+
<div className="bg-bg-primary min-h-screen p-6">
26+
<Story />
27+
</div>
28+
),
29+
],
30+
} satisfies Meta<typeof EmptyState>
31+
32+
export default meta
33+
34+
type Story = StoryObj<typeof meta>
35+
36+
export const Default: Story = {
37+
args: {
38+
icon: <SearchWindowIcon size={100} />,
39+
40+
title: 'No search results found.',
41+
42+
description: 'Try again using more general search terms',
43+
},
44+
}
45+
export const QueueEmpty: Story = {
46+
args: {
47+
icon: <CheckCircleIcon className="size-24" />,
48+
49+
title: 'Queue is clear',
50+
51+
description: 'No reports are awaiting moderation right now.',
52+
},
53+
}
54+
55+
export const FilterEmpty: Story = {
56+
args: {
57+
icon: <FilterEmptyIcon />,
58+
59+
title: 'No reports match this filter',
60+
61+
description: 'Try adjusting or clearing your filters.',
62+
63+
action: {
64+
label: 'Clear filters',
65+
66+
onClick: () => {
67+
console.log('Clear filters clicked')
68+
},
69+
},
70+
},
71+
}
72+
73+
export const NoUsers: Story = {
74+
args: {
75+
icon: <NoUsersIcon />,
76+
77+
title: 'No users found',
78+
description: 'No such user found.',
79+
},
80+
}
81+
82+
export const AnalyticsNoData: Story = {
83+
args: {
84+
icon: <NoAnalyticsIcon />,
85+
86+
title: 'Not enough data yet',
87+
88+
description: 'Analytics will appear once enough moderation activity has been collected.',
89+
},
90+
}
91+
92+
export const WithoutDescription: Story = {
93+
args: {
94+
icon: <BellSlashIcon size={100} />,
95+
96+
title: 'No notifications available',
97+
},
98+
}
99+
100+
export const AccessibilityPreview: Story = {
101+
args: {
102+
icon: <CheckCircleIcon className="size-24" />,
103+
104+
title: 'Queue is clear',
105+
106+
description: 'No reports are awaiting moderation right now.',
107+
108+
action: {
109+
label: 'Refresh queue',
110+
111+
onClick: () => {
112+
console.log('Refresh queue clicked')
113+
},
114+
},
115+
},
116+
}

‎src/shared/composites/EmptyState/EmptyState.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react'
2+
3+
import { Button } from '@/shared/primitives/Button'
4+
5+
export interface EmptyStateProps {
6+
icon?: React.ReactNode
7+
8+
title: string
9+
10+
description?: string
11+
12+
action?: {
13+
label: string
14+
15+
onClick: () => void
16+
}
17+
18+
className?: string
19+
}
20+
21+
export function EmptyState({
22+
icon,
23+
24+
title,
25+
26+
description,
27+
28+
action,
29+
30+
className = '',
31+
}: EmptyStateProps) {
32+
return (
33+
<div
34+
role="status"
35+
aria-live="polite"
36+
className={`flex min-h-[400px] w-full flex-col items-center justify-center px-6 py-12 text-center ${className} `}
37+
>
38+
{/* Icon */}
39+
{icon && (
40+
<div className="text-text-tertiary mb-4 flex items-center justify-center">{icon}</div>
41+
)}
42+
43+
{/* Title */}
44+
<h2 className="text-text-primary text-lg font-semibold">{title}</h2>
45+
46+
{/* Description */}
47+
{description && (
48+
<p className="text-text-secondary mt-2 max-w-md text-sm leading-relaxed">{description}</p>
49+
)}
50+
51+
{/* Action */}
52+
{action && (
53+
<div className="mt-6">
54+
<Button
55+
type="button"
56+
variant="primary"
57+
onClick={action.onClick}
58+
aria-label={action.label}
59+
>
60+
{action.label}
61+
</Button>
62+
</div>
63+
)}
64+
</div>
65+
)
66+
}
67+
68+
export default EmptyState

‎src/shared/composites/EmptyState/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './EmptyState'
2+
3+
export { default } from './EmptyState'

‎src/shared/illustrations/FilterEmptyIcon.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export function FilterEmptyIcon({
2+
size = 100,
3+
color = 'currentColor',
4+
// , ...props
5+
}) {
6+
return (
7+
<svg
8+
width={size}
9+
height={(size * 110.668) / 122.88} // Maintains aspect ratio
10+
viewBox="0 0 122.88 110.668"
11+
xmlns="http://www.w3.org/2000/svg"
12+
fill={color}
13+
// {...props}
14+
>
15+
<g>
16+
<path
17+
fillRule="evenodd"
18+
clipRule="evenodd"
19+
d="M91.124,15.645c12.928,0,23.406,10.479,23.406,23.406 c0,12.927-10.479,23.406-23.406,23.406c-12.927,0-23.406-10.479-23.406-23.406C67.718,26.125,78.197,15.645,91.124,15.645 L91.124,15.645z M2.756,0h117.322c1.548,0,2.802,1.254,2.802,2.802c0,0.848-0.368,1.622-0.996,2.139l-10.667,13.556 c-1.405-1.375-2.95-2.607-4.614-3.672l6.628-9.22H9.43l37.975,46.171c0.59,0.516,0.958,1.254,0.958,2.102v49.148l21.056-9.623 V57.896c1.651,1.9,3.548,3.582,5.642,4.996v32.133c0,1.105-0.627,2.064-1.586,2.506l-26.476,12.758 c-1.327,0.773-3.023,0.332-3.798-1.033c-0.258-0.441-0.368-0.92-0.368-1.4V55.02L0.803,4.756c-1.07-1.106-1.07-2.839,0-3.945 C1.355,0.258,2.056,0,2.756,0L2.756,0z M96.93,28.282c1.328-1.349,3.489-1.355,4.825-0.013c1.335,1.342,1.341,3.524,0.013,4.872 l-5.829,5.914l5.836,5.919c1.317,1.338,1.299,3.506-0.04,4.843c-1.34,1.336-3.493,1.333-4.81-0.006l-5.797-5.878l-5.807,5.889 c-1.329,1.349-3.489,1.355-4.826,0.013c-1.335-1.342-1.341-3.523-0.013-4.872l5.83-5.913l-5.836-5.919 c-1.317-1.338-1.3-3.507,0.04-4.843c1.339-1.336,3.492-1.333,4.81,0.006l5.796,5.878L96.93,28.282L96.93,28.282z"
20+
/>
21+
</g>
22+
</svg>
23+
)
24+
}
25+
26+
export default FilterEmptyIcon

‎src/shared/illustrations/NoAnalyticsIcon.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
export const NoAnalyticsIcon = ({
2+
size = 100,
3+
color = 'currentColor',
4+
strokeWidth = 3.5,
5+
className = '',
6+
style = {},
7+
...props
8+
}) => (
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 110.66 122.88"
12+
width={size}
13+
height={size}
14+
fill={color}
15+
className={className}
16+
style={style}
17+
aria-hidden="true"
18+
focusable="false"
19+
{...props}
20+
>
21+
<path
22+
fillRule="evenodd"
23+
clipRule="evenodd"
24+
d="M81.81,70.82c6.27,0,11.95,2.55,16.07,6.65c4.12,4.12,6.65,9.78,6.65,16.07c0,4.58-1.37,8.86-3.7,12.43
25+
l9.83,10.71l-6.78,6.2l-9.48-10.43c-3.6,2.4-7.93,3.8-12.58,3.8c-6.27,0-11.95-2.55-16.06-6.65
26+
c-4.12-4.12-6.65-9.78-6.65-16.06c0-6.27,2.55-11.95,6.65-16.07C69.86,73.35,75.53,70.82,81.81,70.82L81.81,70.82z
27+
M5.78,40.86L5.78,40.86l0,47.09c0,0.27,0.1,0.52,0.27,0.69c0.17,0.17,0.41,0.28,0.69,0.28h42.53
28+
c2.93,0.3,3.02,5.37,0,5.81H22.05v10.8c0,0.28,0.1,0.52,0.28,0.69c0.17,0.17,0.41,0.27,0.69,0.27l26.26,0
29+
c2.12,0.24,2.81,5.06,0,5.81H23.05c-1.86,0-3.58-0.76-4.78-2c-1.24-1.24-2-2.92-2-4.78l0-10.8h-9.5
30+
c-1.86,0-3.58-0.76-4.78-2c-1.24-1.24-2-2.92-2-4.78V6.78C0,4.92,0.76,3.2,2,2c1.24-1.24,2.92-2,4.78-2H78.1
31+
c1.86,0,3.58,0.76,4.78,1.99c1.24,1.24,1.99,2.93,1.99,4.78v10.8l0,0l0,0h9.5c1.86,0,3.58,0.76,4.78,1.99
32+
c1.24,1.24,2,2.93,2,4.78v37.03c-0.2,2.12-5.41,2.15-5.85,0V24.36c0-0.28-0.1-0.52-0.27-0.69
33+
c-0.17-0.17-0.41-0.28-0.69-0.28h-9.5v37.99c-0.51,1.92-4.84,2.21-5.81,0V40.86h0H5.78L5.78,40.86z
34+
M5.78,35.51L5.78,35.51h73.25h0V6.78c0-0.28-0.1-0.52-0.28-0.69c-0.17-0.17-0.41-0.28-0.69-0.28H6.74
35+
c-0.28,0-0.52,0.1-0.69,0.28C5.88,6.26,5.78,6.5,5.78,6.78V35.51L5.78,35.51z
36+
M38.96,21.54h4.72c0.25,0,0.42,0.17,0.42,0.42v10.46c0,0.25-0.17,0.42-0.42,0.42h-4.72
37+
c-0.25,0-0.42-0.17-0.42-0.42V21.96C38.54,21.8,38.71,21.54,38.96,21.54z
38+
M62.22,21.54h4.72c0.25,0,0.42,0.17,0.42,0.42v10.46c0,0.25-0.17,0.42-0.42,0.42h-4.72
39+
c-0.25,0-0.42-0.17-0.42-0.42V21.96C61.8,21.8,61.97,21.54,62.22,21.54z
40+
M50.59,12.69h4.72c0.26,0,0.42,0.17,0.42,0.42v19.39c0,0.25-0.17,0.42-0.42,0.42h-4.72
41+
c-0.25,0-0.42-0.17-0.42-0.42V13.11C50.17,12.86,50.34,12.69,50.59,12.69z
42+
M15.71,15.89h4.72c0.25,0,0.42,0.17,0.42,0.42v16.19c0,0.25-0.17,0.42-0.42,0.42h-4.72
43+
c-0.25,0-0.42-0.17-0.42-0.42V16.32C15.21,16.06,15.46,15.89,15.71,15.89z
44+
M27.33,12.69h4.72c0.25,0,0.42,0.17,0.42,0.42v19.39c0,0.25-0.17,0.42-0.42,0.42h-4.72
45+
c-0.25,0-0.42-0.17-0.42-0.42V13.11C26.91,12.86,27.08,12.69,27.33,12.69z
46+
M42.69,67.18l13.15,0.23c0,4.72-2.32,9.05-6.19,11.68L42.69,67.18z
47+
M41.97,63.16l-0.15-15.32v-1.01l1.01,0.08c1.24,0.08,2.48,0.31,3.64,0.62c1.16,0.31,2.24,0.77,3.33,1.31
48+
c5.34,2.79,9.05,8.36,9.36,14.7l0.08,1.01h-1.01l-15.24-0.46h-0.85L41.97,63.16z
49+
M43.67,48.76l0.15,13.47l13.39,0.39c-0.54-5.26-3.79-9.83-8.28-12.22C48,49.93,47,49.54,45.99,49.23
50+
C45.14,49.07,44.44,48.92,43.67,48.76z
51+
M38.28,65.81l7.51,13c-2.32,1.32-4.87,2.01-7.51,2.01c-8.28,0-15.01-6.73-15.01-15.02
52+
c0-8.05,6.35-14.7,14.39-15.01L38.28,65.81z
53+
M93.89,81.45c-3.09-3.09-7.36-5.01-12.08-5.01c-4.71,0-8.99,1.92-12.08,5.01c-3.09,3.09-5.01,7.36-5.01,12.08
54+
c0,4.71,1.92,8.99,5.01,12.08c3.09,3.09,7.36,5.01,12.08,5.01c4.71,0,8.99-1.92,12.08-5.01
55+
c3.09-3.09,5.01-7.37,5.01-12.08C98.9,88.82,96.98,84.54,93.89,81.45z"
56+
/>
57+
<line
58+
x1="74.81"
59+
y1="86.53"
60+
x2="88.81"
61+
y2="100.53"
62+
stroke={color}
63+
strokeWidth={strokeWidth}
64+
strokeLinecap="round"
65+
fill="none"
66+
/>
67+
<line
68+
x1="88.81"
69+
y1="86.53"
70+
x2="74.81"
71+
y2="100.53"
72+
stroke={color}
73+
strokeWidth={strokeWidth}
74+
strokeLinecap="round"
75+
fill="none"
76+
/>
77+
</svg>
78+
)
79+
80+
export default NoAnalyticsIcon

‎src/shared/illustrations/NoNotifications.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
3+
export interface BellSlashIconProps extends React.SVGProps<SVGSVGElement> {
4+
size?: number | string
5+
}
6+
7+
export const BellSlashIcon: React.FC<BellSlashIconProps> = ({
8+
size = 24,
9+
fill = 'currentColor',
10+
...props
11+
}) => {
12+
return (
13+
<svg
14+
width={size}
15+
height={size}
16+
viewBox="0 0 122.88 111.001"
17+
fill="none"
18+
xmlns="http://www.w3.org/2000/svg"
19+
{...props}
20+
>
21+
<g fill={fill}>
22+
<path d="M79.823,97.959c-0.347,1.829-0.96,3.509-1.845,5.038c-0.912,1.578-2.106,2.993-3.583,4.242 c-1.476,1.248-3.085,2.188-4.82,2.817c-1.741,0.63-3.591,0.944-5.546,0.944s-3.806-0.314-5.546-0.944 c-1.737-0.629-3.345-1.569-4.82-2.817c-1.477-1.249-2.672-2.664-3.584-4.242c-0.911-1.576-1.534-3.312-1.875-5.207 c-0.165-0.926,0.451-1.813,1.378-1.979c0.03-0.006,0.3-0.031,0.3-0.033h28.292c0.946,0,1.712,0.766,1.712,1.711 C79.887,97.652,79.865,97.81,79.823,97.959L79.823,97.959z" />
23+
24+
<path d="M118.581,14.727c1.405-0.647,3.069-0.034,3.717,1.371 c0.648,1.404,0.034,3.069-1.37,3.717L4.299,73.516c-1.405,0.648-3.069,0.034-3.717-1.37c-0.648-1.405-0.035-3.069,1.37-3.718 L118.581,14.727L118.581,14.727z" />
25+
26+
<path d="M73.044,6.268c1.388,0.363,2.735,0.803,4.042,1.317c1.924,0.759,3.772,1.676,5.544,2.745 c0.07,0.042,0.138,0.087,0.203,0.135c1.7,1.044,3.279,2.191,4.736,3.442c1.525,1.309,2.946,2.754,4.263,4.339l0.011,0.012 l0.001-0.001c0.397,0.482,0.783,0.974,1.154,1.476l-5.211,2.4c-0.087-0.108-0.175-0.216-0.264-0.324l0.002-0.001 c-1.092-1.312-2.291-2.527-3.596-3.647c-1.263-1.084-2.599-2.06-4.009-2.927c-0.063-0.032-0.124-0.066-0.186-0.103 c-1.52-0.917-3.083-1.695-4.689-2.328c-1.552-0.612-3.136-1.094-4.749-1.439c-1.242-0.16-2.266-1.143-2.424-2.443 c-0.151-1.224-0.502-2.081-1.053-2.573c-0.554-0.494-1.441-0.746-2.662-0.757c-1.213-0.01-2.09,0.225-2.63,0.707 c-0.547,0.489-0.895,1.355-1.04,2.601l-0.002,0c-0.136,1.189-1.029,2.203-2.268,2.434c-1.748,0.331-3.433,0.807-5.063,1.425 c-1.626,0.617-3.189,1.375-4.693,2.272c-1.497,0.899-2.899,1.908-4.206,3.024c-1.305,1.115-2.516,2.341-3.633,3.676l-0.004-0.003 c-1.09,1.323-2.075,2.741-2.952,4.252c-0.862,1.487-1.616,3.071-2.257,4.751c-0.64,1.671-1.115,3.36-1.424,5.065 c-0.31,1.709-0.464,3.508-0.464,5.39v5.934l-5.614,2.584v-8.518c0-2.136,0.191-4.263,0.575-6.376 c0.382-2.112,0.945-4.138,1.687-6.074c0.738-1.936,1.624-3.791,2.651-5.563c1.021-1.76,2.188-3.434,3.493-5.016l0.016-0.018 l-0.004-0.004c1.303-1.558,2.733-3.004,4.291-4.333c1.536-1.312,3.193-2.504,4.974-3.572c1.802-1.075,3.664-1.979,5.592-2.712 c1.341-0.509,2.718-0.937,4.134-1.282c0.483-1.688,1.312-3.056,2.484-4.103C59.42,0.687,61.554-0.022,64.203,0 c2.625,0.023,4.74,0.75,6.345,2.182C71.724,3.232,72.556,4.594,73.044,6.268L73.044,6.268z" />
27+
28+
<path d="M99.827,36.303 c0.215,1.597,0.321,3.225,0.321,4.883c0,4.302,0.001,6.623,0.002,6.905c0.008,2.206,0.021,4.361,0.038,6.466v0.021l0,0 c0.007,1.9,0.132,3.813,0.368,5.73c0.233,1.896,0.575,3.726,1.019,5.487h0.003c0.444,1.737,1.043,3.409,1.794,5.014 c0.772,1.651,1.713,3.267,2.817,4.846l0.005-0.003c1.091,1.549,2.457,3.077,4.097,4.587c1.693,1.561,3.658,3.088,5.896,4.585 c1.283,0.859,1.627,2.598,0.767,3.881c-0.538,0.805-1.423,1.24-2.323,1.241v0.009H89.33H64.029H38.729H13.428 c-1.55,0-2.807-1.257-2.807-2.807c0-1.019,0.543-1.911,1.355-2.402c2.273-1.538,4.226-3.062,5.855-4.57 c1.622-1.502,2.979-3.039,4.073-4.613c0.032-0.046,0.066-0.091,0.1-0.135c1.005-1.472,1.871-2.968,2.598-4.488l7.213-3.321 c-0.52,1.847-1.199,3.666-2.037,5.456c-0.885,1.892-1.938,3.731-3.158,5.519c-0.035,0.058-0.071,0.115-0.111,0.172 c-1.285,1.85-2.913,3.687-4.883,5.512l-0.072,0.065h17.175h25.301H89.33h17.145c-1.926-1.776-3.547-3.598-4.863-5.467l0.006-0.003 l-0.006-0.008c-1.292-1.847-2.395-3.743-3.305-5.687c-0.927-1.982-1.65-3.983-2.167-6.001h0.003l-0.003-0.011 c-0.507-2.01-0.894-4.071-1.152-6.178c-0.249-2.017-0.381-4.145-0.391-6.382V54.6c-0.017-2.079-0.029-4.25-0.038-6.51 c-0.016-4.183-0.023-6.467-0.023-6.905c0-0.812-0.03-1.613-0.09-2.405L99.827,36.303L99.827,36.303z" />
29+
30+
<path d="M118.445,14.433c0.784-0.361,1.64-0.371,2.39-0.095c0.75,0.277,1.396,0.84,1.757,1.624 c0.361,0.784,0.371,1.64,0.095,2.389c-0.277,0.75-0.84,1.396-1.624,1.757L4.435,73.81c-0.784,0.361-1.64,0.371-2.39,0.094 c-0.75-0.276-1.396-0.839-1.757-1.623c-0.361-0.783-0.371-1.639-0.094-2.389c0.276-0.751,0.839-1.396,1.623-1.757L118.445,14.433 L118.445,14.433z M120.612,14.946c-0.596-0.22-1.274-0.212-1.896,0.074L2.088,68.722c-0.621,0.286-1.067,0.798-1.287,1.393 c-0.219,0.595-0.212,1.274,0.074,1.896s0.798,1.067,1.393,1.287c0.596,0.219,1.274,0.212,1.896-0.075l116.629-53.701 c0.621-0.286,1.067-0.797,1.287-1.392c0.22-0.596,0.212-1.275-0.074-1.896C121.719,15.612,121.207,15.165,120.612,14.946 L120.612,14.946z" />
31+
</g>
32+
</svg>
33+
)
34+
}

‎src/shared/illustrations/NoResutsFoundIcon.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
3+
export interface SearchWindowIconProps extends React.SVGProps<SVGSVGElement> {
4+
size?: number | string
5+
}
6+
7+
export const SearchWindowIcon: React.FC<SearchWindowIconProps> = ({
8+
size = 24,
9+
fill = 'currentColor',
10+
...props
11+
}) => {
12+
return (
13+
<svg
14+
xmlns="http://www.w3.org/2000/svg"
15+
viewBox="0 0 512 406.8"
16+
width={size}
17+
height={size}
18+
fill={fill}
19+
shapeRendering="geometricPrecision"
20+
textRendering="geometricPrecision"
21+
imageRendering="optimizeQuality"
22+
fillRule="evenodd"
23+
clipRule="evenodd"
24+
{...props}
25+
>
26+
<path d="M29.27 0h373.81c16.11 0 29.27 13.16 29.27 29.27v90.8c-2.23-1.1-4.48-2.14-6.77-3.13l-2.02-.92c-3.57-1.47-7.18-2.82-10.84-4.02V81.94h.14H20.83v221.61c0 4.5 3.59 8.09 8.09 8.09h193.04c.54 1.42 1.1 2.83 1.69 4.24 1.97 4.78 4.23 9.49 6.73 14.09H29.27C13.16 329.97 0 316.78 0 300.7V29.27C0 13.16 13.16 0 29.27 0zm335.71 140.37c31.07 0 60.75 12.29 82.72 34.27 30.33 30.33 41.62 75.06 29.4 116.14-2.83 9.53-6.85 18.55-11.88 26.89l45.3 49.38c2.09 2.27 1.95 5.82-.33 7.91l-33.26 30.38c-2.27 2.08-5.8 1.92-7.89-.35l-43.34-47.67c-18.35 11.18-39.22 17.02-60.72 17.02-31.06 0-60.75-12.3-82.71-34.27a117.18 117.18 0 0 1-25.39-37.99c-18.13-43.67-7.82-94.22 25.4-127.43a116.814 116.814 0 0 1 37.96-25.4c13.8-5.73 28.92-8.88 44.74-8.88zm70.93 46.04c-28.63-28.63-72.03-37.24-109.31-21.8-66.92 27.71-82.3 113.99-32.58 163.67 28.68 28.61 72 37.26 109.33 21.81 37.54-15.59 61.94-52.1 61.94-92.74 0-13.62-2.69-26.59-7.56-38.37a101.013 101.013 0 0 0-21.82-32.57zm-28.22 97.67-16.4 16.31-26.48-26.49-26.34 26.34-15.82-15.86 26.32-26.32-26.85-26.84 16.4-16.31 26.8 26.81 26.51-26.51 15.81 15.85-26.49 26.49 26.54 26.53zM375.21 32.9c7.99 0 14.46 6.47 14.46 14.46 0 7.98-6.47 14.46-14.46 14.46-7.98 0-14.46-6.48-14.46-14.46.04-7.99 6.51-14.46 14.46-14.46zm-97.95 0c7.99 0 14.46 6.47 14.46 14.46 0 7.98-6.47 14.46-14.46 14.46-7.99 0-14.46-6.48-14.46-14.46 0-7.99 6.47-14.46 14.46-14.46zm48.98 0c7.98 0 14.45 6.47 14.45 14.46 0 7.98-6.47 14.46-14.45 14.46-7.99 0-14.47-6.48-14.47-14.46 0-7.99 6.48-14.46 14.47-14.46z" />
27+
</svg>
28+
)
29+
}

‎src/shared/illustrations/NoUsersIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function NoUsersIcon({ size = 100, color = 'currentColor', ...props }) {
2+
return (
3+
<svg
4+
width={size}
5+
height={(size * 341.38) / 512} // Maintains aspect ratio
6+
viewBox="0 0 512 341.38"
7+
xmlns="http://www.w3.org/2000/svg"
8+
shapeRendering="geometricPrecision"
9+
textRendering="geometricPrecision"
10+
imageRendering="optimizeQuality"
11+
fillRule="evenodd"
12+
clipRule="evenodd"
13+
fill={color}
14+
{...props}
15+
>
16+
<path d="M3.62 302.83c-2 0-3.62-1.63-3.62-3.62 0-1.04.14-2.05.39-3.06 5.81-46 41.83-58.27 67.38-64.9 12.79-3.32 44.59-15.94 31.92-33.3-7.1-9.74-13.54-16.58-19.98-26.87-4.65-6.86-7.1-12.99-7.1-17.89 0-5.23 2.78-11.35 8.33-12.74-.73-10.53-.98-24.38-.49-35.65 1.77-19.35 15.64-33.61 33.57-39.93 7.1-2.7 3.67-13.49 11.51-13.72 18.37-.5 48.5 15.19 60.27 27.92 6.85 7.35 11.27 17.15 12 30.14l-.73 32.46c3.43.98 5.63 3.19 6.61 6.62.99 3.92 0 9.31-3.43 16.91 0 .24-.25.24-.25.48-7.56 12.47-15.43 20.73-24.1 32.27-3.86 5.16-3.1 10.09.1 14.53-4.51 2.63-8.91 5.66-13.15 9.22-16.88 14.17-29.89 35.31-34.39 69.06l-.51 2.98c-.25 1.93-.38 3.51-.38 4.7 0 1.49.12 2.96.37 4.39H3.62zm441.35-72.93c2.5-2.54 4.06-4.56 7.14-1.4l9.98 10.22c3.27 3.24 3.1 5.14.01 8.16l-13.78 13.77 13.7 13.69c2.53 2.5 4.56 4.06 1.4 7.14l-10.22 9.98c-3.25 3.27-5.14 3.1-8.16.01l-13.77-13.76-13.76 13.76c-3.02 3.09-4.92 3.26-8.16-.01l-10.22-9.98c-3.16-3.08-1.14-4.64 1.4-7.14l13.69-13.69-13.78-13.77c-3.09-3.02-3.26-4.92.02-8.16l9.98-10.22c3.07-3.16 4.64-1.14 7.13 1.4l13.7 13.7 13.7-13.7zm-13.7-49.99c22.29 0 42.48 9.04 57.08 23.65l.45.48c14.35 14.58 23.2 34.58 23.2 56.61 0 22.29-9.04 42.48-23.65 57.09-14.6 14.6-34.79 23.64-57.08 23.64s-42.48-9.04-57.09-23.64l-.44-.49c-14.36-14.58-23.21-34.58-23.21-56.6 0-22.26 9.05-42.45 23.67-57.07 14.59-14.63 34.78-23.67 57.07-23.67zm45.32 35.42c-11.6-11.6-27.62-18.77-45.32-18.77s-33.73 7.18-45.33 18.77c-11.6 11.57-18.76 27.6-18.76 45.32 0 17.53 7.01 33.4 18.37 44.94l.4.38c11.59 11.59 27.62 18.76 45.32 18.76 17.69 0 33.72-7.17 45.32-18.76 11.59-11.59 18.76-27.62 18.76-45.32 0-17.51-7.01-33.39-18.37-44.95l-.39-.37zm-322.65 87.53c-2.45 0-4.43-1.97-4.43-4.42 0-1.25.18-2.5.48-3.73 7.08-56.13 40.73-68.33 71.87-76.34 14.96-3.84 44.78-18.85 41.17-38.2-7.55-6.99-15.03-16.65-16.34-31.06l-.91.02c-2.09-.03-4.11-.51-5.99-1.58-4.17-2.36-6.44-6.9-7.54-12.07-2.31-15.79-2.89-23.86 5.52-27.38l.07-.03c-1.04-19.48 2.25-48.14-17.75-54.2 39.5-48.81 85.04-75.37 119.23-31.94 38.1 2 55.09 55.96 31.43 86.17h-1c8.42 3.52 7.15 12.58 5.53 27.38-1.1 5.17-3.38 9.71-7.54 12.07-1.88 1.07-3.91 1.55-6 1.58l-.9-.02c-1.31 14.41-8.81 24.07-16.36 31.06-1.22 6.55 1.38 12.58 5.93 17.87-13.43 17.3-21.41 39.03-21.41 62.61 0 15.05 3.26 29.35 9.1 42.21H153.94z" />
17+
</svg>
18+
)
19+
}
20+
21+
export default NoUsersIcon

0 commit comments

Comments
 (0)