Last active
December 5, 2020 11:13
-
-
Save ilyalesik/ca347b1dfd170b69ca50260cd61e587b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from "react"; | |
| import {Component, View, Image, StyleSheet, Svg, Text } from "react-figma"; | |
| import nozzleIcon from "../../pictures/icons/nozzle.svg"; | |
| import bottomPanelBackground from "./bottom-panel-background.svg"; | |
| import moneyIcon from "../../pictures/icons/Money.svg"; | |
| import ratingIcon from "../../pictures/icons/Rating.svg"; | |
| import clockIcon from "../../pictures/icons/Clock.svg"; | |
| import {Material} from "../material/Material"; | |
| const styles = StyleSheet.create({ | |
| container: { | |
| width: 238, | |
| height: 336, | |
| backgroundColor: `#ffffff`, | |
| flexDirection: "column" | |
| }, | |
| bottomPanelContainer: { | |
| width: 238, | |
| height: 103, | |
| position: "relative", | |
| alignItems: "center", | |
| justifyContent: "center" | |
| }, | |
| topContainer: { | |
| flex: 1, | |
| width: "100%", | |
| position: "relative", | |
| flexDirection: "row", | |
| paddingTop: 10, | |
| paddingLeft: 4, | |
| paddingRight: 4 | |
| }, | |
| nozzleContainer: { | |
| marginRight: 12 | |
| }, | |
| nozzle: { | |
| width: 48, | |
| height: 48, | |
| marginTop: 185, | |
| marginLeft: -3 | |
| }, | |
| mainBlock: { | |
| flexDirection: "column", | |
| alignItems: "center", | |
| flex: 1, | |
| marginRight: 10 | |
| }, | |
| title: { | |
| fontFamily: "JetBrains Mono", | |
| fontWeight: ("ExtraBold" as any), | |
| fontSize: 16, | |
| maxWidth: 110, | |
| textAlign: "center", | |
| }, | |
| picture: { | |
| marginTop: 9, | |
| width: 122, | |
| height: 179, | |
| }, | |
| paramsBlock: { | |
| flexDirection: "column", | |
| alignItems: "center" | |
| }, | |
| paramIconContainer: { | |
| width: 40, | |
| height: 40, | |
| position: "relative" | |
| }, | |
| paramIcon: { | |
| ...StyleSheet.absoluteFillObject, | |
| width: 77, | |
| height: 77, | |
| top: -17, | |
| left: -25, | |
| marginTop: 5, | |
| marginLeft: 5 | |
| }, | |
| paramText: { | |
| fontFamily: "JetBrains Mono", | |
| fontWeight: ("ExtraBold" as any), | |
| fontSize: 20, | |
| textAlign: "center", | |
| marginTop: 2 | |
| }, | |
| paramTextBig: { | |
| fontSize: 24, | |
| }, | |
| materialsContainer: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| justifyContent: "center", | |
| paddingTop: 15, | |
| flexWrap: "wrap" | |
| } | |
| }); | |
| export const PrinterCard = (props) => { | |
| const {style, name, isDoubleNozzle, money1, money2, size, performance, picture, materials} = props; | |
| return <View style={[styles.container]}> | |
| <View style={styles.topContainer}> | |
| <View style={styles.nozzleContainer}> | |
| {isDoubleNozzle ? <Svg source={nozzleIcon} style={styles.nozzle} /> | |
| : <View style={styles.nozzle} />} | |
| </View> | |
| <View style={[styles.mainBlock]}> | |
| <Text style={styles.title}> | |
| {name} | |
| </Text> | |
| {picture && <Image resizeMode={"contain"} source={picture} style={styles.picture} />} | |
| </View> | |
| <View style={styles.paramsBlock}> | |
| <View style={styles.paramIconContainer}> | |
| <Svg source={moneyIcon} style={styles.paramIcon} /> | |
| </View> | |
| <Text style={styles.paramText}> | |
| {`${money1}/${money2}`} | |
| </Text> | |
| <View style={[styles.paramIconContainer, {marginTop: 6}]}> | |
| <Svg source={ratingIcon} style={[styles.paramIcon, {height: 82, marginTop: 0}]} /> | |
| </View> | |
| <Text style={[styles.paramText, styles.paramTextBig]}> | |
| {size} | |
| </Text> | |
| <View style={[styles.paramIconContainer, {marginTop: 6}]}> | |
| <Svg source={clockIcon} style={[styles.paramIcon, {height: 82, marginTop: 0}]} /> | |
| </View> | |
| <Text style={[styles.paramText, styles.paramTextBig]}> | |
| {performance} | |
| </Text> | |
| </View> | |
| </View> | |
| <View style={[styles.bottomPanelContainer]}> | |
| <Svg source={bottomPanelBackground} style={[StyleSheet.absoluteFillObject]} /> | |
| <View style={styles.materialsContainer}> | |
| {materials && materials.map((material, id) => { | |
| return <Material key={id} material={material} style={{marginLeft: id === 0 ? 0 : -1, marginRight: -1}} /> | |
| })} | |
| </View> | |
| </View> | |
| </View> | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const Printers = () => { | |
| const {data} = usePromise(getPrinters); | |
| return <Frame name="Printers"> | |
| {data && data.map((record) => { | |
| const id = record.id; | |
| const name = record.fields.Name; | |
| const isDoubleNozzle = record.fields["Double nozzle"]; | |
| const money1 = record.fields.Money1; | |
| const money2 = record.fields.Money2; | |
| const size = record.fields.Size; | |
| const performance = record.fields.Performance; | |
| const picture = record.fields.Picture; | |
| const materials = record.fields.Materials; | |
| const pictureUrl = picture && picture.length > 0 && picture[0].url; | |
| return <Component key={id} name={name}> | |
| <PrinterCard name={name} | |
| isDoubleNozzle={isDoubleNozzle} | |
| money1={money1} | |
| money2={money2} | |
| size={size} | |
| performance={performance} | |
| picture={pictureUrl} | |
| materials={materials} | |
| /></Component> | |
| })} | |
| </Frame> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment