@universal-tennis/ui-shared 0.1.92 → 0.1.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/stories/organisms/Footer/Footer.d.ts +1 -1
  2. package/dist/stories/organisms/Footer/Footer.js +78 -38
  3. package/dist/stories/organisms/Footer/Footer.js.map +1 -1
  4. package/dist/stories/organisms/Footer/sharedTypes.d.ts +2 -0
  5. package/package.json +1 -1
  6. package/public/app-store-badge.png +0 -0
  7. package/public/google-play-icon.png +0 -0
  8. package/src/stories/organisms/Footer/Footer.tsx +117 -70
  9. package/src/stories/organisms/Footer/sharedTypes.ts +3 -0
package/dist/stories/organisms/Footer/Footer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { FooterProps } from './sharedTypes';
3
- declare function Footer({ exploreItems, eventItems, providerItems, moreItems, supportItems, onSocialMediaClick, }: FooterProps): JSX.Element;
3
+ declare function Footer({ exploreItems, providerItems, moreItems, supportItems, onSocialMediaClick, sx }: FooterProps): JSX.Element;
4
4
  export default Footer;
package/dist/stories/organisms/Footer/Footer.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
+ import { styled } from "@mui/material/styles";
2
3
  import Box from '@mui/material/Box';
3
- import Grid from '@mui/material/Grid';
4
4
  import IconButton from '@mui/material/IconButton';
5
- import useMediaQuery from '@mui/material/useMediaQuery';
5
+ import Link from '@mui/material/Link';
6
6
  import { SocialMediaIds } from '../../utils/constants';
7
7
  import FooterSection from '../../molecules/FooterSection/FooterSection';
8
8
  import SocialMediaInstagramIcon from '../../atoms/Icons/SocialMediaInstagramIcon';
@@ -12,49 +12,89 @@ import SocialMediaYoutubeIcon from '../../atoms/Icons/SocialMediaYoutubeIcon';
12
12
  import SocialMediaFacebookIcon from '../../atoms/Icons/SocialMediaFacebookIcon';
13
13
  import Typography from '../../atoms/Typography/Typography';
14
14
  import utrLogo from '../../assets/utr-sports-logo.svg';
15
- function Footer({ exploreItems, eventItems, providerItems, moreItems, supportItems, onSocialMediaClick, }) {
16
- const matches = useMediaQuery('(min-width:600px)');
15
+ import googlePlayLogo from '../../../../public/google-play-icon.png';
16
+ import appStoreBadge from '../../../../public/app-store-badge.png';
17
+ function Footer({ exploreItems, providerItems, moreItems, supportItems, onSocialMediaClick, sx }) {
17
18
  const { X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE } = SocialMediaIds;
19
+ const googlePlayLink = "https://play.google.com/store/apps/details?id=com.ut.utr";
20
+ const appStoreLink = "https://apps.apple.com/us/app/utr-sports/id1519232627";
18
21
  const handleOnSocialMediaClick = (id) => {
19
22
  onSocialMediaClick(id);
20
23
  };
21
- return (React.createElement(Box, { sx: { backgroundColor: 'var(--black)' } },
22
- React.createElement(Grid, { p: 1.5, container: true, justifyContent: "space-evenly", display: matches ? 'row' : 'column' },
23
- React.createElement(Grid, { item: true, xs: 12, lg: 2 },
24
- React.createElement(Box, { mb: 2, display: "flex", alignItems: "center", flexDirection: "column" },
25
- React.createElement("img", { alt: "UTR Sports logo", width: "205", height: "51", src: utrLogo }),
26
- React.createElement(Box, { display: "flex", mt: 1 },
27
- React.createElement(IconButton, { sx: { p: 0.5 }, onClick: () => handleOnSocialMediaClick(X) },
28
- React.createElement(SocialMediaXIcon, { size: 27, color: "var(--white)" })),
29
- React.createElement(IconButton, { sx: { p: 0.5 }, onClick: () => handleOnSocialMediaClick(FACEBOOK) },
30
- React.createElement(SocialMediaFacebookIcon, { size: 27, color: "var(--white)" })),
31
- React.createElement(IconButton, { sx: { p: 0.5 }, onClick: () => handleOnSocialMediaClick(INSTAGRAM) },
32
- React.createElement(SocialMediaInstagramIcon, { size: 27, color: "var(--white)" })),
33
- React.createElement(IconButton, { sx: { p: 0.5 }, onClick: () => handleOnSocialMediaClick(TIKTOK) },
34
- React.createElement(SocialMediaTikTokIcon, { size: 27, color: "var(--white)" })),
35
- React.createElement(IconButton, { sx: { p: 0.5 }, onClick: () => handleOnSocialMediaClick(YOUTUBE) },
36
- React.createElement(SocialMediaYoutubeIcon, { size: 27, color: "var(--white)" }))))),
37
- matches ? (React.createElement(Grid, { container: true, item: true, lg: 10, justifyContent: "space-evenly" },
38
- React.createElement(Grid, { item: true },
24
+ const StyledNavigationContainer = styled(Box)(({ theme }) => ({
25
+ display: 'flex',
26
+ flexWrap: 'wrap',
27
+ [theme.breakpoints.up('md')]: {
28
+ flexWrap: 'no-wrap',
29
+ }
30
+ }));
31
+ const StyledContentContainer = styled(Box)(({ theme }) => ({
32
+ display: "flex",
33
+ flexDirection: "column",
34
+ justifyContent: "space-between",
35
+ padding: "32px",
36
+ [theme.breakpoints.up('md')]: {
37
+ flexDirection: "row",
38
+ padding: "32px 64px",
39
+ }
40
+ }));
41
+ const StyledNavigation = styled(Box)(({ theme }) => ({
42
+ flex: "50%",
43
+ marginBottom: "32px",
44
+ [theme.breakpoints.up('lg')]: {
45
+ flex: "auto",
46
+ marginRight: "75px",
47
+ marginBottom: 0,
48
+ '&:last-child': {
49
+ marginRight: 0,
50
+ },
51
+ }
52
+ }));
53
+ const StyledLogoContainer = styled(Box)(({ theme }) => ({
54
+ display: "flex",
55
+ flexDirection: "column",
56
+ margin: "0 auto",
57
+ [theme.breakpoints.up('lg')]: {
58
+ margin: 0
59
+ }
60
+ }));
61
+ const StyledBorder = styled(Box)(({ theme }) => ({
62
+ borderBottom: ".5px solid var(--darkest-grey)",
63
+ margin: "32px 0px",
64
+ [theme.breakpoints.up('md')]: {
65
+ display: "none"
66
+ }
67
+ }));
68
+ return (React.createElement(Box, { sx: Object.assign({ backgroundColor: 'var(--black)' }, sx) },
69
+ React.createElement(StyledContentContainer, null,
70
+ React.createElement(StyledLogoContainer, null,
71
+ React.createElement("img", { alt: "UTR Sports logo", width: "205", height: "51", src: utrLogo }),
72
+ React.createElement(Box, { display: "flex", my: 2, justifyContent: "space-between", width: "100%" },
73
+ React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(X) },
74
+ React.createElement(SocialMediaXIcon, { size: 27, color: "var(--white)" })),
75
+ React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(FACEBOOK) },
76
+ React.createElement(SocialMediaFacebookIcon, { size: 27, color: "var(--white)" })),
77
+ React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(INSTAGRAM) },
78
+ React.createElement(SocialMediaInstagramIcon, { size: 27, color: "var(--white)" })),
79
+ React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(TIKTOK) },
80
+ React.createElement(SocialMediaTikTokIcon, { size: 27, color: "var(--white)" })),
81
+ React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(YOUTUBE) },
82
+ React.createElement(SocialMediaYoutubeIcon, { size: 27, color: "var(--white)" }))),
83
+ React.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%" },
84
+ React.createElement(Link, { href: googlePlayLink, target: "_blank", rel: "noopener" },
85
+ React.createElement("img", { alt: "Google play logo", width: "96", height: "28", src: googlePlayLogo })),
86
+ React.createElement(Link, { href: appStoreLink, target: "_blank", rel: "noopener" },
87
+ React.createElement("img", { alt: "App store badge", width: "84", height: "28", src: appStoreBadge })))),
88
+ React.createElement(StyledBorder, null),
89
+ React.createElement(StyledNavigationContainer, null,
90
+ React.createElement(StyledNavigation, null,
39
91
  React.createElement(FooterSection, { title: "Explore", items: exploreItems })),
40
- React.createElement(Grid, { item: true },
41
- React.createElement(FooterSection, { title: "Events", items: eventItems })),
42
- React.createElement(Grid, { item: true },
92
+ React.createElement(StyledNavigation, null,
43
93
  React.createElement(FooterSection, { title: "Providers", items: providerItems })),
44
- React.createElement(Grid, { item: true },
94
+ React.createElement(StyledNavigation, null,
45
95
  React.createElement(FooterSection, { title: "More", items: moreItems })),
46
- React.createElement(Grid, { item: true },
47
- React.createElement(FooterSection, { title: "Support", items: supportItems })))) : (React.createElement(Grid, { container: true, display: "column", justifyContent: "space-evenly" },
48
- React.createElement(Grid, { item: true },
49
- React.createElement(Box, { mb: 2 },
50
- React.createElement(FooterSection, { title: "Explore", items: exploreItems })),
51
- React.createElement(Box, { mb: 3.3 },
52
- React.createElement(FooterSection, { title: "Providers", items: providerItems })),
53
- React.createElement(FooterSection, { title: "Support", items: supportItems })),
54
- React.createElement(Grid, { item: true },
55
- React.createElement(Box, { mb: 2 },
56
- React.createElement(FooterSection, { title: "Events", items: eventItems })),
57
- React.createElement(FooterSection, { title: "More", items: moreItems }))))),
96
+ React.createElement(StyledNavigation, null,
97
+ React.createElement(FooterSection, { title: "Support", items: supportItems })))),
58
98
  React.createElement(Box, { display: "absolute", sx: { bottom: 24, borderTop: 1, borderColor: "var(--white)" } },
59
99
  React.createElement(Typography, { p: 0.5, category: "secondary", size: "x-small-book-cap", color: "var(--white)", align: "center" }, `\u00A9 2024, UTR SPORTS`))));
60
100
  }
package/dist/stories/organisms/Footer/Footer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,aAAa,MAAM,6BAA6B,CAAC;AAGxD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,wBAAwB,MAAM,4CAA4C,CAAC;AAClF,OAAO,qBAAqB,MAAM,yCAAyC,CAAC;AAC5E,OAAO,gBAAgB,MAAM,oCAAoC,CAAC;AAClE,OAAO,sBAAsB,MAAM,0CAA0C,CAAC;AAC9E,OAAO,uBAAuB,MAAM,2CAA2C,CAAC;AAChF,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,OAAO,MAAM,kCAAkC,CAAC;AAEvD,SAAS,MAAM,CAAC,EACd,YAAY,EACZ,UAAU,EACV,aAAa,EACb,SAAS,EACT,YAAY,EACZ,kBAAkB,GACN;IACZ,MAAM,OAAO,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACnD,MAAM,EACJ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EACxC,GAAG,cAAc,CAAC;IAEnB,MAAM,wBAAwB,GAAG,CAAC,EAAU,EAAE,EAAE;QAC9C,kBAAkB,CAAC,EAAE,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE;QACxC,oBAAC,IAAI,IAAC,CAAC,EAAE,GAAG,EAAE,SAAS,QAAC,cAAc,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;YACrF,oBAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBACpB,oBAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ;oBACjE,6BACI,GAAG,EAAC,iBAAiB,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,GAAG,EAAE,OAAO,GACd;oBACF,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC;wBACrB,oBAAC,UAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;4BAClE,oBAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,cAAc,GAAG,CAC1C;wBACb,oBAAC,UAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,QAAQ,CAAC;4BACzE,oBAAC,uBAAuB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,cAAc,GAAG,CACjD;wBACb,oBAAC,UAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,SAAS,CAAC;4BAC1E,oBAAC,wBAAwB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,cAAc,GAAG,CAClD;wBACb,oBAAC,UAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,MAAM,CAAC;4BACvE,oBAAC,qBAAqB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,cAAc,GAAG,CAC/C;wBACb,oBAAC,UAAU,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,OAAO,CAAC;4BACxE,oBAAC,sBAAsB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,cAAc,GAAG,CAChD,CACX,CACJ,CACH;YACN,OAAO,CAAC,CAAC,CAAC,CACP,oBAAC,IAAI,IAAC,SAAS,QAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAC,cAAc;gBACtD,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,YAAY,GAAI,CACnD;gBACP,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,UAAU,GAAI,CAChD;gBACP,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,aAAa,GAAI,CACtD;gBACP,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,GAAI,CAC7C;gBACP,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,YAAY,GAAI,CACnD,CACJ,CACV,CAAC,CAAC,CAAC,CACA,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAC,QAAQ,EAAC,cAAc,EAAC,cAAc;gBAC1D,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,GAAG,IAAC,EAAE,EAAE,CAAC;wBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,YAAY,GAAI,CACpD;oBACN,oBAAC,GAAG,IAAC,EAAE,EAAE,GAAG;wBACR,oBAAC,aAAa,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,aAAa,GAAI,CACvD;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,YAAY,GAAI,CACnD;gBACP,oBAAC,IAAI,IAAC,IAAI;oBACN,oBAAC,GAAG,IAAC,EAAE,EAAE,CAAC;wBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,UAAU,GAAI,CACjD;oBACN,oBAAC,aAAa,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,GAAI,CAC7C,CACJ,CACV,CACE;QACP,oBAAC,GAAG,IAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE;YACjF,oBAAC,UAAU,IACP,CAAC,EAAE,GAAG,EACN,QAAQ,EAAC,WAAW,EACpB,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,QAAQ,IAEb,yBAAyB,CACjB,CACX,CACJ,CACT,CAAC;AACJ,CAAC;AACD,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Footer/Footer.tsx"],"names":[],"mappings":"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"}
package/dist/stories/organisms/Footer/sharedTypes.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { SxProps, Theme } from '@mui/system';
1
2
  export interface LinkItem {
2
3
  href: string;
3
4
  label: string;
@@ -11,4 +12,5 @@ export type FooterProps = {
11
12
  moreItems: [LinkItem];
12
13
  supportItems: [LinkItem];
13
14
  onSocialMediaClick(id: number): VoidFunction;
15
+ sx?: SxProps<Theme>;
14
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-tennis/ui-shared",
3
- "version": "0.1.92",
3
+ "version": "0.1.93",
4
4
  "main": "dist/items.js",
5
5
  "license": "MIT",
6
6
  "homepage": "https://universaltennis.com",
package/public/app-store-badge.png ADDED
Binary file
package/public/google-play-icon.png ADDED
Binary file
package/src/stories/organisms/Footer/Footer.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
+ import { styled } from "@mui/material/styles";
2
3
 
3
4
  import Box from '@mui/material/Box';
4
- import Grid from '@mui/material/Grid';
5
5
  import IconButton from '@mui/material/IconButton';
6
- import useMediaQuery from '@mui/material/useMediaQuery';
6
+ import Link from '@mui/material/Link';
7
7
 
8
8
  import { FooterProps } from './sharedTypes';
9
9
  import { SocialMediaIds } from '../../utils/constants';
@@ -15,92 +15,139 @@ import SocialMediaYoutubeIcon from '../../atoms/Icons/SocialMediaYoutubeIcon';
15
15
  import SocialMediaFacebookIcon from '../../atoms/Icons/SocialMediaFacebookIcon';
16
16
  import Typography from '../../atoms/Typography/Typography';
17
17
  import utrLogo from '../../assets/utr-sports-logo.svg';
18
+ import googlePlayLogo from '../../../../public/google-play-icon.png';
19
+ import appStoreBadge from '../../../../public/app-store-badge.png';
18
20
 
19
21
  function Footer({
20
22
  exploreItems,
21
- eventItems,
22
23
  providerItems,
23
24
  moreItems,
24
25
  supportItems,
25
26
  onSocialMediaClick,
27
+ sx
26
28
  }: FooterProps) {
27
- const matches = useMediaQuery('(min-width:600px)');
28
29
  const {
29
30
  X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE
30
31
  } = SocialMediaIds;
31
32
 
33
+ const googlePlayLink = "https://play.google.com/store/apps/details?id=com.ut.utr";
34
+ const appStoreLink = "https://apps.apple.com/us/app/utr-sports/id1519232627";
35
+
32
36
  const handleOnSocialMediaClick = (id: number) => {
33
37
  onSocialMediaClick(id);
34
38
  };
35
39
 
40
+ const StyledNavigationContainer = styled(Box)(({ theme }) => ({
41
+ display: 'flex',
42
+ flexWrap: 'wrap',
43
+ [theme.breakpoints.up('md')]: {
44
+ flexWrap: 'no-wrap',
45
+ }
46
+ }));
47
+
48
+ const StyledContentContainer = styled(Box)(({ theme }) => ({
49
+ display: "flex",
50
+ flexDirection: "column",
51
+ justifyContent: "space-between",
52
+ padding: "32px",
53
+ [theme.breakpoints.up('md')]: {
54
+ flexDirection: "row",
55
+ padding: "32px 64px",
56
+ }
57
+ }));
58
+
59
+ const StyledNavigation = styled(Box)(({ theme }) => ({
60
+ flex: "50%",
61
+ marginBottom: "32px",
62
+ [theme.breakpoints.up('lg')]: {
63
+ flex: "auto",
64
+ marginRight: "75px",
65
+ marginBottom: 0,
66
+ '&:last-child': {
67
+ marginRight: 0,
68
+ },
69
+ }
70
+ }));
71
+
72
+ const StyledLogoContainer = styled(Box)(({ theme }) => ({
73
+ display: "flex",
74
+ flexDirection: "column",
75
+ margin: "0 auto",
76
+ [theme.breakpoints.up('lg')]: {
77
+ margin: 0
78
+ }
79
+ }));
80
+
81
+ const StyledBorder = styled(Box)(({ theme }) => ({
82
+ borderBottom: ".5px solid var(--darkest-grey)",
83
+ margin: "32px 0px",
84
+ [theme.breakpoints.up('md')]: {
85
+ display: "none"
86
+ }
87
+ }));
88
+
36
89
  return (
37
- <Box sx={{ backgroundColor: 'var(--black)' }}>
38
- <Grid p={1.5} container justifyContent="space-evenly" display={matches ? 'row' : 'column'}>
39
- <Grid item xs={12} lg={2}>
40
- <Box mb={2} display="flex" alignItems="center" flexDirection="column">
41
- <img
42
- alt="UTR Sports logo"
43
- width="205"
44
- height="51"
45
- src={utrLogo}
46
- />
47
- <Box display="flex" mt={1}>
48
- <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(X)}>
49
- <SocialMediaXIcon size={27} color="var(--white)" />
50
- </IconButton>
51
- <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(FACEBOOK)}>
52
- <SocialMediaFacebookIcon size={27} color="var(--white)" />
53
- </IconButton>
54
- <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(INSTAGRAM)}>
55
- <SocialMediaInstagramIcon size={27} color="var(--white)" />
56
- </IconButton>
57
- <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(TIKTOK)}>
58
- <SocialMediaTikTokIcon size={27} color="var(--white)" />
59
- </IconButton>
60
- <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(YOUTUBE)}>
61
- <SocialMediaYoutubeIcon size={27} color="var(--white)" />
62
- </IconButton>
63
- </Box>
90
+ <Box sx={{ backgroundColor: 'var(--black)', ...sx }}>
91
+ <StyledContentContainer>
92
+ <StyledLogoContainer>
93
+ <img
94
+ alt="UTR Sports logo"
95
+ width="205"
96
+ height="51"
97
+ src={utrLogo}
98
+ />
99
+ <Box display="flex" my={2} justifyContent="space-between" width="100%">
100
+ <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(X)}>
101
+ <SocialMediaXIcon size={27} color="var(--white)" />
102
+ </IconButton>
103
+ <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(FACEBOOK)}>
104
+ <SocialMediaFacebookIcon size={27} color="var(--white)" />
105
+ </IconButton>
106
+ <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(INSTAGRAM)}>
107
+ <SocialMediaInstagramIcon size={27} color="var(--white)" />
108
+ </IconButton>
109
+ <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(TIKTOK)}>
110
+ <SocialMediaTikTokIcon size={27} color="var(--white)" />
111
+ </IconButton>
112
+ <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(YOUTUBE)}>
113
+ <SocialMediaYoutubeIcon size={27} color="var(--white)" />
114
+ </IconButton>
64
115
  </Box>
65
- </Grid>
66
- {matches ? (
67
- <Grid container item lg={10} justifyContent="space-evenly">
68
- <Grid item>
69
- <FooterSection title="Explore" items={exploreItems} />
70
- </Grid>
71
- <Grid item>
72
- <FooterSection title="Events" items={eventItems} />
73
- </Grid>
74
- <Grid item>
75
- <FooterSection title="Providers" items={providerItems} />
76
- </Grid>
77
- <Grid item>
78
- <FooterSection title="More" items={moreItems} />
79
- </Grid>
80
- <Grid item>
81
- <FooterSection title="Support" items={supportItems} />
82
- </Grid>
83
- </Grid>
84
- ) : (
85
- <Grid container display="column" justifyContent="space-evenly">
86
- <Grid item>
87
- <Box mb={2}>
88
- <FooterSection title="Explore" items={exploreItems} />
89
- </Box>
90
- <Box mb={3.3}>
91
- <FooterSection title="Providers" items={providerItems} />
92
- </Box>
93
- <FooterSection title="Support" items={supportItems} />
94
- </Grid>
95
- <Grid item>
96
- <Box mb={2}>
97
- <FooterSection title="Events" items={eventItems} />
98
- </Box>
99
- <FooterSection title="More" items={moreItems} />
100
- </Grid>
101
- </Grid>
102
- )}
103
- </Grid>
116
+ <Box display="flex" justifyContent="space-between" width="100%">
117
+ <Link href={googlePlayLink} target="_blank" rel="noopener">
118
+ <img
119
+ alt="Google play logo"
120
+ width="96"
121
+ height="28"
122
+ src={googlePlayLogo}
123
+ />
124
+ </Link>
125
+ <Link href={appStoreLink} target="_blank" rel="noopener">
126
+ <img
127
+ alt="App store badge"
128
+ width="84"
129
+ height="28"
130
+ src={appStoreBadge}
131
+ />
132
+ </Link>
133
+ </Box>
134
+ </StyledLogoContainer>
135
+ <StyledBorder />
136
+ <StyledNavigationContainer>
137
+ <StyledNavigation>
138
+ <FooterSection title="Explore" items={exploreItems} />
139
+ </StyledNavigation>
140
+ <StyledNavigation>
141
+ <FooterSection title="Providers" items={providerItems} />
142
+ </StyledNavigation>
143
+ <StyledNavigation>
144
+ <FooterSection title="More" items={moreItems} />
145
+ </StyledNavigation>
146
+ <StyledNavigation>
147
+ <FooterSection title="Support" items={supportItems} />
148
+ </StyledNavigation>
149
+ </StyledNavigationContainer>
150
+ </StyledContentContainer>
104
151
  <Box display="absolute" sx={{ bottom: 24, borderTop: 1, borderColor: "var(--white)" }}>
105
152
  <Typography
106
153
  p={0.5}
package/src/stories/organisms/Footer/sharedTypes.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { SxProps, Theme } from '@mui/system';
2
+
1
3
  export interface LinkItem {
2
4
  href: string;
3
5
  label: string;
@@ -11,4 +13,5 @@ export type FooterProps = {
11
13
  moreItems:[LinkItem];
12
14
  supportItems:[LinkItem];
13
15
  onSocialMediaClick(id: number): VoidFunction;
16
+ sx?: SxProps<Theme>;
14
17
  };