zitadel

1
import React from "react";
2

3
import styles from "../css/list.module.css";
4

5
export const ICONTYPE = {
6
  START: (
7
    <div className="custom-rounded custom-rounded-start">
8
      <i className={`las la-play-circle`}></i>
9
    </div>
10
  ),
11
  TASKS: (
12
    <div className="custom-rounded custom-rounded-start">
13
      <i className={`las la-tasks`}></i>
14
    </div>
15
  ),
16
  ARCHITECTURE: (
17
    <div className="custom-rounded custom-rounded-architecture">
18
      <i className={`las la-sitemap`}></i>
19
    </div>
20
  ),
21
  INSTANCE: (
22
    <div className="custom-rounded custom-rounded-instance">
23
      <i className={`las la-industry`}></i>
24
    </div>
25
  ),
26
  LOGIN: (
27
    <div className="custom-rounded custom-rounded-login">
28
      <i className={`las la-sign-in-alt`}></i>
29
    </div>
30
  ),
31
  PRIVATELABELING: (
32
    <div className="custom-rounded custom-rounded-privatelabel">
33
      <i className={`las la-swatchbook`}></i>
34
    </div>
35
  ),
36
  TEXTS: (
37
    <div className="custom-rounded custom-rounded-texts">
38
      <i className={`las la-paragraph`}></i>
39
    </div>
40
  ),
41
  POLICY: (
42
    <div className="custom-rounded custom-rounded-policy">
43
      <i className={`las la-file-contract`}></i>
44
    </div>
45
  ),
46
  SERVICE: (
47
    <div className="custom-rounded custom-rounded-service">
48
      <i className={`las la-concierge-bell`}></i>
49
    </div>
50
  ),
51
  STORAGE: (
52
    <div className="custom-rounded custom-rounded-storage">
53
      <i className={`las la-database`}></i>
54
    </div>
55
  ),
56
  FOLDER: (
57
    <div className="custom-rounded custom-rounded-storage">
58
      <i className={`las la-folder`}></i>
59
    </div>
60
  ),
61
  FILE: (
62
    <div className="custom-rounded custom-rounded-storage">
63
      <i className={`las la-file-alt`}></i>
64
    </div>
65
  ),
66
  SYSTEM: (
67
    <div className="custom-rounded custom-rounded-system">
68
      <i className={`las la-server`}></i>
69
    </div>
70
  ),
71
  APIS: (
72
    <div className="custom-rounded custom-rounded-apis">
73
      <i className={`las la-code`}></i>
74
    </div>
75
  ),
76
  HELP: (
77
    <div className="custom-rounded custom-rounded-help">
78
      <i className={`las la-question`}></i>
79
    </div>
80
  ),
81
  HELP_REGISTER: (
82
    <div className="custom-rounded custom-rounded-login">
83
      <i className={`las la-plus-circle`}></i>
84
    </div>
85
  ),
86
  HELP_LOGIN: (
87
    <div className="custom-rounded custom-rounded-login">
88
      <i className={`las la-sign-in-alt`}></i>
89
    </div>
90
  ),
91
  HELP_PASSWORDLESS: (
92
    <div className="custom-rounded custom-rounded-login">
93
      <i className={`las la-fingerprint`}></i>
94
    </div>
95
  ),
96
  HELP_PASSWORD: (
97
    <div className="custom-rounded custom-rounded-password">
98
      <svg
99
        xmlns="http://www.w3.org/2000/svg"
100
        xmlnsXlink="http://www.w3.org/1999/xlink"
101
        version="1.1"
102
        width="100%"
103
        height="100%"
104
        viewBox="0 0 24 24"
105
        fit=""
106
        preserveAspectRatio="xMidYMid meet"
107
        focusable="false"
108
      >
109
        <path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20M8.5,12A1.5,1.5 0 0,0 7,10.5A1.5,1.5 0 0,0 5.5,12A1.5,1.5 0 0,0 7,13.5A1.5,1.5 0 0,0 8.5,12M13,10.89C12.39,10.33 11.44,10.38 10.88,11C10.32,11.6 10.37,12.55 11,13.11C11.55,13.63 12.43,13.63 13,13.11V10.89Z"></path>
110
      </svg>
111
    </div>
112
  ),
113
  HELP_FACTORS: (
114
    <div className="custom-rounded custom-rounded-login">
115
      <i className={`las la-fingerprint`}></i>
116
    </div>
117
  ),
118
  HELP_PHONE: (
119
    <div className="custom-rounded custom-rounded-phone">
120
      <i className={`las la-phone`}></i>
121
    </div>
122
  ),
123
  HELP_EMAIL: (
124
    <div className="custom-rounded custom-rounded-email">
125
      <i className={`las la-at`}></i>
126
    </div>
127
  ),
128
  HELP_SOCIAL: (
129
    <div className="custom-rounded custom-rounded-login">
130
      <i className={`las la-share-alt`}></i>
131
    </div>
132
  ),
133
};
134

135
export function ListElement({
136
  link,
137
  iconClasses,
138
  roundClasses,
139
  label,
140
  type,
141
  title,
142
  description,
143
}) {
144
  return (
145
    <a 
146
      className={styles.listelement} 
147
      href={link} 
148
    >
149
      {type
150
        ? type
151
        : iconClasses && (
152
            <div className={roundClasses}>
153
              {label ? (
154
                <span className={styles.listlabel}>{label}</span>
155
              ) : (
156
                <i className={`${iconClasses}`}></i>
157
              )}
158
            </div>
159
          )}
160
      <div>
161
        <h3>{title}</h3>
162
        <p className={styles.listelement.description}>{description}</p>
163
      </div>
164
    </a>
165
  );
166
}
167

168
export function ListWrapper({ children, title, columns }) {
169
  return (
170
    <div className={styles.listWrapper}>
171
      {title && <span className={styles.listWrapperTitle}>{title}</span>}
172
      {children}
173
    </div>
174
  );
175
}
176

177
export function HomeListWrapper({ children, image }) {
178
  return (
179
    <div className={styles.homerow}>
180
      {image}
181
      <div className={styles.homecontent}>{children}</div>
182
    </div>
183
  );
184
}
185