70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import { AppStoreLogo, ForkKnife, X as CloseIcon } from '@phosphor-icons/react';
|
|
import { UT_DINING_APP_STORE_URL } from '@shared/util/appUrls';
|
|
import { Button } from '@views/components/common/Button';
|
|
import Text from '@views/components/common/Text/Text';
|
|
import React from 'react';
|
|
|
|
interface DiningAppPromoProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
/**
|
|
* Promotional component for the UT Dining app
|
|
*/
|
|
export default function DiningAppPromo({ onClose }: DiningAppPromoProps) {
|
|
return (
|
|
<div className='relative min-w-[16.25rem] w-full flex items-center gap-spacing-3 border border-ut-offwhite/50 rounded p-spacing-4'>
|
|
<div className='flex items-center justify-center'>
|
|
<ForkKnife className='h-6 w-6 text-ut-black' />
|
|
</div>
|
|
<div className='flex flex-col gap-spacing-1'>
|
|
<Text as='p' variant='small' className='whitespace-normal text-ut-black'>
|
|
Download our new{' '}
|
|
<a
|
|
href={UT_DINING_APP_STORE_URL}
|
|
target='_blank'
|
|
rel='noreferrer'
|
|
aria-label='UT Dining app'
|
|
className='text-ut-burntorange underline'
|
|
>
|
|
UT Dining app
|
|
</a>{' '}
|
|
to explore all dining options on campus!
|
|
</Text>
|
|
<div className='mt-spacing-2 flex items-center gap-spacing-2'>
|
|
<Text variant='mini' className='text-ut-black'>
|
|
Available on
|
|
</Text>
|
|
<a
|
|
href={UT_DINING_APP_STORE_URL}
|
|
target='_blank'
|
|
rel='noreferrer'
|
|
aria-label='Download on App Store'
|
|
className='text-theme-black transition-colors hover:text-ut-burntorange'
|
|
>
|
|
<AppStoreLogo className='h-4.5 w-4.5' />
|
|
</a>
|
|
{/* <a
|
|
href={UT_DINING_GOOGLE_PLAY_URL}
|
|
target='_blank'
|
|
rel='noreferrer'
|
|
aria-label='Download on Google Play'
|
|
className='text-theme-black hover:text-ut-burntorange transition-colors'
|
|
>
|
|
<GooglePlayLogo className='h-4.5 w-4.5' />
|
|
</a> */}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant='minimal'
|
|
color='theme-black'
|
|
onClick={onClose}
|
|
className='absolute right-1 top-1 h-5 w-5 p-0'
|
|
icon={CloseIcon}
|
|
aria-label='Close dining app promo'
|
|
title='Close'
|
|
/>
|
|
</div>
|
|
);
|
|
}
|