react-icons/ai#AiOutlineMenu TypeScript Examples
The following examples show how to use
react-icons/ai#AiOutlineMenu.
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: AppNavbar.tsx From po8klasie with GNU General Public License v3.0 | 5 votes |
|
AppNavbar: FC<AppNavbarProps> = ({ projectName, wide }) => {
const router = useRouter();
const { projectID } = useProjectConfig();
const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
const toggleMenu = () => setIsMenuCollapsed(!isMenuCollapsed);
const links: [string, string][] = [
['Strona główna', '/'],
];
if (isFeatureFlagEnabled(publicRuntimeConfig.SHOW_LINKS_TO_APP))
links.push(['Szkoły', `/${projectID}/search`]);
links.concat([
['Kalkulator punktów', '/calculator'],
])
const getLinkClassName = (href: string) => {
return router.pathname === href ? 'font-bold' : '';
};
return (
<div className="fixed top-0 left-0 w-full z-99999 bg-white border-b border-lighten font-primary h-navbarHeight flex items-center">
<div
className={`${
wide ? 'w-wideContainer' : 'w-container'
} mx-auto lg:flex justify-between items-center py-3`}
>
<div className="relative flex items-center justify-between">
<Link href="/">
<a className="flex items-center">
<Brand projectName={projectName} className="font-bold text-xl" />
<span className="ml-2 rounded-full bg-primaryBg text-primary uppercase px-2 py-1 text-xs font-bold">
Beta
</span>
</a>
</Link>
<button className="text-xl lg:hidden" onClick={toggleMenu} type="button">
{isMenuCollapsed ? <AiOutlineClose /> : <AiOutlineMenu />}
</button>
</div>
<div
className={`lg:flex items-center absolute z-10 top-navbarHeight bg-white w-container lg:w-auto pb-3 lg:pb-0 lg:static ${
!isMenuCollapsed && 'hidden'
}`}
>
<ul className="lg:flex lg:mr-8">
{links.map(([text, href]) => (
<li key={href} className="lg:mx-4 my-4 lg:my-0">
<Link href={href}>
<a className={getLinkClassName(href)}>{text}</a>
</Link>
</li>
))}
</ul>
<Link href="/#support-us">
<a
className={[
'font-bold cursor-pointer inline-block w-full sm:w-auto text-center',
roundedSmallLinkClassName,
'',
].join(' ')}
>
Wesprzyj projekt
</a>
</Link>
</div>
</div>
</div>
);
}
Example #2
| Source File: youtubeWrapper.tsx From podcast-maker with MIT License | 4 votes |
|
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>
);
}
