konnosDashboard
Icons.tsx125 lines · main
1import { useTheme } from 'next-themes'
2
3export interface IconProps {
4 isSelected?: boolean
5}
6
7export const ServiceRoleIcon = ({ isSelected = false }: IconProps) => {
8 const { resolvedTheme } = useTheme()
9
10 return (
11 <svg width="53" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
12 <g opacity={isSelected ? '1' : '.5'}>
13 <rect
14 x="37.161"
15 y=".53"
16 width="15"
17 height="15"
18 rx="5.5"
19 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
20 />
21 <path d="M1 10.53h32.214" stroke="#33A7E9" strokeLinecap="round" strokeDasharray="2 2" />
22 <rect
23 x="15.964"
24 y=".53"
25 width="9"
26 height="15"
27 rx="4.5"
28 stroke={resolvedTheme === 'light' ? '#7E868C' : '#7E7E7E'}
29 />
30 <path d="M1 5.53h32.214" stroke="#33A7E9" strokeLinecap="round" strokeDasharray="2 2" />
31 </g>
32 </svg>
33 )
34}
35
36export const AnonIcon = ({ isSelected = false }: IconProps) => {
37 const { resolvedTheme } = useTheme()
38
39 return (
40 <svg width="53" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
41 <g opacity={isSelected ? '1' : '.5'}>
42 <path
43 d="M1 4.994a.5.5 0 0 0 0 1v-1Zm16.218 1h.5v-1h-.5v1ZM1 5.994h1.014v-1H1v1Zm3.04 0h2.028v-1H4.041v1Zm4.056 0h2.027v-1H8.096v1Zm4.054 0h2.027v-1H12.15v1Zm4.055 0h1.013v-1h-1.013v1Z"
44 fill={resolvedTheme === 'light' ? '#7E868C' : '#7E7E7E'}
45 />
46 <path
47 d="m15.92 12.56 9.04-9.04"
48 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
49 />
50 <rect
51 x="15.964"
52 y=".494"
53 width="9"
54 height="15"
55 rx="4.5"
56 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
57 />
58 <rect
59 x="37.161"
60 y=".744"
61 width="15"
62 height="15"
63 rx="5.5"
64 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
65 />
66 <path d="M1 10.494h32.214" stroke="#33A7E9" strokeLinecap="round" strokeDasharray="2 2" />
67 <path
68 d="M15.96 7.562 22.568.956M19.049 14.885l5.957-5.958"
69 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
70 />
71 </g>
72 </svg>
73 )
74}
75
76export const AuthenticatedIcon = ({ isSelected = false }: IconProps) => {
77 const { resolvedTheme } = useTheme()
78
79 return (
80 <svg width="68" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
81 <g opacity={isSelected ? '1' : '.5'}>
82 <path
83 d="M15.63 5.156a.5.5 0 1 0 0 1v-1Zm16.218 1h.5v-1h-.5v1Zm-16.218 0h1.013v-1H15.63v1Zm3.04 0h2.028v-1h-2.027v1Zm4.055 0h2.028v-1h-2.028v1Zm4.055 0h2.027v-1H26.78v1Zm4.055 0h1.013v-1h-1.013v1Z"
84 fill={resolvedTheme === 'light' ? '#7E868C' : '#7E7E7E'}
85 />
86 <path
87 d="m30.55 12.722 9.04-9.04"
88 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
89 />
90 <rect
91 x="30.594"
92 y=".656"
93 width="9"
94 height="15"
95 rx="4.5"
96 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
97 />
98 <rect
99 x="51.791"
100 y=".906"
101 width="15"
102 height="15"
103 rx="5.5"
104 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
105 />
106 <path
107 d="M15.63 10.656h32.214"
108 stroke="#33A7E9"
109 strokeLinecap="round"
110 strokeDasharray="2 2"
111 />
112 <path
113 d="m30.59 7.724 6.607-6.606M33.679 15.047l5.957-5.958"
114 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
115 />
116 <path
117 d="M12.666 14.281v-1.333A2.667 2.667 0 0 0 10 10.28H6a2.667 2.667 0 0 0-2.667 2.667v1.333M8 7.615A2.667 2.667 0 1 0 8 2.28a2.667 2.667 0 0 0 0 5.334Z"
118 stroke={resolvedTheme === 'light' ? '#11181C' : '#EDEDED'}
119 strokeLinecap="round"
120 strokeLinejoin="round"
121 />
122 </g>
123 </svg>
124 )
125}