1import { css } from '@emotion/react';
2import { ArrowUpRightIcon, breakpoints, theme } from '@expo/styleguide';
3
4import { Button } from '~/ui/components/Button';
5
6type CreateAppButtonProps = { href: string; name: string };
7
8export const CreateAppButton = ({ href, name }: CreateAppButtonProps) => (
9  <Button
10    css={buttonStyle}
11    href={href}
12    openInNewTab
13    iconRight={<ArrowUpRightIcon color={theme.button.primary.icon} />}>
14    Create {name} App
15  </Button>
16);
17
18const buttonStyle = css({
19  display: 'flex',
20  minWidth: 'fit-content',
21
22  [`@media screen and (max-width: ${(breakpoints.medium + breakpoints.large) / 2}px)`]: {
23    minWidth: '100%',
24  },
25});
26