@chakra-ui/core#Tooltip JavaScript Examples
The following examples show how to use
@chakra-ui/core#Tooltip.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CompGroup.js From opensource.builders with MIT License | 5 votes |
|
export default function CompGroup({ comp, commercial, alts }) {
const shuffled = shuffle(alts)
return (
<Box mb={16} width={{ base: "100%", lg: "50%" }}>
<Box mx={{ base: 0, sm: 1 }}>
<Box display="flex">
{commercial.map((com) => (
<Box display="flex" alignItems="center" ml={2}>
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
label={com.main}
placement="top"
>
<Box as="a" href={com.website} target="_blank">
<Box
as="img"
height="3rem"
minWidth="3rem"
bg="white"
boxShadow="md"
p={1}
// py={3}
// px={4}
borderRadius={5}
src={com.svg}
alt=""
/>
</Box>
</Tooltip>
</Box>
))}
</Box>
<Divider borderColor="gray.400" />
<Box display="flex" flexWrap="wrap">
{shuffled.length <= 5 ? (
shuffled.map((alt) => <AltListItem alt={alt} />)
) : (
<LoadMore alts={shuffled} />
)}
</Box>
</Box>
</Box>
)
}
Example #2
| Source File: Signup-Additional.js From allay-fe with MIT License | 4 votes |
|
SignupAdditional = ({
register,
errors,
location,
setNewLocation,
stateHelper,
validateFieldOfStudy,
uploadImage,
profile_image,
uploadResume,
profile_resume,
}) => {
// graduated state/helpers
const [graduated, setGraduated] = useState(false)
const isGraduated = () => {
setGraduated(true)
}
const notGraduated = () => {
setGraduated(false)
}
// employed state/helpers
const [employed, setEmployed] = useState(false)
const isEmployed = () => {
setEmployed(true)
}
const notEmployed = () => {
setEmployed(false)
}
//radio button state
const [priorExp, setPriorExp] = useState(false)
const [tlsl, setTlsl] = useState(false)
const [remote, setRemote] = useState(false)
//location helper
useEffect(() => {
setNewLocation({ ...location, myState: location.myState })
// removes numbers, commas, and whitespaces from city
if (location.myCity) {
if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
const tempCity = location.myCity
setNewLocation({
...location,
myCity: tempCity.replace(/^[\s,\d]+/, ''),
})
}
}
}, [location, setNewLocation])
///info for slack ID
const info = (
<Box>
<Image
objectFit="fit"
width="300px"
height="300px"
src={require('../../icons/slack.gif')}
alt="slack info"
/>
</Box>
)
return (
<>
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="61px"
justify="flex-start"
fontSize="16px"
>
<Text color="#131C4D" fontFamily="Muli">
The information below will be visible on your profile page by others
</Text>
</Flex>
{/* CLOUDINARY IMAGE UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="55px"
justify="space-evenly"
alignItems="center"
>
{!profile_image ? (
<Image size="100px" src={require('../../icons/user.svg')} />
) : (
<Image
size="100px"
style={{ borderRadius: '50px' }}
src={profile_image}
/>
)}
<Flex alignItems="center">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={uploadImage}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label for="files" class="btn">
Upload profile image
</label>
</Flex>
</Flex>
{/* LOCATION OF USER */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Location (City, State)
</FormLabel>
<CustomAutocomplete
stateHelper={stateHelper}
w="653px"
h="58px"
mb="30px"
rounded="2px"
variant="outline"
bgColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#17171B"
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
id="location"
name="location"
label="location"
placeholder="e.g. Los Angeles, CA"
ref={register}
/>
</FormControl>
</Flex>
{/* GRADUATED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={graduated ? '20px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Have you graduated from Lambda yet?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="graduated"
id="graduated-1"
value={true}
isChecked={graduated === true}
onClick={isGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="graduated"
id="graduated-2"
value={false}
isChecked={graduated === false}
onClick={notGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* GRADUATED MONTH AND YEAR */}
{graduated ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you graduate?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradMonth"
label="gradMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradYear"
label="gradYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Background
</Text>
</Flex>
{/* HIGHEST LEVEL OF EDUCATION */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Highest level of education
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="highest_ed"
label="highest_ed"
ref={register}
>
<option fontFamily="Muli" value="">
Select your education level
</option>
<option fontFamily="Muli" value="High school diploma">
High school diploma
</option>
<option fontFamily="Muli" value="Associate's degree">
Associate's degree
</option>
<option fontFamily="Muli" value="Bachelor's degree">
Bachelor's degree
</option>
<option fontFamily="Muli" value="Master's degree">
Master's degree
</option>
<option fontFamily="Muli" value="PhD">
PhD
</option>
</Select>
</FormControl>
{/* FIELD OF STUDY */}
<FormControl isInvalid={errors.fieldOfStudy}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Field of study
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="field_of_study"
label="field_of_study"
placeholder="Enter your field of study"
autoCapitalize="none"
ref={register({ validate: validateFieldOfStudy })}
/>
<FormErrorMessage>
{errors.fieldOfStudy && errors.fieldOfStudy.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PRIOR EXPERIENCE */}
<Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Prior to Lambda did you have any experience in your track?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="prior_experience"
id="priorExp-1"
ref={register}
value={true}
isChecked={priorExp === true}
onChange={() => setPriorExp(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="prior_experience"
id="priorExp-2"
ref={register}
value={false}
isChecked={priorExp === false}
onChange={() => setPriorExp(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* DID YOU TL/SL */}
<Flex wrap="wrap" w="653px" mx="auto" mb="100px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Have you been a TL/SL while at Lambda?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="tlsl_experience"
id="TLSL-1"
value={true}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="tlsl_experience"
id="TLSL-2"
value={false}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Employment
</Text>
</Flex>
{/* EMPLOYED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={employed ? '30px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you currently employed in your field of study?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed"
id="employed-1"
value={true}
isChecked={employed === true}
onClick={isEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed"
id="employed-2"
value={false}
isChecked={employed === false}
onClick={notEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* EMPLOYED COMPANY NAME AND JOB TITLE */}
{employed ? (
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Company name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="employed_company"
label="employed_company"
placeholder="Enter the company name"
autoCapitalize="none"
ref={register}
/>
</FormControl>
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Job title
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="employed_title"
label="employed_title"
placeholder="Enter your job title"
autoCapitalize="none"
ref={register}
/>
</FormControl>
</Flex>
) : null}
{/* REMOTE WORK CHECK */}
{employed ? (
<Flex wrap="wrap" w="653px" mx="auto" mb="30px" justify="space-between">
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you working remotely?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed_remote"
id="employed_remote-1"
value={true}
ref={register}
isChecked={remote === true}
onChange={() => setRemote(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed_remote"
id="employed_remote-2"
value={false}
ref={register}
isChecked={remote === false}
onChange={() => setRemote(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
) : null}
{/* EMPLOYMENT START DATE */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you start?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workMonth"
label="workMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workYear"
label="workYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Online Presence
</Text>
</Flex>
{/* RESUME UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" color="#131C4D" fontSize="18px" fontFamily="Muli">
Resume
</Text>
<Flex width="270px" justify="flex-end">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={uploadResume}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label for="files" class="btn">
{!profile_resume ? (
'Upload resume'
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
class="far fa-check-circle"
></i>
)}
</label>
</Flex>
</Flex>
<Flex w="653px" mx="auto" justify="flex-start">
<FormHelperText w="653px" mb="30px" color="#9194A8">
Must be a .pdf file
</FormHelperText>
</Flex>
{/* CONTACT EMAIL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Email address
</Text>
<SignupLoginInput
w="318px"
type="email"
name="contact_email"
label="contact_email"
placeholder="Enter your email address"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* PORTFOLIO URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Portfolio URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="portfolio_URL"
label="portfolio_URL"
placeholder="Enter your portfolio URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* LINKEDIN URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
LinkedIn URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="linked_in"
label="linked_in"
placeholder="Enter your LinkedIn URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* SLACK USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Slack ID
<Tooltip hasArrow label={info} placement="top">
<i style={{ paddingLeft: '10px' }} class="fas fa-question"></i>
</Tooltip>
</Text>
<SignupLoginInput
w="318px"
type="text"
name="slack"
label="slack"
placeholder="Enter your Slack ID"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* GITHUB USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Github URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="github"
label="github"
placeholder="Enter your Github URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* DRIBBBLE URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text align="center" fontSize="18px" color="#131C4D" fontFamily="Muli">
Dribbble URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="dribble"
label="dribble"
placeholder="Enter your Dribbble URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
</>
)
}
Example #3
| Source File: EditUserProfile.js From allay-fe with MIT License | 4 votes |
|
EditUserProfile = ({ match, history, userData, updateUser }) => {
const id = match.params.id
const userId = window.localStorage.getItem('userId')
// creating form state, setting default values
const { handleSubmit, errors, register, formState } = useForm({
defaultValues: {
firstName: userData.first_name,
lastName: userData.last_name,
gradMonth: userData.graduated ? userData.graduated.slice(5, 7) : null,
gradYear: userData.graduated ? userData.graduated.slice(0, 4) : null,
highest_ed: userData.highest_ed,
field_of_study: userData.field_of_study,
employed_company: userData.employed_company,
employed_title: userData.employed_title,
workMonth: userData.employed_start
? userData.employed_start.slice(5, 7)
: null,
workYear: userData.employed_start
? userData.employed_start.slice(0, 4)
: null,
resume: userData.resume ? userData.resume : null,
portfolio_URL: userData.portfolio ? userData.portfolio : null,
linked_in: userData.linked_in ? userData.linked_in : null,
slack: userData.slack ? userData.slack : null,
github: userData.github ? userData.github : null,
dribble: userData.dribble ? userData.dribble : null,
profile_image: userData.profile_image ? userData.profile_image : null,
},
})
//location state/helpers
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateHelper = (value) => {
setLocation(value)
}
// cloudinary stuff
const [newProfile_image, setNewProfile_Image] = useState('')
const [newProfile_resume, setNewProfile_resume] = useState('')
// graduated state/helpers
const [graduated, setGraduated] = useState(userData.graduated ? true : false)
const isGraduated = () => {
setGraduated(true)
}
const notGraduated = () => {
setGraduated(false)
}
// employed state/helpers
const [employed, setEmployed] = useState(
userData.employed_start ? true : false
)
const isEmployed = () => {
setEmployed(true)
}
const notEmployed = () => {
setEmployed(false)
}
//radio button state
const [priorExp, setPriorExp] = useState(
userData.prior_experience ? userData.prior_experience : false
)
const [tlsl, setTlsl] = useState(
userData.tlsl_experience ? userData.tlsl_experience : false
)
const [remote, setRemote] = useState(
userData.employed_remote ? userData.employed_remote : false
)
//location helper
useEffect(() => {
setNewLocation({ ...location, myState: location.myState })
// removes numbers, commas, and whitespaces from city
if (location.myCity) {
if (/^[0-9]+$/.test(location.myCity) || /\s/.test(location.myCity)) {
const tempCity = location.myCity
setNewLocation({
...location,
myCity: tempCity.replace(/^[\s,\d]+/, ''),
})
}
}
}, [location])
///info for slack ID
const info = (
<Box>
<Image
objectFit="fit"
width="300px"
height="300px"
src={require('../../../icons/slack.gif')}
alt="slack info"
/>
</Box>
)
//validation
function validateFirstName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'First Name is required'
} else if (value.length < 2) {
error = 'First Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'First Name can only contain letters'
}
return error || true
}
function validateLastName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'Last Name is required'
} else if (value.length < 2) {
error = 'Last Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'Last Name can only contain letters'
}
return error || true
}
function validateFieldOfStudy(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (nameRegex.test(value)) {
error = 'Field of study can only contain letters'
}
return error || true
}
//end validation
//add image to cloudinary
const updateImage = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setNewProfile_Image(...newProfile_image, file.secure_url)
}
//upload resume to cloudinary
const updateResume = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setNewProfile_resume(...newProfile_resume, file.secure_url)
}
// FORM SUBMISSION
const submitForm = (creds) => {
// correcting grad date format
let graduated = null
if (creds.gradMonth && creds.gradYear) {
graduated = `${creds.gradYear}-${creds.gradMonth}-01`
}
// correcting employed date format
let employed_start = null
if (creds.workMonth && creds.workYear) {
employed_start = `${creds.workYear}-${creds.workMonth}-01`
}
// formatting the signup state to match the back end columns
updateUser(id, {
first_name: creds.firstName,
last_name: creds.lastName,
location: newLocation
? `${newLocation.myCity || userData.location} ${newLocation.myState}`
: creds.location,
graduated: graduated,
highest_ed: creds.highest_ed || null,
field_of_study: creds.field_of_study || null,
prior_experience: creds.prior_experience
? JSON.parse(creds.prior_experience)
: false,
tlsl_experience: creds.tlsl_experience
? JSON.parse(creds.tlsl_experience)
: false,
employed_company: creds.employed_company || null,
employed_title: creds.employed_title || null,
employed_remote: creds.employed_remote
? JSON.parse(creds.employed_remote)
: false,
employed_start: employed_start,
resume: newProfile_resume || userData.resume,
linked_in: creds.linked_in || null,
slack: creds.slack || null,
github: creds.github || null,
dribble: creds.dribble || null,
profile_image: newProfile_image || userData.profile_image,
portfolio: creds.portfolio_URL || null,
}).then(() => history.push(`/profile/${id}`))
ReactGA.event({
category: 'User',
action: `Button Update Profile`,
})
}
const returnToProfile = (e) => {
e.preventDefault()
history.push(`/profile/${id}`)
}
//see profilePage component for details
const lazySolution =
userData.location != 'undefined undefined ' &&
userData.location != 'undefined undefined'
? userData.location
: 'Enter your location'
return (
<>
{/* //Top Section */}
<Flex
maxW="1440px"
w="100%"
px="40px"
py="28px"
m="0 auto"
justify="space-between"
align="center"
borderBottom="1px solid #EAF0FE"
>
<Flex>
<Link
style={{
textDecoration: 'none',
color: '#344CD0',
fontFamily: 'Poppins',
fontWeight: '600',
fontSize: '32px',
}}
to="/dashboard"
>
<h1> Allay </h1>
</Link>
</Flex>
{Number(userId) === Number(userData.id) ? (
<Flex>
{userData.profile_image === 'h' ? (
<Image
size="58px"
style={{ opacity: '0.6' }}
src={require('../../../icons/user.svg')}
/>
) : (
<Image
size="58px"
style={{ opacity: '0.6', borderRadius: '50%' }}
src={userData.profile_image}
/>
)}
</Flex>
) : null}
</Flex>
<Flex
w="833px"
mx="auto"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="833px"
p="6"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex w="653px" justify="space-between" my="68px" mx="auto">
<Text
as="h2"
fontSize="24px"
fontWeight="600"
fontFamily="Poppins"
>
Edit Profile
</Text>
<Flex w="150px" justify="space-between">
<Text
as="h3"
fontFamily="Muli"
fontSize="22px"
fontWeight="normal"
color="#9194A8"
style={{ cursor: 'pointer' }}
onClick={returnToProfile}
>
Cancel
</Text>
<Text
as="h3"
fontFamily="Muli"
fontSize="22px"
fontWeight="bold"
color="#344CD0"
style={{ cursor: 'pointer' }}
onClick={handleSubmit(submitForm)}
>
Save
</Text>
</Flex>
</Flex>
{/* CLOUDINARY IMAGE UPLOAD */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="55px"
justify="space-evenly"
alignItems="center"
>
{!newProfile_image ? (
<Avatar
size="2xl"
name={userData.first_name}
style={{ borderRadius: '50%' }}
src={userData.profile_image}
/>
) : (
<Avatar
size="2xl"
style={{ borderRadius: '50%' }}
src={newProfile_image}
/>
)}
<Flex alignItems="center">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={updateImage}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
{!newProfile_image ? (
<label htmlFor="files" className="btn">
Update profile image
</label>
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
className="far fa-check-circle"
></i>
)}
</Flex>
</Flex>
{/* FIRST NAME, LAST NAME */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
First Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="firstName"
label="firstName"
placeholder="John"
autoCapitalize="none"
ref={register({ validate: validateFirstName })}
/>
<FormErrorMessage>
{errors.firstName && errors.firstName.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Last Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="lastName"
label="lastName"
placeholder="Doe"
autoCapitalize="none"
ref={register({ validate: validateLastName })}
/>
<FormErrorMessage>
{errors.lastName && errors.lastName.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* LOCATION OF USER */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Location (City, State)
</FormLabel>
<CustomAutocomplete
stateHelper={stateHelper}
w="653px"
h="58px"
mb="30px"
rounded="2px"
variant="outline"
bgColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#17171B"
_hover={{ borderColor: '#BBBDC6' }}
_placeholder={{ color: '#BBBDC6' }}
id="location"
name="location"
label="location"
placeholder={lazySolution}
ref={register}
/>
</FormControl>
</Flex>
{/* GRADUATED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={graduated ? '20px' : '80px'}
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Have you graduated from Lambda yet?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="graduated"
id="graduated-1"
value={true}
isChecked={graduated === true}
onClick={isGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="graduated"
id="graduated-2"
value={false}
isChecked={graduated === false}
onClick={notGraduated}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* GRADUATED MONTH AND YEAR */}
{graduated ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
When did you graduate?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradMonth"
label="gradMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="155px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="gradYear"
label="gradYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Background
</Text>
</Flex>
{/* HIGHEST LEVEL OF EDUCATION */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Highest level of education
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="highest_ed"
label="highest_ed"
ref={register}
>
<option fontFamily="Muli" value="">
Select your education level
</option>
<option fontFamily="Muli" value="High school diploma">
High school diploma
</option>
<option fontFamily="Muli" value="Associate's degree">
Associate's degree
</option>
<option fontFamily="Muli" value="Bachelor's degree">
Bachelor's degree
</option>
<option fontFamily="Muli" value="Master's degree">
Master's degree
</option>
<option fontFamily="Muli" value="PhD">
PhD
</option>
</Select>
</FormControl>
{/* FIELD OF STUDY */}
<FormControl isInvalid={errors.fieldOfStudy}>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Field of study
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="field_of_study"
label="field_of_study"
placeholder="Enter your field of study"
autoCapitalize="none"
ref={register({ validate: validateFieldOfStudy })}
/>
<FormErrorMessage>
{errors.fieldOfStudy && errors.fieldOfStudy.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PRIOR EXPERIENCE */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="30px"
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Prior to Lambda did you have any experience in your track?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="prior_experience"
id="priorExp-1"
ref={register}
value={true}
isChecked={priorExp === true}
onChange={() => setPriorExp(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="prior_experience"
id="priorExp-2"
ref={register}
value={false}
isChecked={priorExp === false}
onChange={() => setPriorExp(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* DID YOU TL/SL */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="100px"
justify="space-between"
>
<FormLabel fontSize="18px" color="#131C4D" fontFamily="Muli">
Have you been a TL/SL while at Lambda?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="tlsl_experience"
id="TLSL-1"
value={true}
ref={register}
isChecked={tlsl === true}
onChange={() => setTlsl(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="tlsl_experience"
id="TLSL-2"
value={false}
ref={register}
isChecked={tlsl === false}
onChange={() => setTlsl(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* RESUME UPLOAD */}
{/* /// */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
justify="space-between"
align="center"
>
<Text
fontSize="18px"
color="#131C4D"
align="center"
fontFamily="Muli"
>
Resume
</Text>
<Flex width="270px" justify="flex-end">
<input
type="file"
filename="image"
placeholder="Upload profile picture"
onChange={updateResume}
style={{
opacity: '1',
width: '105px',
color: 'transparent',
backgroundColor: 'transparent',
}}
/>
<label htmlFor="files" className="btn">
{!newProfile_resume ? (
'Upload resume'
) : (
<i
style={{
fontSize: '1.4rem',
color: 'green',
paddingLeft: '20px',
}}
className="far fa-check-circle"
></i>
)}
</label>
</Flex>
</Flex>
<Flex w="653px" mx="auto" justify="flex-start">
<FormHelperText w="653px" mb="30px" color="#9194A8">
Must be a .pdf file
</FormHelperText>
</Flex>
{/* //// */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Employment
</Text>
</Flex>
{/* EMPLOYED CHECK */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={employed ? '30px' : '80px'}
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you currently employed in your field of study?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed"
id="employed-1"
value={true}
isChecked={employed === true}
onClick={isEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed"
id="employed-2"
value={false}
isChecked={employed === false}
onClick={notEmployed}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
{/* EMPLOYED COMPANY NAME AND JOB TITLE */}
{employed ? (
<Flex wrap="wrap" w="653" justify="center">
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Company name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="employed_company"
label="employed_company"
placeholder="Enter the company name"
autoCapitalize="none"
ref={register}
/>
</FormControl>
<FormControl>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Job title
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="employed_title"
label="employed_title"
placeholder="Enter your job title"
autoCapitalize="none"
ref={register}
/>
</FormControl>
</Flex>
) : null}
{/* REMOTE WORK CHECK */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="30px"
justify="space-between"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Are you working remotely?
</FormLabel>
<Flex justify="space-between" w="131px">
<Radio
name="employed_remote"
id="employed_remote-1"
value={true}
ref={register}
isChecked={remote === true}
onChange={() => setRemote(true)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
Yes
</Radio>
<Radio
name="employed_remote"
id="employed_remote-2"
value={false}
ref={register}
isChecked={remote === false}
onChange={() => setRemote(false)}
borderRadius="md"
borderColor="#D9D9D9"
_checked={{ bg: '#344CD0' }}
>
No
</Radio>
</Flex>
</Flex>
) : null}
{/* EMPLOYMENT START DATE */}
{employed ? (
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="80px"
justify="space-between"
align="center"
>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
When did you start?
</FormLabel>
<Flex align="center" alignContent="center">
<FormControl>
<Select
mr="17px"
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workMonth"
label="workMonth"
ref={register}
>
<option fontFamily="Muli" value="">
Month
</option>
<option fontFamily="Muli" value="01">
Jan
</option>
<option fontFamily="Muli" value="02">
Feb
</option>
<option fontFamily="Muli" value="03">
Mar
</option>
<option fontFamily="Muli" value="04">
Apr
</option>
<option fontFamily="Muli" value="05">
May
</option>
<option fontFamily="Muli" value="06">
Jun
</option>
<option fontFamily="Muli" value="07">
Jul
</option>
<option fontFamily="Muli" value="08">
Aug
</option>
<option fontFamily="Muli" value="09">
Sep
</option>
<option fontFamily="Muli" value="10">
Oct
</option>
<option fontFamily="Muli" value="11">
Nov
</option>
<option fontFamily="Muli" value="12">
Dec
</option>
</Select>
</FormControl>
<FormControl>
<Select
h="68px"
py="16px"
w="159px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="workYear"
label="workYear"
ref={register}
>
<option fontFamily="Muli" value="">
Year
</option>
{years.map((year, index) => (
<option key={`year${index}`} value={year}>
{year}
</option>
))}
</Select>
</FormControl>
</Flex>
</Flex>
) : null}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb="35px"
justify="flex-start"
borderTop="1px solid #DADADD"
>
<Text
fontFamily="Poppins"
fontWeight="600"
fontSize="24px"
lineHeight="36px"
color="#BBBDC6"
>
Online Presence
</Text>
</Flex>
{/* PORTFOLIO URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Portfolio URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="portfolio_URL"
label="portfolio_URL"
placeholder="Enter your portfolio URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* LINKEDIN URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
LinkedIn URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="linked_in"
label="linked_in"
placeholder="Enter your LinkedIn URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* SLACK USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Slack ID
<Tooltip hasArrow label={info} placement="top">
<i
style={{ paddingLeft: '10px' }}
className="fas fa-question"
></i>
</Tooltip>
</Text>
<SignupLoginInput
w="318px"
type="text"
name="slack"
label="slack"
placeholder="Enter your Slack ID"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* GITHUB USERNAME */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Github URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="github"
label="github"
placeholder="Enter your Github URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
{/* DRIBBBLE URL */}
<Flex
wrap="wrap"
w="653px"
mb="15px"
mx="auto"
justify="space-between"
align="center"
>
<Text
color="#131C4D"
fontSize="18px"
align="center"
fontFamily="Muli"
>
Dribbble URL
</Text>
<SignupLoginInput
w="318px"
type="text"
name="dribble"
label="dribble"
placeholder="Enter your Dribbble URL"
autoCapitalize="none"
ref={register}
/>
</Flex>
<Flex
w="100%"
style={{ alignItems: 'center' }}
justify="center"
direction="column"
>
<Button
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="registerSubmit"
>
Save
</Button>
<Button
mb="30px"
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="#9194A8"
backgroundColor="#FDFDFF"
_hover={{ cursor: 'pointer' }}
onClick={returnToProfile}
data-cy="cancelUpdate"
>
Cancel
</Button>
</Flex>
</Flex>
</form>
</Flex>
</>
)
}
Example #4
| Source File: AltListItem.js From opensource.builders with MIT License | 4 votes |
|
export default function AltListItem({ alt }) {
return (
<Box
width={{ base: "100%" }}
borderRadius="4px"
m={2}
boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
bg="white"
>
<Box as="a" target="_blank" href={alt.site}>
<Box display="flex" p={2}>
<Box display="flex">
<Box
as="img"
height="56px"
width="56px"
mr={3}
borderRadius="4px"
boxShadow="0px 1px 4px rgba(0, 0, 0, 0.16)"
src={alt.svg}
/>
<Box
display="flex"
flexDirection="column"
justifyContent="center"
lineHeight="21px"
>
<Text fontSize="md" fontWeight={500}>
{alt.name}
</Text>
<Box
fontSize={14}
color="#D69E2E"
display="flex"
alignItems="center"
fontWeight={600}
mt={1}
>
<Icon name="star" size={3} mr={1} /> {alt.stars}
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label="Language"
placement="top"
>
<Badge ml={3} variantColor="green">
{alt.language}
</Badge>
</Tooltip>
<Tooltip
variantColor="blue"
hasArrow
label="License"
placement="top"
>
<Badge
ml={3}
bg="rgb(206, 237, 255)"
color="rgb(21, 62, 117)"
>
{alt.license}
</Badge>
</Tooltip>
</Box>
</Box>
</Box>
<Box
ml="auto"
display={{ base: "none", sm: "flex" }}
alignItems="center"
>
<Box as="a" href={alt.deploy} target="_blank" mx={5}>
{alt.deploy ? (
deployLogo(alt.deploy)
) : (
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label={"No Deploy Instructions Found"}
placement="top"
>
<Box size={4}>
<svg
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#718096"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
</Tooltip>
)}
</Box>
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label="Repo"
placement="top"
>
<Box
as="a"
href={`https://github.com/${alt.repo}`}
target="_blank"
>
<svg
stroke="#718096"
fill="#718096"
strokeWidth="0"
version="1.1"
viewBox="0 0 32 32"
height="1.1em"
width="1.1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z" />
</svg>
</Box>
</Tooltip>
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label="Website"
placement="top"
>
<Box size={5} mx={3} as="a" href={alt.site} target="_blank">
<svg viewBox="0 0 24 24" focusable="false" role="presentation">
<path
fill="#718096"
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
/>
</svg>
</Box>
</Tooltip>
</Box>
</Box>
<Divider display={{ sm: "none" }} my={0} borderColor="#edf1f6" />
<Box
display={{ base: "flex", sm: "none" }}
alignItems="center"
justifyContent="center"
>
<Box
width="33%"
display="flex"
alignItems="center"
justifyContent="center"
py={1}
>
<Box
as="a"
href={alt.deploy}
target="_blank"
display="flex"
alignItems="center"
px={10}
>
{alt.deploy ? (
deployLogo(alt.deploy)
) : (
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label={"No Deploy Instructions Found"}
placement="top"
>
<Box size={4}>
<svg
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#718096"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
</Tooltip>
)}
<Heading
fontSize="xs"
color="gray.500"
letterSpacing="wide"
textTransform="uppercase"
ml={1}
>
Deploy
</Heading>
</Box>
</Box>
<Box
width="34%"
display="flex"
alignItems="center"
justifyContent="center"
borderRight="1px solid #edf1f6"
borderLeft="1px solid #edf1f6"
py={1}
>
<Box
as="a"
href={`https://github.com/${alt.repo}`}
target="_blank"
display="flex"
alignItems="center"
>
<svg
stroke="#718096"
fill="#718096"
strokeWidth="0"
version="1.1"
height="1.2em"
width="1.2em"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M16 5.343c-6.196 0-11.219 5.023-11.219 11.219 0 4.957 3.214 9.162 7.673 10.645 0.561 0.103 0.766-0.244 0.766-0.54 0-0.267-0.010-1.152-0.016-2.088-3.12 0.678-3.779-1.323-3.779-1.323-0.511-1.296-1.246-1.641-1.246-1.641-1.020-0.696 0.077-0.682 0.077-0.682 1.126 0.078 1.72 1.156 1.72 1.156 1.001 1.715 2.627 1.219 3.265 0.931 0.102-0.723 0.392-1.219 0.712-1.498-2.49-0.283-5.11-1.246-5.11-5.545 0-1.226 0.438-2.225 1.154-3.011-0.114-0.285-0.501-1.426 0.111-2.97 0 0 0.941-0.301 3.085 1.15 0.894-0.25 1.854-0.373 2.807-0.377 0.953 0.004 1.913 0.129 2.809 0.379 2.14-1.453 3.083-1.15 3.083-1.15 0.613 1.545 0.227 2.685 0.112 2.969 0.719 0.785 1.153 1.785 1.153 3.011 0 4.31-2.624 5.259-5.123 5.537 0.404 0.348 0.761 1.030 0.761 2.076 0 1.5-0.015 2.709-0.015 3.079 0 0.299 0.204 0.648 0.772 0.538 4.455-1.486 7.666-5.69 7.666-10.645 0-6.195-5.023-11.219-11.219-11.219z" />
</svg>
<Heading
fontSize="xs"
color="gray.500"
letterSpacing="wide"
textTransform="uppercase"
ml={1}
>
Repo
</Heading>
</Box>
</Box>
<Box
width="33%"
display="flex"
alignItems="center"
justifyContent="center"
py={1}
>
<Box
mx={3}
as="a"
href={alt.site}
target="_blank"
display="flex"
alignItems="center"
>
<Heading
fontSize="xs"
color="gray.500"
letterSpacing="wide"
textTransform="uppercase"
>
site
</Heading>
<svg
viewBox="0 0 24 24"
focusable="false"
role="presentation"
height="1.2em"
width="1.2em"
>
<path
fill="#718096"
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
/>
</svg>
</Box>
</Box>
</Box>
</Box>
</Box>
)
}
Example #5
| Source File: deployLogo.js From opensource.builders with MIT License | 4 votes |
|
deployLogo = (deploy) => {
if (deploy.includes("heroku.com")) {
return (
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label={"Deploy via Heroku"}
placement="top"
>
<Box>
<svg
width="10px"
viewBox="0 0 256 400"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
>
<path
d="M28.083 398.289V363.51c0-2.452-1.798-3.51-3.917-3.51-4.248 0-9.554 1.058-14.37 3.181v35.108H0v-64.576h9.795v21.304c4.656-1.712 10.206-3.18 15.758-3.18 8.898 0 12.246 5.469 12.246 12.976v33.476h-9.716zm27.999-21.063c.326 11.674 2.613 13.961 9.794 13.961 5.634 0 12.002-1.879 16.902-3.757l1.632 7.346c-5.226 2.37-11.593 4.655-19.183 4.655-16.33 0-18.862-8.978-18.862-23.268 0-7.835.573-14.939 2.45-21.47 4.898-1.878 11.43-2.857 19.673-2.857 13.393 0 17.473 7.43 17.473 20.41v4.98H56.082zM68.488 360c-2.935 0-7.59.082-11.427.813-.406 1.96-.899 4.655-1.062 9.636h20.41c0-6.778-1.225-10.449-7.921-10.449zm35.837 3.181v35.108h-9.797v-39.515c8.246-4.489 16.981-5.877 22.698-6.285v8.164c-4 .326-9.064.816-12.9 2.528zm38.778 36.25c-14.616 0-21.228-7.183-21.228-23.594 0-17.389 8.735-24 21.228-24 14.612 0 21.226 7.182 21.226 23.592 0 17.39-8.737 24.002-21.226 24.002zm0-39.43c-7.512 0-11.675 4.325-11.675 15.836 0 12.574 3.51 15.35 11.675 15.35 7.51 0 11.674-4.247 11.674-15.758 0-12.574-3.51-15.429-11.674-15.429zm68.49 38.288H200.08c-2.692-7.184-6.45-14.532-12.246-20.9h-5.144v20.9h-9.796v-64.576h9.796v37.062h4.573c4.98-5.144 8.816-11.509 11.511-17.797h11.02c-3.754 7.593-8.57 14.287-13.959 19.757 6.45 8.164 11.511 16.818 15.757 25.554zm18.363 1.142c-8.897 0-12.244-5.468-12.244-12.98v-33.473h9.714v34.697c0 2.452 1.794 3.512 3.917 3.512 4.246 0 10.042-1.06 14.86-3.184v-35.025H256v39.35c-11.593 6.369-20.493 7.103-26.044 7.103zM225.628 317.253H30.258C13.545 317.253 0 303.708 0 286.998V30.256C0 13.546 13.546 0 30.257 0h195.37c16.71 0 30.26 13.546 30.26 30.256v256.742c0 16.71-13.55 30.255-30.26 30.255z"
fill="#6762A6"
/>
<path
d="M160.36 273.6V147.61s8.195-30.15-100.943 12.334c-.2.539-.2-116.504-.2-116.504l35.66-.22v74.991s99.846-39.325 99.846 29.824V273.6h-34.362zm20.32-184.994h-37.824c13.615-16.646 25.94-45.167 25.94-45.167h39.11s-6.696 18.587-27.225 45.167zM59.865 273.382v-71.748l35.878 35.877-35.878 35.871z"
fill="#FFF"
/>
</svg>
</Box>
</Tooltip>
)
}
if (deploy.includes("digitalocean")) {
return (
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label={"Deploy via DigitalOcean"}
placement="top"
>
<Box>
<svg
width="12px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -3.954 53.927 53.954"
>
<g fill="#0080ff" fillRule="evenodd">
<path d="M24.915 50v-9.661c10.226 0 18.164-10.141 14.237-20.904a14.438 14.438 0 0 0-8.615-8.616C19.774 6.921 9.633 14.83 9.633 25.056H0C0 8.758 15.763-3.954 32.853 1.384 40.311 3.73 46.271 9.661 48.588 17.12 53.927 34.237 41.243 50 24.915 50" />
<path d="M15.339 40.367h9.604v-9.604H15.34zm-7.401 7.401h7.4v-7.4h-7.4zm-6.187-7.4h6.187V34.18H1.751z" />
</g>
</svg>
</Box>
</Tooltip>
)
}
if (deploy.includes("zeit.co")) {
return (
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label={"Deploy via Now.sh"}
placement="top"
>
<Box size={3}>
<svg
viewBox="0 0 114 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
x1="100.929941%"
y1="181.283245%"
x2="41.7687834%"
y2="100%"
id="linearGradient-1"
>
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</linearGradient>
</defs>
<g
id="Page-1"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g
id="Black-Triangle"
transform="translate(-293.000000, -150.000000)"
fill="url(#linearGradient-1)"
>
<polygon
id="Logotype---Black"
points="350 150 407 250 293 250"
></polygon>
</g>
</g>
</svg>
</Box>
</Tooltip>
)
}
if (deploy.includes("render")) {
return (
<Tooltip
bg="rgb(45, 55, 72)"
color="rgba(255, 255, 255, 0.92);"
hasArrow
label={"Deploy via Render"}
placement="top"
>
<Box size={3}>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 171 171"
>
<g transform="translate(-15853 -8503)" fill="#46E3B7">
<g>
<polygon
class="st0"
points="15966.3,8503 15964.3,8503 15964.3,8505 15964.3,8523.6 15964.3,8525.6 15966.3,8525.6 15984.9,8525.6 15986.9,8525.6 15986.9,8523.6 15986.9,8505 15986.9,8503 15984.9,8503 "
/>
<path
class="st0"
d="M15906.5,8503c-7.2,0-14.2,1.4-20.8,4.2c-6.4,2.7-12.1,6.6-17,11.5s-8.8,10.6-11.5,17 c-2.8,6.6-4.2,13.6-4.2,20.8v78.4v2h2h18.6h2v-2v-78.7c0.4-8.1,3.8-15.7,9.5-21.3c5.8-5.7,13.4-9,21.5-9.3h41.2h2v-2V8505v-2h-2 H15906.5z"
/>
<polygon
class="st0"
points="16003.4,8577.2 16001.4,8577.2 16001.4,8579.2 16001.4,8597.8 16001.4,8599.8 16003.4,8599.8 16022,8599.8 16024,8599.8 16024,8597.8 16024,8579.2 16024,8577.2 16022,8577.2 "
/>
<polygon
class="st0"
points="16003.4,8540.1 16001.4,8540.1 16001.4,8542.1 16001.4,8560.7 16001.4,8562.7 16003.4,8562.7 16022,8562.7 16024,8562.7 16024,8560.7 16024,8542.1 16024,8540.1 16022,8540.1 "
/>
<polygon
class="st0"
points="16022,8503 16003.4,8503 16001.4,8503 16001.4,8505 16001.4,8523.6 16001.4,8525.6 16003.4,8525.6 16022,8525.6 16024,8525.6 16024,8523.6 16024,8505 16024,8503 "
/>
<polygon
class="st0"
points="16003.4,8614.3 16001.4,8614.3 16001.4,8616.3 16001.4,8634.9 16001.4,8636.9 16003.4,8636.9 16022,8636.9 16024,8636.9 16024,8634.9 16024,8616.3 16024,8614.3 16022,8614.3 "
/>
<polygon
class="st0"
points="16003.4,8651.4 16001.4,8651.4 16001.4,8653.4 16001.4,8672 16001.4,8674 16003.4,8674 16022,8674 16024,8674 16024,8672 16024,8653.4 16024,8651.4 16022,8651.4 "
/>
<polygon
class="st0"
points="15966.3,8651.4 15964.3,8651.4 15964.3,8653.4 15964.3,8672 15964.3,8674 15966.3,8674 15984.9,8674 15986.9,8674 15986.9,8672 15986.9,8653.4 15986.9,8651.4 15984.9,8651.4 "
/>
<polygon
class="st0"
points="15929.2,8651.4 15927.2,8651.4 15927.2,8653.4 15927.2,8672 15927.2,8674 15929.2,8674 15947.8,8674 15949.8,8674 15949.8,8672 15949.8,8653.4 15949.8,8651.4 15947.8,8651.4 "
/>
<polygon
class="st0"
points="15892.1,8651.4 15890.1,8651.4 15890.1,8653.4 15890.1,8672 15890.1,8674 15892.1,8674 15910.7,8674 15912.7,8674 15912.7,8672 15912.7,8653.4 15912.7,8651.4 15910.7,8651.4 "
/>
<polygon
class="st0"
points="15855,8651.4 15853,8651.4 15853,8653.4 15853,8672 15853,8674 15855,8674 15873.6,8674 15875.6,8674 15875.6,8672 15875.6,8653.4 15875.6,8651.4 15873.6,8651.4 "
/>
</g>
</g>
</svg>
</Box>
</Tooltip>
)
}
if (deploy) {
return (
<Tooltip hasArrow label={"Deploy instructions"} placement="top">
<Box size={4}>
<svg
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M9 14L11 16L15 12"
stroke="#718096"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
</Tooltip>
)
}
}
