@remotion/promo-pages 4.0.260 → 5.0.0-canary.3

package/src/components/homepage/Demo/PlayerVolume.tsx

@@ -1,83 +0,0 @@
-import type {CallbackListener, PlayerRef} from '@remotion/player';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {PALETTE} from '../layout/colors';
-import {IsMutedIcon, NotMutedIcon} from './icons';
-
-export const PlayerVolume: React.FC<{
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-}> = ({playerRef}) => {
-	const [muted, setIsMuted] = useState(
-		() => playerRef.current?.isMuted() ?? true,
-	);
-
-	const [isHovered, setIsHovered] = useState(false);
-	const timerRef = useRef<Timer | null>(null);
-
-	useEffect(() => {
-		const {current} = playerRef;
-
-		if (!current) {
-			return;
-		}
-
-		const onMutedChange: CallbackListener<'mutechange'> = (e) => {
-			setIsMuted(e.detail.isMuted);
-		};
-
-		current.addEventListener('mutechange', onMutedChange);
-
-		return () => {
-			current.removeEventListener('mutechange', onMutedChange);
-		};
-	}, [playerRef]);
-
-	useEffect(() => {
-		if (isHovered) {
-			document.body.style.userSelect = 'none';
-		} else {
-			document.body.style.userSelect = 'auto';
-		}
-	}, [isHovered]);
-
-	const onClick = useCallback(() => {
-		if (timerRef.current !== null) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-
-		if (playerRef.current!.isMuted()) {
-			playerRef.current!.unmute();
-		} else {
-			playerRef.current!.mute();
-		}
-	}, [playerRef]);
-
-	return (
-		<div
-			className={'relative cursor-pointer block pl-4 pr-4 h-full'}
-			onMouseEnter={() => setIsHovered(true)}
-		>
-			<button
-				type="button"
-				onClick={onClick}
-				style={{
-					background: 'transparent',
-					border: 0,
-					cursor: 'pointer',
-					padding: 0,
-					display: 'flex',
-					height: 50,
-					justifyContent: 'center',
-					alignItems: 'center',
-					color: PALETTE.TEXT_COLOR,
-				}}
-			>
-				{muted ? (
-					<IsMutedIcon style={{height: 20}} />
-				) : (
-					<NotMutedIcon style={{height: 20}} />
-				)}
-			</button>
-		</div>
-	);
-};

package/src/components/homepage/Demo/Progress.tsx

@@ -1,38 +0,0 @@
-import {makeCircle, makePie} from '@remotion/shapes';
-import React from 'react';
-import {PALETTE} from '../layout/colors';
-
-export const Progress: React.FC<{
-	readonly progress: number;
-}> = ({progress}) => {
-	const inner = makeCircle({
-		radius: 10,
-	});
-
-	const outer = makePie({
-		progress,
-		closePath: false,
-		radius: 10,
-	});
-
-	return (
-		<svg
-			viewBox={`0 0 ${inner.width} ${inner.height}`}
-			style={{overflow: 'visible', height: 22}}
-		>
-			<path
-				d={inner.path}
-				stroke={PALETTE.BORDER_COLOR}
-				strokeWidth={4}
-				fill="transparent"
-			/>
-			<path
-				d={outer.path}
-				stroke={PALETTE.BRAND}
-				strokeWidth={4}
-				fill="transparent"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-};

package/src/components/homepage/Demo/Spinner.tsx

@@ -1,60 +0,0 @@
-import React, {useMemo} from 'react';
-import {PALETTE} from '../layout/colors';
-
-const viewBox = 100;
-const lines = 8;
-const className = '__remotion_spinner_line';
-const remotionSpinnerAnimation = '__remotion_spinner_animation';
-
-// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
-const translated =
-	'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
-
-export const Spinner: React.FC<{
-	readonly size: number;
-	readonly duration: number;
-}> = ({size, duration}) => {
-	const style = useMemo(() => {
-		return {
-			width: size,
-			height: size,
-		};
-	}, [size]);
-
-	return (
-		<>
-			<style type="text/css">{`
-				@keyframes ${remotionSpinnerAnimation} {
-          0% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0.15;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
-        }        
-			`}</style>
-			<svg style={style} viewBox={`0 0 ${viewBox} ${viewBox}`}>
-				{new Array(lines).fill(true).map((_, index) => {
-					return (
-						<path
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-							className={className}
-							style={{
-								rotate: `${(index * Math.PI * 2) / lines}rad`,
-								transformOrigin: 'center center',
-								animationDelay: `${index * (duration / lines) - duration}s`,
-							}}
-							d={translated}
-							fill={PALETTE.TEXT_COLOR}
-						/>
-					);
-				})}
-			</svg>
-		</>
-	);
-};

package/src/components/homepage/Demo/Switcher.tsx

@@ -1,54 +0,0 @@
-import React, {useCallback} from 'react';
-
-export const Switcher: React.FC<{
-	readonly type: 'left' | 'right';
-	readonly theme: 'dark' | 'light';
-	readonly onTap: () => void;
-}> = ({type, theme, onTap}) => {
-	const onPointerDown = useCallback(
-		(e: React.PointerEvent<HTMLDivElement>) => {
-			e.stopPropagation();
-			onTap();
-		},
-		[onTap],
-	);
-
-	const switcherSize = 40;
-
-	return (
-		<div
-			onPointerDown={onPointerDown}
-			style={{
-				height: switcherSize,
-				width: switcherSize,
-				borderRadius: switcherSize / 2,
-				position: 'absolute',
-				marginLeft: -switcherSize / 2,
-				top: '50%',
-				left: type === 'left' ? 0 : '100%',
-				marginTop: -switcherSize / 2,
-				backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
-				color: theme === 'dark' ? 'white' : '#222',
-				cursor: 'pointer',
-				justifyContent: 'center',
-				alignItems: 'center',
-				display: 'flex',
-			}}
-		>
-			<svg style={{height: switcherSize / 2}} viewBox="0 0 320 512">
-				{type === 'left' ? (
-					<path
-						fill="currentcolor"
-						d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
-					/>
-				) : null}
-				{type === 'right' ? (
-					<path
-						fill="currentcolor"
-						d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
-					/>
-				) : null}
-			</svg>
-		</div>
-	);
-};

package/src/components/homepage/Demo/Temperature.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import {AbsoluteFill} from 'remotion';
-import {TemperatureNumber} from './TemperatureNumber';
-
-export const Temperature: React.FC<{
-	readonly theme: 'dark' | 'light';
-	readonly city: string | null;
-	readonly temperatureInCelsius: number | null;
-}> = ({theme, city, temperatureInCelsius}) => {
-	if (temperatureInCelsius === null) {
-		return null;
-	}
-
-	return (
-		<AbsoluteFill>
-			<AbsoluteFill
-				style={{
-					alignItems: 'center',
-					justifyContent: 'center',
-					paddingLeft: 20,
-					paddingRight: 20,
-				}}
-			>
-				<div
-					style={{
-						color: '#0b84f3',
-						fontFamily: 'GTPlanar',
-						fontWeight: '500',
-						fontSize: 13,
-						textAlign: 'center',
-						marginTop: 5,
-					}}
-				>
-					Temperature in {city}
-				</div>
-
-				<TemperatureNumber
-					theme={theme}
-					temperatureInCelsius={temperatureInCelsius}
-				/>
-			</AbsoluteFill>
-		</AbsoluteFill>
-	);
-};

package/src/components/homepage/Demo/TemperatureNumber.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import {Wheel} from './DigitWheel';
-
-export const TemperatureNumber: React.FC<{
-	readonly theme: 'dark' | 'light';
-	readonly temperatureInCelsius: number;
-}> = ({theme, temperatureInCelsius}) => {
-	const temperatureInFahrenheit = (temperatureInCelsius * 9) / 5 + 32;
-
-	const celsiusDegree = Math.abs(temperatureInCelsius);
-	const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
-
-	const paddedCelsiusDegree = String(celsiusDegree)
-		.padStart(fahrenheitDegree.toFixed(0).length, '0')
-		.split('');
-	const paddedFahrenheitDegree = fahrenheitDegree
-		.toFixed(0)
-		.padStart(paddedCelsiusDegree.length, '0')
-		.split('');
-
-	return (
-		<div
-			style={{
-				lineHeight: 1.1,
-				fontFamily: 'GTPlanar',
-				textAlign: 'center',
-				fontWeight: 'bold',
-				fontSize: 60,
-				color: theme === 'dark' ? 'white' : 'black',
-				fontVariantNumeric: 'tabular-nums',
-				display: 'flex',
-				flexDirection: 'row',
-				alignItems: 'center',
-			}}
-		>
-			{paddedCelsiusDegree.map((digit, i) => (
-				<Wheel
-					// eslint-disable-next-line react/no-array-index-key
-					key={i}
-					delay={i * 4}
-					renderDigit={(_i) => 9 - _i}
-					digits={[
-						Number(paddedFahrenheitDegree[i]),
-						Number(digit),
-						Number(paddedFahrenheitDegree[i]),
-					]}
-					isNegative={[
-						temperatureInFahrenheit < 0,
-						temperatureInCelsius < 0,
-						temperatureInFahrenheit < 0,
-					]}
-					isLeadingDigit={i === 0}
-				/>
-			))}
-			<div style={{width: 8}} />
-			°
-			<Wheel
-				delay={paddedCelsiusDegree.length * 4 - 2}
-				digits={[0, 1, 0]}
-				renderDigit={(_i) =>
-					_i % 2 === 0 ? 'C' : <span style={{marginLeft: -5}}>F</span>
-				}
-				isLeadingDigit={false}
-				isNegative={[false, false, false]}
-			/>
-		</div>
-	);
-};

package/src/components/homepage/Demo/ThemeNudge.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import {FONTS} from '../layout/colors';
-import {useColorMode} from '../layout/use-color-mode';
-
-const origWidth = 21;
-const scale = 0.4;
-
-export const Icon: React.FC = () => {
-	return (
-		<svg
-			style={{
-				width: origWidth * scale,
-			}}
-			viewBox="0 0 21 161"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M5 5C23 59.5 14.5 120.5 5.00005 156"
-				stroke="currentColor"
-				strokeWidth="8"
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-};
-
-export const ThemeNudge: React.FC = () => {
-	const {colorMode, setColorMode} = useColorMode();
-
-	const toggleTheme: React.MouseEventHandler = React.useCallback(
-		(e) => {
-			e.preventDefault();
-			setColorMode(colorMode === 'dark' ? 'light' : 'dark');
-		},
-		[colorMode, setColorMode],
-	);
-
-	return (
-		<div
-			style={{
-				flexDirection: 'row',
-				display: 'flex',
-				justifyContent: 'flex-start',
-				paddingBottom: 5,
-				textAlign: 'right',
-				position: 'absolute',
-				right: 0,
-			}}
-		>
-			<div>
-				<div
-					style={{
-						fontFamily: FONTS.GTPLANAR,
-						fontSize: 15,
-						width: 280,
-						paddingBottom: 8,
-						marginLeft: -15,
-						textWrap: 'balance',
-						marginTop: 5,
-					}}
-				>
-					<a href="#" onClick={toggleTheme} className="bluelink">
-						Switch to {colorMode === 'dark' ? 'light' : 'dark'} mode
-					</a>{' '}
-					and see the video adjust!{' '}
-				</div>
-				<Icon />
-			</div>
-		</div>
-	);
-};

package/src/components/homepage/Demo/TimeDisplay.tsx

@@ -1,43 +0,0 @@
-import type {PlayerRef} from '@remotion/player';
-import React, {useEffect} from 'react';
-
-const formatTime = (timeInSeconds: number) => {
-	const minutes = Math.floor(timeInSeconds / 60);
-	const seconds = Math.floor(timeInSeconds - minutes * 60);
-	return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
-};
-
-export const TimeDisplay: React.FC<{
-	readonly fps: number;
-	readonly playerRef: React.RefObject<PlayerRef | null>;
-}> = ({fps, playerRef}) => {
-	const [time, setTime] = React.useState(0);
-
-	useEffect(() => {
-		const {current} = playerRef;
-		if (!current) {
-			return;
-		}
-
-		const onTimeUpdate = () => {
-			setTime(current.getCurrentFrame());
-		};
-
-		current.addEventListener('frameupdate', onTimeUpdate);
-
-		return () => {
-			current.removeEventListener('frameupdate', onTimeUpdate);
-		};
-	}, [playerRef]);
-
-	return (
-		<div
-			style={{
-				fontSize: 16,
-				fontVariantNumeric: 'tabular-nums',
-			}}
-		>
-			<span>{formatTime(time / fps)}</span>
-		</div>
-	);
-};

package/src/components/homepage/Demo/TrendingRepos.tsx

@@ -1,106 +0,0 @@
-import React, {useMemo} from 'react';
-import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-import type {RemoteData} from './Comp';
-
-const TrendingRepoItem: React.FC<{
-	readonly repo: string;
-	readonly theme: 'dark' | 'light';
-	readonly number: number;
-}> = ({repo, theme, number}) => {
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const progress = spring({
-		fps,
-		frame,
-		config: {
-			damping: 200,
-		},
-		delay: number * 10 + 20,
-	});
-
-	const item: React.CSSProperties = useMemo(() => {
-		return {
-			lineHeight: 1.1,
-			fontFamily: 'GTPlanar',
-			fontWeight: '500',
-			color: theme === 'dark' ? 'white' : 'black',
-			fontFeatureSettings: "'ss03' 1",
-			opacity: progress,
-		};
-	}, [progress, theme]);
-
-	return (
-		<div style={item}>
-			{number}. {repo}
-		</div>
-	);
-};
-
-export const TrendingRepos: React.FC<{
-	readonly theme: 'dark' | 'light';
-	readonly trending: RemoteData | null;
-}> = ({theme, trending}) => {
-	const fill = theme === 'light' ? '#666' : '#999';
-	const frame = useCurrentFrame();
-	const {fps} = useVideoConfig();
-
-	const progress1 = spring({
-		fps,
-		frame,
-		config: {
-			damping: 200,
-		},
-		delay: 0,
-	});
-
-	if (trending === null) {
-		return null;
-	}
-
-	return (
-		<AbsoluteFill>
-			<AbsoluteFill
-				style={{
-					justifyContent: 'center',
-					paddingLeft: 20,
-					paddingRight: 20,
-				}}
-			>
-				<div>
-					<div
-						style={{
-							color: fill,
-							fontFamily: 'GTPlanar',
-							fontWeight: '500',
-							fontSize: 12,
-							opacity: progress1,
-						}}
-					>
-						{new Intl.DateTimeFormat('en-US', {
-							weekday: 'long',
-							month: 'long',
-							day: 'numeric',
-						}).format(new Date(trending.date))}
-					</div>
-					<div
-						style={{
-							color: '#0b84f3',
-							fontFamily: 'GTPlanar',
-							fontWeight: '500',
-							fontSize: 16,
-							marginBottom: 15,
-							opacity: progress1,
-							lineHeight: 1,
-						}}
-					>
-						Trending repositories
-					</div>
-					<TrendingRepoItem number={1} repo={trending.repos[0]} theme={theme} />
-					<TrendingRepoItem number={2} repo={trending.repos[1]} theme={theme} />
-					<TrendingRepoItem number={3} repo={trending.repos[2]} theme={theme} />
-				</div>
-			</AbsoluteFill>
-		</AbsoluteFill>
-	);
-};

package/src/components/homepage/Demo/icons.tsx

@@ -1,114 +0,0 @@
-import type {SVGProps} from 'react';
-import React from 'react';
-import {RED} from '../layout/colors';
-
-export const IconLeft: React.FC<SVGProps<SVGSVGElement>> = (props) => (
-	<svg viewBox="0 0 320 512" {...props}>
-		<path
-			fill="currentColor"
-			d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
-		/>
-	</svg>
-);
-export const IconRight: React.FC<SVGProps<SVGSVGElement>> = (props) => (
-	<svg viewBox="0 0 320 512" {...props}>
-		<path
-			fill="currentColor"
-			d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
-		/>
-	</svg>
-);
-
-export const CancelIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			aria-hidden="true"
-			focusable="false"
-			data-prefix="fas"
-			data-icon="times"
-			className="svg-inline--fa fa-times fa-w-11"
-			role="img"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 352 512"
-			{...props}
-		>
-			<path
-				fill="currentColor"
-				d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-			/>
-		</svg>
-	);
-};
-
-export const PausedIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			aria-hidden="true"
-			focusable="false"
-			data-prefix="fas"
-			data-icon="play"
-			className="svg-inline--fa fa-play fa-w-14"
-			role="img"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 448 512"
-			{...props}
-		>
-			<path
-				fill="currentColor"
-				d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
-			/>
-		</svg>
-	);
-};
-
-export const PlayingIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 320 512"
-			fill="currentColor"
-			{...props}
-		>
-			<path d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z" />
-		</svg>
-	);
-};
-
-export const FullscreenIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 448 512"
-			fill="currentColor"
-			{...props}
-		>
-			<path d="M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z" />
-		</svg>
-	);
-};
-
-export const NotMutedIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-			viewBox="0 0 640 512"
-			fill="currentColor"
-		>
-			<path d="M32 160l0 192 128 0L304 480l48 0 0-448-48 0L160 160 32 160zM441.6 332.8C464.9 315.3 480 287.4 480 256s-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l28.8 38.4zm57.6 76.8c46.6-35 76.8-90.8 76.8-153.6s-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2s-22.6 88.9-57.6 115.2l28.8 38.4z" />
-		</svg>
-	);
-};
-
-export const IsMutedIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-			viewBox="0 0 640 512"
-			fill={RED}
-		>
-			<path d="M48.4 14.8L29.4 .1 0 38l19 14.7L591.5 497.2l19 14.7L639.9 474l-19-14.7-95.1-73.8C557 351.3 576 305.9 576 256c0-62.8-30.2-118.6-76.8-153.6l-28.8 38.4c35 26.3 57.6 68.1 57.6 115.2c0 38.8-15.3 74-40.3 99.9l-38.2-29.7C468.3 308.7 480 283.7 480 256c0-31.4-15.1-59.3-38.4-76.8l-28.8 38.4c11.7 8.8 19.2 22.7 19.2 38.4s-7.5 29.6-19.2 38.4l5.9 7.9L352 250.5 352 32l-48 0L195.2 128.7 48.4 14.8zM352 373.3L81.2 160 32 160l0 192 128 0L304 480l48 0 0-106.7z" />
-		</svg>
-	);
-};