react-icons/io#IoMdThumbsDown TypeScript Examples

The following examples show how to use react-icons/io#IoMdThumbsDown. 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: youtubeWrapper.tsx    From podcast-maker with MIT License 4 votes vote down vote up
YoutubeWrapper: React.FC<WrapperProps> = ({children, title}) => {
	const {
		width: videoWidth,
		height: videoHeight,
		durationInFrames,
	} = useVideoConfig();
	const frame = useCurrentFrame();

	const startScaleAnimationAtFrame = 30;
	const startClickAnimationAtFrame = 50 + startScaleAnimationAtFrame;

	//Mouse movement
	const moveY = interpolate(
		frame,
		[0, 50, 57, 73, 90, 110, 115, 125, 150].map(
			(value) => value + startClickAnimationAtFrame
		),
		[-50, 95, 93, 97, 20, 10, 15, 12, -50]
	);
	const moveX = interpolate(
		frame,
		[0, 50, 57, 73, 90, 110, 115, 125, 150].map(
			(value) => value + startClickAnimationAtFrame
		),
		[370, 650, 657, 655, 40, 50, 45, 48, 150]
	);
	const colorsClick = interpolateColors(
		frame,
		[0, 50, 57, 73, 90, 110, 115, 125, 150].map(
			(value) => value + startClickAnimationAtFrame
		),
		['#fff', '#fff', '#aaa', '#fff', '#fff', '#fff', '#aaa', '#fff', '#fff']
	);

	//Scale change
	const scale = interpolate(
		frame,
		[
			0,
			0 + startScaleAnimationAtFrame,
			startClickAnimationAtFrame,
			200 + startScaleAnimationAtFrame,
			250 + startScaleAnimationAtFrame,
			durationInFrames,
		],
		[1.57, 1.57, 1, 1, 1.57, 1.57]
	);
	const translateX = interpolate(
		frame,
		[
			0,
			0 + startScaleAnimationAtFrame,
			startClickAnimationAtFrame,
			200 + startScaleAnimationAtFrame,
			250 + startScaleAnimationAtFrame,
			durationInFrames,
		],
		[16.3, 16.3, 0, 0, 16.3, 16.3]
	);
	const translateY = interpolate(
		frame,
		[
			0,
			0 + startScaleAnimationAtFrame,
			startClickAnimationAtFrame,
			200 + startScaleAnimationAtFrame,
			250 + startScaleAnimationAtFrame,
			durationInFrames,
		],
		[7.3, 7.3, 0, 0, 7.3, 7.3]
	);

	return (
		<div
			style={{
				transform: `scale(${scale}) translate(${translateX}%, ${translateY}%)`,
				background: '#212121',
			}}
		>
			<Sequence
				from={47 + startClickAnimationAtFrame}
				durationInFrames={Infinity}
			>
				<Audio src={clickSound} startFrom={30} />
			</Sequence>
			<Sequence
				from={105 + startClickAnimationAtFrame}
				durationInFrames={Infinity}
			>
				<Audio src={clickSound} startFrom={30} />
			</Sequence>
			<header
				style={{
					background: '#202020',
					padding: '1rem',
					display: 'flex',
					justifyContent: 'space-between',
					alignItems: 'center',
					width: videoWidth,
				}}
			>
				<div
					style={{display: 'flex', alignItems: 'center', gap: '2rem'}}
				>
					<AiOutlineMenu size="3rem" color="#fff" />
					<img src={ytLogo} />
				</div>

				<div style={{display: 'flex', alignItems: 'center', gap: '0'}}>
					<div
						style={{
							height: '3rem',
							width: 700,
							background: '#121212',
							border: '1px solid #323232',
							borderRadius: '3px 0 0 3px',
						}}
					></div>
					<div
						style={{
							height: '3rem',
							width: 130,
							background: '#323232',
							border: '1px solid #323232',
							borderRadius: '0 3px 3px 0',
							display: 'flex',
							justifyContent: 'center',
							alignItems: 'center',
						}}
					>
						<AiOutlineSearch color="#999" size="1.8rem" />
					</div>
					<IoMdMic
						style={{marginLeft: '1rem'}}
						size="2rem"
						color="#fff"
					/>
				</div>

				<div
					style={{display: 'flex', alignItems: 'center', gap: '2rem'}}
				>
					<img
						src={avatar}
						style={{
							width: '2.75rem',
							height: '2.75rem',
							borderRadius: '2rem',
							marginRight: '2rem',
						}}
					/>
				</div>
			</header>
			<div style={{display: 'flex', flexDirection: 'row'}}>
				<main>
					<VideoWrapper
						videoWidth={videoWidth}
						videoHeight={videoHeight}
					>
						{children}
					</VideoWrapper>
					<Footer videoWidth={videoWidth}>
						<h1>[CodeStack News] {title}</h1>
						<div>
							<p>
								<span>
									{Math.round(frame / 3)} Visualizações
								</span>
								<span>
									{format(
										new Date(),
										"dd 'de' MMM. 'de' yyyy",
										{
											locale: ptBR,
										}
									)}
								</span>
							</p>
							<div>
								<section
									style={{
										borderBottom: `3px solid ${
											frame >=
											57 + startClickAnimationAtFrame
												? '#3EA6FF'
												: ''
										}`,
									}}
								>
									<text
										style={{
											color:
												frame >=
												57 + startClickAnimationAtFrame
													? '#3EA6FF'
													: '',
										}}
									>
										<IoMdThumbsUp size="3rem" />
										{Math.round(frame / 10)}
									</text>
									<text>
										<IoMdThumbsDown size="3rem" /> 0
									</text>
								</section>
								<text>
									<IoIosShareAlt size="3rem" />
									Compartilhar
								</text>
								<text>
									<RiPlayListAddLine size="2rem" />
									Salvar
								</text>
								<BsThreeDots size="3rem" />
							</div>
						</div>
						<div style={{margin: '0.5rem 0'}}>
							<div>
								<img
									src={avatar}
									style={{
										width: '4.5rem',
										height: '4.5rem',
										borderRadius: '2.5rem',
										marginRight: '0rem',
									}}
								/>
								<p
									style={{
										display: 'flex',
										flexDirection: 'column',
									}}
								>
									<strong
										style={{
											fontSize: '1.5rem',
											color: '#fff',
										}}
									>
										CodeStack
									</strong>
									<span>
										{Math.round(frame / 15)} inscritos
									</span>
								</p>
							</div>
							<p
								style={{
									background:
										frame >=
										115 + startClickAnimationAtFrame
											? '#303030'
											: '#CC0000',
									color: '#fff',
									fontSize: '1.7rem',
									textTransform: 'uppercase',
									padding: '1rem 2rem',
									margin: 0,
									borderRadius: 5,
								}}
							>
								{frame >= 115 + startClickAnimationAtFrame
									? 'Inscrito'
									: 'Inscreva-se'}
							</p>
						</div>
						<div
							style={{
								position: 'absolute',
								bottom: moveY, //-50 -> 95 -> 10 -> -50
								right: moveX, //370 -> 670 -> 50 -> 150
							}}
						>
							<svg
								width="3rem"
								height="3rem"
								viewBox="0 0 23 25"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<g clipPath="url(#prefix__clip0)">
									<path
										d="M22.326 11.773v4.5c0 .145-.018.29-.053.43l-1.571 6.375c-.209.847-1 1.445-1.912 1.445H8.576c-.31 0-.616-.07-.892-.204a1.944 1.944 0 01-.697-.568l-6.285-8.25c-.639-.837-.445-2.01.433-2.619.877-.609 2.106-.424 2.744.414l1.554 2.04V2.398c0-1.035.88-1.875 1.964-1.875 1.085 0 1.964.84 1.964 1.875v9.375h.393V9.898c0-1.035.88-1.875 1.965-1.875 1.084 0 1.964.84 1.964 1.875v1.875h.393v-1.125c0-1.035.88-1.875 1.964-1.875 1.085 0 1.964.84 1.964 1.875v1.125h.393c0-1.035.88-1.875 1.964-1.875 1.085 0 1.965.84 1.965 1.875zm-12.572 3.75h-.393v4.5h.393v-4.5zm4.322 0h-.393v4.5h.393v-4.5zm4.321 0h-.393v4.5h.393v-4.5z"
										fill={colorsClick}
									/>
								</g>
							</svg>
						</div>
					</Footer>
				</main>
				<Aside>
					{new Array(7).fill(0).map((_, i) => {
						return (
							<div key={i}>
								<main></main>
								<p>
									<strong></strong>
									<span></span>
								</p>
							</div>
						);
					})}
				</Aside>
			</div>
		</div>
	);
}