new card types, style changes, image preloading etc etc
diff --git a/Components/Card.js b/Components/Card.js
index e90a73f..c4a31c6 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -17,39 +17,99 @@
}
}
+ getButtonRow() {
+ return this.props.buttons ? this.props.buttons.map((button, i) => {
+ return <a
+ key={i}
+ className={Styles.button}
+ style={{backgroundColor:`#${button.color}`, color:`#${this.props.buttonText}`}}
+ href={button.link ? button.link : null}
+ onClick={button.onClick ? button.onClick : null}
+ target={button.newTab ? "_blank" : undefined}
+ rel="noreferrer">{button.text}
+ </a>
+ }) : null
+ }
+
+ getTitleBlock() {
+ let icons = null;
+ if (this.props.icon && this.props.icon[0].length > 1) {
+ icons = <div className={Styles.iconRow}>{this.props.icon.map((icon, i) => {
+ return <img key={i} alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes/${icon}.svg`} />
+ })}</div>
+ } else if (this.props.icon) {
+ icons = <img alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes/${this.props.icon}.svg`} />
+ } else if (this.props.wave) {
+ icons = <img alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes//${this.props.wave}.svg`} />
+ }
+ return <>{icons}</>;
+ }
+ getBand() {
+ if (this.props.band) {
+ return <div className={Styles.band} style={{
+ backgroundColor: `#${this.props.band.color ?? "F27878"}`,
+ bottom: this.props.buttons ? `calc(25% + 5px)` : "40px"
+ }}>
+ <p style={{color: "#" + (this.props.band.textColor ?? "FFFFFF")}}>{this.props.band.text ?? ""}</p>
+ </div>
+ }
+ }
+
render() {
- return (
- <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
- margin: "0"
- }} onClick={this.handleClick}>
- <div className={Styles.backgroundGradient} style={{
- backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
- }} />
- <img alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
- <div className={Styles.panel} onClick={this.handleClick}>
- <div className={Styles.titleContainer}>
- <img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
- <h1 className={Styles.title}>{this.props.title}</h1>
- </div>
- <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
- <div className={Styles.buttonLayout} onClick={this.showMessage}>
- {
- this.props.buttons ? this.props.buttons.map((button, i) => {
- return <a
- key={i}
- className={Styles.button}
- style={{backgroundColor:`#${button.color}`, color:`#${this.props.buttonText}`}}
- href={button.link ? button.link : null}
- onClick={button.onClick ? button.onClick : null}
- target={button.newTab ? "_blank" : undefined}
- rel="noreferrer">{button.text}
- </a>
- }) : null
- }
+ let overwriteAlign = {
+ "left": "flex-start",
+ "center": "center",
+ "right": "flex-end"
+ }[this.props.overwritePosition ?? "right"];
+ if (this.props.border) {
+ return (
+ <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null) + " " + Styles.dashed} style={{
+ margin: "0", opacity: `0`, boxShadow: "none", borderColor: `#${this.props.border}`
+ }}>
+ <div className={Styles.noPanel}>
+ <div className={Styles.titleContainer}>
+ {
+ (this.props.icon || this.props.wave)
+ ? <img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
+ : null
+ }
+ <h1 className={Styles.title}>{this.props.title}</h1>
+ </div>
+ <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
+ {this.getBand()}
+ <div className={Styles.buttonLayout} onClick={this.showMessage} style={{
+ justifyContent: overwriteAlign
+ }}>
+ {this.getButtonRow()}
+ </div>
</div>
</div>
- </div>
- );
+ );
+ } else {
+ return (
+ <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
+ margin: "0"
+ }} onClick={this.handleClick}>
+ <div className={Styles.backgroundGradient} style={{
+ backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
+ }} />
+ <img alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
+ <div className={Styles.panel} onClick={this.handleClick}>
+ <div className={Styles.titleContainer}>
+ { this.getTitleBlock() }
+ <h1 className={Styles.title}>{this.props.title}</h1>
+ </div>
+ <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
+ {this.getBand()}
+ <div className={Styles.buttonLayout} onClick={this.showMessage} style={{
+ justifyContent: overwriteAlign
+ }}>
+ {this.getButtonRow()}
+ </div>
+ </div>
+ </div>
+ );
+ }
}
}