WIP: redesign purchase page

package.json

@@ -32,6 +32,7 @@
     "decimal.js": "^10.4.3",
     "humanize-duration": "^3.31.0",
     "javascript-time-ago": "^2.5.9",
+    "moment": "^2.30.1",
     "next": "^13.3.1",
     "notistack": "^3.0.1",
     "react": "^18.2.0",

src/components/Elements/Buttons/ActionButton/index.module.scss

@@ -0,0 +1,8 @@
+.buttonContainer {
+  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
+  border-radius: 100px;
+  font-weight: 500;
+  text-transform: none;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8rem;
+}

src/components/Elements/Buttons/ActionButton/index.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@mui/material';
+
+import styles from './index.module.scss';
+
+interface ActionButtonProps {
+  label: string;
+  onClick: () => void;
+}
+export const ActionButton = ({ label, onClick }: ActionButtonProps) => {
+  return (
+    <Button
+      variant='contained'
+      onClick={onClick}
+      className={styles.buttonContainer}
+    >
+      {label}
+    </Button>
+  );
+};

src/components/Elements/Buttons/ProgressButton/index.module.scss

@@ -0,0 +1,8 @@
+.buttonContainer {
+  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
+  border-radius: 100px;
+  font-weight: 500;
+  text-transform: none;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8rem;
+}

src/components/Elements/Buttons/ProgressButton/index.tsx

@@ -0,0 +1,25 @@
+import { LoadingButton } from '@mui/lab';
+
+import styles from './index.module.scss';
+
+interface ProgressButtonProps {
+  label: string;
+  onClick: () => void;
+  loading: boolean;
+}
+export const ProgressButton = ({
+  label,
+  onClick,
+  loading,
+}: ProgressButtonProps) => {
+  return (
+    <LoadingButton
+      onClick={onClick}
+      variant='contained'
+      loading={loading}
+      className={styles.buttonContainer}
+    >
+      {label}
+    </LoadingButton>
+  );
+};

src/components/Elements/Buttons/index.tsx

@@ -0,0 +1,2 @@
+export * from './ActionButton';
+export * from './ProgressButton';

src/components/Elements/CoreDetailsPanel/index.module.scss

@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  flex-grow: 1;
+  box-shadow: 2px 2px 55px rgba(0, 0, 0, 0.08);
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.iconWrapper {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0.5rem;
+}
+
+.infoWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.detailWrapper {
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem;
+}
+
+.valueWrapper {
+  background: #ecf1f9;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+}

src/components/Elements/CoreDetailsPanel/index.tsx

@@ -0,0 +1,94 @@
+import { Box, Paper, Typography, useTheme } from '@mui/material';
+import Image from 'next/image';
+
+import GraphIcon from '@/assets/graph.png';
+import { SaleInfo } from '@/models';
+
+import styles from './index.module.scss';
+
+interface DetailItemProps {
+  label: string;
+  description: string;
+  value: number;
+}
+
+const DetailItem = ({ label, description, value }: DetailItemProps) => {
+  const theme = useTheme();
+  return (
+    <Paper className={styles.detailWrapper}>
+      <Box>
+        <Typography
+          sx={{
+            fontSize: '0.9rem',
+            fontWeight: 600,
+            color: theme.palette.common.black,
+          }}
+        >
+          {label}
+        </Typography>
+        <Typography
+          sx={{
+            fontSize: '0.8rem',
+            fontWeight: 400,
+            color: theme.palette.text.primary,
+          }}
+        >
+          {description}
+        </Typography>
+      </Box>
+      <Box className={styles.valueWrapper}>
+        <Typography
+          sx={{
+            fontSize: '0.8rem',
+            color: theme.palette.text.secondary,
+            fontWeight: 700,
+            lineHeight: 1,
+          }}
+        >
+          {value}
+        </Typography>
+      </Box>
+    </Paper>
+  );
+};
+
+interface CoreDetailsPanelProps {
+  saleInfo: SaleInfo;
+}
+
+export const CoreDetailsPanel = ({ saleInfo }: CoreDetailsPanelProps) => {
+  const theme = useTheme();
+  return (
+    <Paper className={styles.container}>
+      <Box className={styles.titleWrapper}>
+        <Image src={GraphIcon} alt='graph' className={styles.iconWrapper} />
+        <Typography
+          sx={{
+            color: theme.palette.common.black,
+            fontSize: '1rem',
+            fontWeight: 700,
+          }}
+        >
+          Core Details
+        </Typography>
+      </Box>
+      <Box className={styles.infoWrapper}>
+        <DetailItem
+          label='Cores offered'
+          description='Numbers of cores which are offered for sale'
+          value={saleInfo.coresOffered}
+        />
+        <DetailItem
+          label='Cores sold'
+          description='Numbers of cores which have been sold'
+          value={saleInfo.coresSold}
+        />
+        <DetailItem
+          label='Ideal cores sold'
+          description='Numbers of cores sold to not affect the price for next sale'
+          value={saleInfo.idealCoresSold}
+        />
+      </Box>
+    </Paper>
+  );
+};

src/components/Elements/SaleInfoPanel/DetailCard/index.module.scss

@@ -0,0 +1,31 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 2rem;
+  border-radius: .5rem;
+  gap: 1.5rem;
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.iconWrapper {
+  margin: 0.5rem;
+  margin-left: 0;
+  width: 2rem;
+  height: 2rem;
+}
+
+.infoSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.infoItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}

src/components/Elements/SaleInfoPanel/DetailCard/index.tsx

@@ -0,0 +1,49 @@
+import { Box, Paper, Typography, useTheme } from '@mui/material';
+import Image from 'next/image';
+
+import styles from './index.module.scss';
+
+interface ItemDetail {
+  label: string;
+  value: string;
+}
+
+interface DetailCardProps {
+  icon: any;
+  title: string;
+  left: ItemDetail;
+  right: ItemDetail;
+}
+
+const ItemContainer = ({ label, value }: ItemDetail) => {
+  const theme = useTheme();
+  return (
+    <Box className={styles.infoItem}>
+      <Typography>{label}</Typography>
+      <Typography sx={{ color: theme.palette.common.black, fontWeight: 700 }}>
+        {value}
+      </Typography>
+    </Box>
+  );
+};
+
+export const DetailCard = ({ icon, title, left, right }: DetailCardProps) => {
+  const theme = useTheme();
+  return (
+    <Paper className={styles.container}>
+      <Box className={styles.titleWrapper}>
+        <Image src={icon} className={styles.iconWrapper} alt='icon' />
+        <Typography
+          variant='subtitle1'
+          sx={{ color: theme.palette.common.black }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Box className={styles.infoSection}>
+        <ItemContainer {...left} />
+        <ItemContainer {...right} />
+      </Box>
+    </Paper>
+  );
+};