App Shopping Cart

'use client';
import React from 'react';

import CreditCard from '@mui/icons-material/CreditCard';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import CssBaseline from '@mui/material/CssBaseline';
import Fab from '@mui/material/Fab';
import { ThemeProvider, styled } from '@mui/material/styles';

import {
  Content,
  EdgeDrawerTriggerRight,
  EdgeSidebarContent,
  EdgeSidebarRight,
  Footer,
  Header,
  InsetAvoidingView,
  InsetContent,
  InsetSidebar,
  Root,
} from '../layout-core';
import {
  DailyCart,
  DailyCheckout,
  DailyHeader,
  DailySummary,
  dailyShoppingTheme,
} from './components';

const StyledHeader = styled(Header)(() => ({
  backgroundColor: '#ffffff',
}));

const InsetAvoidingViewFooter = styled(InsetAvoidingView)(
  ({ theme: { breakpoints } }) => ({
    border: 'unset',
    position: 'relative',
    backgroundColor: '#fff',
    paddingTop: '1rem',

    '&:before': {
      content: '" "',
      position: 'absolute',
      width: '100%',
      height: 24,
      top: -1,
      left: 0,
      transform: 'translateY(-100%)',
      background: 'linear-gradient(to top, #ffffff, rgba(255,255,255,0))',
    },

    [breakpoints.only('sm')]: {
      paddingRight: 64,
    },

    [breakpoints.up('md')]: {
      paddingBottom: 40,
    },
  }),
);

export function LayoutV6AppShoppingCart() {
  return (
    <ThemeProvider theme={dailyShoppingTheme}>
      <Root standalone>
        <CssBaseline />
        <EdgeDrawerTriggerRight
          render={
            <Fab
              color={'primary'}
              sx={(theme) => ({
                position: 'fixed',
                bottom: 16,
                right: 16,
                color: '#2E3B4D',
                '& svg': {
                  fontSize: 32,
                  color: '#fff',
                },
                zIndex: 1500,
                transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
                [theme.breakpoints.up('sm')]: {
                  bottom: 40,
                },
                [theme.breakpoints.up('lg')]: {
                  transform: 'scale(0)',
                },
              })}
            >
              <CreditCard />
            </Fab>
          }
        />
        <StyledHeader height="64px" sx={{ position: 'relative' }}>
          <Container maxWidth="xl">
            <DailyHeader />
          </Container>
        </StyledHeader>
        <EdgeSidebarRight
          variant={{
            xs: ['drawer', { width: 'min(400px, 100vw)' }],
          }}
        >
          <EdgeSidebarContent
            sx={{
              padding: 'calc(var(--jun-ES-drawerOpen) * 0.5rem)',
              bgcolor: 'initial',
            }}
          >
            <DailyCheckout />
          </EdgeSidebarContent>
        </EdgeSidebarRight>
        <Content>
          <Container maxWidth="xl">
            <DailyCart />
            <InsetSidebar
              position="absolute"
              width={{ lg: 'max(25cqw, 360px)' }}
              sx={{
                '& > div': {
                  border: 'none',
                  py: '1rem',
                },
              }}
            >
              <InsetContent>
                <DailyCheckout />
              </InsetContent>
            </InsetSidebar>
          </Container>
        </Content>
        <Footer>
          <Container maxWidth="xl">
            <InsetAvoidingViewFooter>
              <Box
                sx={{
                  pb: 3,
                }}
              >
                <DailySummary />
              </Box>
            </InsetAvoidingViewFooter>
          </Container>
        </Footer>
      </Root>
    </ThemeProvider>
  );
}

'use client';
import React from 'react';

import Close from '@mui/icons-material/Close';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';

import DailyInteger from './DailyInteger';
import DailySizeSelector from './DailySizeSelector';

const TypographyHeading = styled(Typography)(({ theme: { breakpoints } }) => ({
  fontWeight: 900,
  fontSize: '1.75rem',
  textAlign: 'center',

  [breakpoints.up('sm')]: {
    textAlign: 'left',
  },

  [breakpoints.up('md')]: {
    fontSize: '2.25rem',
  },
}));

const StyledTable = styled(Table)(() => ({
  minWidth: 650,
}));

const ImgImage = styled('img')(() => ({
  width: '100%',
  height: '100%',
  objectFit: 'contain',
}));

const PName = styled('p')(() => ({
  fontFamily:
    '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
  fontWeight: 'bold',
  fontSize: 16,
  margin: '0 0 8px 0',
}));

const SpanDescr = styled('span')(({ theme: { palette } }) => ({
  fontSize: 14,
  color: palette.text.secondary,
}));

function createData(
  image: string,
  name: string,
  descr: string,
  size: string | number,
  quantity: number,
  totalPrice: string,
) {
  return { image, name, descr, size, quantity, totalPrice };
}

const rows = [
  createData(
    'https://dynamic.zacdn.com/TIqU0jk90hPxnuO44NnNXO4B1AU=/fit-in/346x500/filters:quality(95):fill(ffffff)/http://static.sg.zalora.net/p/fila-4662-609589-1.jpg',
    'Henry T-Shirt',
    'White, Screen',
    'S',
    2,
    '$39.98',
  ),
  createData(
    'https://www.hybridoutfitters.com/wp-content/uploads/2019/11/147.jpg',
    'Stripe Tee',
    'ocean, stripe',
    'M',
    3,
    '$100',
  ),
  createData(
    'https://gloimg.zafcdn.com/zaful/pdm-product-pic/Clothing/2019/09/18/goods-first-img/1568766431491927776.jpg',
    'Sweater Hood',
    'Light Brown, Wool',
    'S',
    1,
    '$39.99',
  ),
  createData(
    'https://l.lnwfile.com/_resize_images/600/600/w1/nh/5z.jpg',
    'Jackboot',
    'Brown, Leather',
    10.5,
    1,
    '$69.99',
  ),
];

const DailyCart = () => {
  return (
    <Box
      sx={{
        pt: { xs: 2, sm: 4, md: 6 },
      }}
    >
      <TypographyHeading variant={'h1'} gutterBottom>
        Shopping Cart.
      </TypographyHeading>
      <TableContainer>
        <StyledTable aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Product</TableCell>
              <TableCell>Size</TableCell>
              <TableCell>Quantity</TableCell>
              <TableCell>Total Price</TableCell>
              <TableCell>&nbsp;</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.name}>
                <TableCell component="th" scope="row">
                  <Box
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                    }}
                  >
                    <Box
                      sx={{
                        width: 80,
                        height: 80,
                      }}
                    >
                      <ImgImage alt={row.name} src={row.image} />
                    </Box>
                    <Box
                      sx={{
                        ml: 2,
                      }}
                    >
                      <PName>{row.name}</PName>
                      <SpanDescr>{row.descr}</SpanDescr>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell>
                  <DailySizeSelector>{row.size}</DailySizeSelector>
                </TableCell>
                <TableCell>
                  <DailyInteger>{row.quantity}</DailyInteger>
                </TableCell>
                <TableCell>{row.totalPrice}</TableCell>
                <TableCell>
                  <IconButton>
                    <Close />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </StyledTable>
      </TableContainer>
    </Box>
  );
};

export default DailyCart;

'use client';
import React from 'react';

import CreditCard from '@mui/icons-material/CreditCard';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import MenuItem from '@mui/material/MenuItem';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';

const BoxRoot = styled(Box)(() => ({
  display: 'flex',
  flexDirection: 'column',
  background: 'linear-gradient(45deg, #191D29, #3c5981)',
  borderRadius: 12,
  height: '100%',
  overflow: 'auto',

  '& *': {
    color: '#fff',
  },
}));

const TypographyHeading = styled(Typography)(() => ({
  fontWeight: 900,
  fontSize: '2.25rem',
}));

const StyledDivider = styled(Divider)(() => ({
  backgroundColor: '#fff',
  opacity: 0.12,
  margin: '24px 0',
}));

const TypographyLabel = styled(Typography)(() => ({
  fontSize: 12,
  fontWeight: 'bold',
  marginBottom: 16,
  opacity: 0.87,
}));

const StyledTextField = styled(TextField)(() => ({
  '& label': {
    color: '#fff',
    opacity: 0.87,
    fontWeight: 'bold',
  },
  '& .MuiInputBase-root': {
    color: '#fff',
  },
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'rgba(255, 255, 255, 0.12)',
  },
  '&:hover': {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(255, 255, 255, 0.38)',
    },
  },
}));

const TextFieldSelect = styled(TextField)(() => ({
  '& label': {
    color: '#fff',
    opacity: 0.4,
  },
  '& .MuiInputBase-root': {
    color: '#fff',
  },
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'rgba(255, 255, 255, 0.12)',
  },
  '&:hover': {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(255, 255, 255, 0.38)',
    },
  },
}));

const ButtonCheckoutBtn = styled(Button)(() => ({
  marginTop: 'auto',
  borderRadius: 40,
  width: '100%',
}));

const DailyCheckout = () => {
  const styles = {
    button: {
      textTransform: 'initial',
      minHeight: 48,
      borderRadius: 40,
      borderColor: 'rgba(255, 255, 255, 0.12)',
      borderStyle: 'solid',
      borderWidth: 1,
      width: '100%',
      color: '#fff',
      '&:hover': {
        backgroundColor: 'rgba(255, 255, 255, 0.12)',
      },
    },
    buttonActive: {
      borderColor: '#fff',
    },
  } as const;
  return (
    <BoxRoot sx={{ py: 3, px: 3.5 }}>
      <TypographyHeading variant={'h1'}>Payment Info.</TypographyHeading>
      <StyledDivider />
      <TypographyLabel>Payment Method:</TypographyLabel>
      <Grid container spacing={2}>
        <Grid size={6}>
          <Button
            startIcon={<CreditCard />}
            sx={{
              ...styles.button,
              ...styles.buttonActive,
            }}
          >
            Credit Card
          </Button>
        </Grid>
        <Grid size={6}>
          <Button
            sx={{
              ...styles.button,
              ...styles.buttonActive,
              fontSize: 20,
              textTransform: 'initial',
              fontStyle: 'italic',
              fontFamily:
                '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
              fontWeight: 'bold',
              lineHeight: 1,
            }}
          >
            PayPal
          </Button>
        </Grid>
      </Grid>
      <StyledDivider />
      <StyledTextField
        fullWidth
        margin="dense"
        label={'Name On Card:'}
        value={'Siriwat Knp'}
      />
      <Box sx={{ height: 24, flex: 'none' }} />
      <StyledTextField
        fullWidth
        margin="dense"
        label={'Card Number:'}
        value={'••••  ••••  ••••  1829'}
      />
      <Box sx={{ height: 24, flex: 'none' }} />
      <Grid container spacing={3}>
        <Grid size={8}>
          <TypographyLabel>Expiration Date:</TypographyLabel>
          <Box>
            <Grid container spacing={2}>
              <Grid size={6}>
                <TextFieldSelect select fullWidth label={'MM'} defaultValue="">
                  {Array.from({ length: 12 }, (_, i) => {
                    const val = String(i + 1).padStart(2, '0');
                    return (
                      <MenuItem key={val} value={val}>
                        {val}
                      </MenuItem>
                    );
                  })}
                </TextFieldSelect>
              </Grid>
              <Grid size={6}>
                <TextFieldSelect
                  select
                  fullWidth
                  label={'YYYY'}
                  defaultValue=""
                >
                  {Array.from({ length: 10 }, (_, i) => {
                    const val = String(2025 + i);
                    return (
                      <MenuItem key={val} value={val}>
                        {val}
                      </MenuItem>
                    );
                  })}
                </TextFieldSelect>
              </Grid>
            </Grid>
          </Box>
        </Grid>
        <Grid size={4}>
          <TypographyLabel>CCV:</TypographyLabel>
          <StyledTextField
            fullWidth
            slotProps={{
              inputLabel: {
                shrink: true,
              },
            }}
            aria-label="CCV"
            placeholder={'XXX'}
          />
        </Grid>
      </Grid>
      <Box sx={{ height: 24, flex: 'none' }} />
      <ButtonCheckoutBtn color={'primary'} variant={'contained'}>
        Check Out.
      </ButtonCheckoutBtn>
    </BoxRoot>
  );
};

export default DailyCheckout;

'use client';
import React from 'react';

import ClearAll from '@mui/icons-material/ClearAll';
import ShoppingBasket from '@mui/icons-material/ShoppingBasket';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';

import DailyLogo from './DailyLogo';
import DailySearch from './DailySearch';

const DailyHeader = () => {
  return (
    <Toolbar disableGutters>
      <DailyLogo />
      <Box
        sx={{
          ml: 'auto',
        }}
      >
        <DailySearch />
      </Box>
      <Box
        sx={{
          ml: { xs: 2, md: 10, lg: 15 },
          justifyContent: 'flex-end',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <Box
          sx={{
            mr: 2,
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <ShoppingBasket />
          <Box
            sx={{
              backgroundColor: '#F6F7F9',
              borderRadius: 40,
              minWidth: 24,
              minHeight: 24,
              lineHeight: '24px',
              textAlign: 'center',
              padding: '0 8px',
              marginLeft: 8,
            }}
          >
            4
          </Box>
        </Box>
        <IconButton>
          <ClearAll />
        </IconButton>
      </Box>
    </Toolbar>
  );
};

export default DailyHeader;

'use client';
import React from 'react';

import Add from '@mui/icons-material/Add';
import Remove from '@mui/icons-material/Remove';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';

const DailyInteger = ({ children }: React.PropsWithChildren) => {
  return (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        padding: '4px',
        borderRadius: '40px',
        border: '1px solid',
        borderColor: 'grey.300',
      }}
    >
      <IconButton
        sx={{
          padding: '8px',
          '& svg': {
            fontSize: 16,
          },
        }}
      >
        <Remove />
      </IconButton>
      <Box component="span" sx={{ padding: '0px 8px' }}>
        {children}
      </Box>
      <IconButton
        sx={{
          padding: '8px',
          '& svg': {
            fontSize: 16,
          },
        }}
      >
        <Add />
      </IconButton>
    </Box>
  );
};

export default DailyInteger;

'use client';
import React from 'react';

import Typography from '@mui/material/Typography';

const DailyLogo = () => {
  return (
    <Typography
      variant={'h5'}
      sx={{ fontWeight: 900, textTransform: 'uppercase', whiteSpace: 'nowrap' }}
    >
      <span>#</span> Daily.
    </Typography>
  );
};

export default DailyLogo;

'use client';
import React from 'react';

import Search from '@mui/icons-material/Search';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import InputBase from '@mui/material/InputBase';

const DailySearch = () => {
  return (
    <>
      <InputBase
        placeholder={'Search'}
        endAdornment={
          <InputAdornment position={'end'}>
            <Search />
          </InputAdornment>
        }
        sx={(theme) => ({
          backgroundColor: '#F6F7F9',
          padding: theme.spacing(1, 3),
          borderRadius: '40px',
          flexShrink: 0,
          display: 'none',
          [theme.breakpoints.up('sm')]: {
            display: 'inline-flex',
          },
          [theme.breakpoints.up('md')]: {
            minWidth: 300,
          },
        })}
      />
      <IconButton
        sx={(theme) => ({
          [theme.breakpoints.up('sm')]: {
            display: 'none',
          },
        })}
      >
        <Search />
      </IconButton>
    </>
  );
};

export default DailySearch;

'use client';
import React from 'react';

import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';

const DailySizeSelector = ({ children }: React.PropsWithChildren) => {
  return (
    <ButtonBase sx={{ borderRadius: '40px' }}>
      <Box
        sx={{
          display: 'inline-flex',
          alignItems: 'center',
          padding: '8px 40px 8px 12px',
          position: 'relative',
          borderRadius: '40px',
          border: '1px solid',
          borderColor: 'grey.300',
          fontSize: 14,
          minHeight: 42,
        }}
      >
        {children}{' '}
        <KeyboardArrowDown
          sx={{
            position: 'absolute',
            right: 8,
            top: '50%',
            transform: 'translateY(-50%)',
            color: 'grey.700',
          }}
        />
      </Box>
    </ButtonBase>
  );
};

export default DailySizeSelector;

'use client';
import React from 'react';

import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';

const ButtonBtn = styled(Button)(({ theme: { palette, breakpoints } }) => ({
  width: '100%',
  paddingTop: 16,
  paddingBottom: 16,
  borderRadius: 40,
  border: '1px solid',
  borderColor: palette.grey[400],

  '& > *': {
    fontWeight: 'bold',
    textTransform: 'none',
  },

  marginRight: 72,

  [breakpoints.up('sm')]: {
    marginRight: 'unset',
  },
}));

const BBig = styled('b')(() => ({
  fontSize: 16,
}));

const BoxBig = styled(Box)(() => ({
  fontSize: 16,
}));

const BoxLarge = styled(Box)(() => ({
  fontSize: 24,
}));

const GridMainGrid = styled(Grid)(({ theme: { breakpoints } }) => ({
  [breakpoints.up('sm')]: {
    flexDirection: 'row-reverse',
  },
}));

const DailySummary = () => {
  return (
    <GridMainGrid
      container
      spacing={2}
      sx={{ justifyContent: 'space-between' }}
    >
      <Grid size={{ xs: 12, sm: 5, md: 4 }}>
        <Grid container spacing={1}>
          <Grid size={5}>
            <Box sx={{ textAlign: 'right' }}>
              <BBig>Subtotal:</BBig>
            </Box>
          </Grid>
          <Grid size={7}>
            <BoxBig sx={{ px: 2, textAlign: 'right' }}>
              <span>$149.96</span>
            </BoxBig>
          </Grid>
          <Grid size={5}>
            <Box sx={{ textAlign: 'right' }}>
              <BBig>Shipping:</BBig>
            </Box>
          </Grid>
          <Grid size={7}>
            <BoxBig sx={{ px: 2, textAlign: 'right' }}>
              <span>$0</span>
            </BoxBig>
          </Grid>
        </Grid>
        <br />
        <Divider />
        <br />
        <Grid container spacing={1}>
          <Grid size={5}>
            <Box sx={{ textAlign: 'right' }}>
              <BBig>Total:</BBig>
            </Box>
          </Grid>
          <Grid size={7}>
            <BoxLarge sx={{ px: 2, textAlign: 'right' }}>
              <span>$149.96</span>
            </BoxLarge>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        size={{ xs: 12, sm: 5, md: 4 }}
        container
        sx={{
          alignItems: 'flex-end',
        }}
      >
        <ButtonBtn startIcon={<KeyboardArrowLeft />}>
          Continue Shopping
        </ButtonBtn>
      </Grid>
    </GridMainGrid>
  );
};

export default DailySummary;

'use client';
import { createTheme } from '@mui/material/styles';

export default createTheme({
  typography: {
    fontFamily: '"Fira Sans", "Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontFamily:
        '"Playfair Display", "Roboto", "Helvetica", "Arial", sans-serif',
    },
    h2: {
      fontFamily:
        '"Playfair Display", "Roboto", "Helvetica", "Arial", sans-serif',
    },
    h3: {
      fontFamily:
        '"Playfair Display", "Roboto", "Helvetica", "Arial", sans-serif',
    },
    h4: {
      fontFamily:
        '"Playfair Display", "Roboto", "Helvetica", "Arial", sans-serif',
    },
    h5: {
      fontFamily:
        '"Playfair Display", "Roboto", "Helvetica", "Arial", sans-serif',
    },
    h6: {
      fontFamily:
        '"Playfair Display", "Roboto", "Helvetica", "Arial", sans-serif',
    },
  },
  palette: {
    primary: {
      main: '#3E89EB',
    },
    background: {
      default: '#ffffff',
    },
  },
});

export { default as DailyLogo } from './DailyLogo';
export { default as dailyShoppingTheme } from './dailyShoppingTheme';
export { default as DailySearch } from './DailySearch';
export { default as DailyHeader } from './DailyHeader';
export { default as DailyCart } from './DailyCart';
export { default as DailyCheckout } from './DailyCheckout';
export { default as DailySizeSelector } from './DailySizeSelector';
export { default as DailyInteger } from './DailyInteger';
export { default as DailySummary } from './DailySummary';

export * from './app-shopping-cart';
export * from './DailyCart';
export { default as DailyCart } from './DailyCart';
export * from './DailyCheckout';
export { default as DailyCheckout } from './DailyCheckout';
export * from './DailyHeader';
export { default as DailyHeader } from './DailyHeader';
export * from './DailyInteger';
export { default as DailyInteger } from './DailyInteger';
export * from './DailyLogo';
export { default as DailyLogo } from './DailyLogo';
export * from './DailySearch';
export { default as DailySearch } from './DailySearch';
export * from './DailySizeSelector';
export { default as DailySizeSelector } from './DailySizeSelector';
export * from './DailySummary';
export { default as DailySummary } from './DailySummary';
export * from './dailyShoppingTheme';
export * from './index';