Initial commit
This commit is contained in:
438
src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
Normal file
438
src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
import { Card, Grid, Skeleton } from "antd";
|
||||
import styles from "./MenuSkeleton.module.css";
|
||||
|
||||
interface MenuSkeletonProps {
|
||||
categoryCount?: number;
|
||||
itemCount?: number;
|
||||
variant?:
|
||||
| "default"
|
||||
| "minimal"
|
||||
| "detailed"
|
||||
| "categories-only"
|
||||
| "menu-only";
|
||||
}
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const MenuSkeleton = ({
|
||||
categoryCount = 6,
|
||||
itemCount = 8,
|
||||
variant = "default",
|
||||
}: MenuSkeletonProps) => {
|
||||
const { xs, sm, md } = useBreakpoint();
|
||||
const isMobile = xs;
|
||||
const isTablet = sm && !md;
|
||||
const isDesktop = md;
|
||||
|
||||
const getCategoryCardStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 95,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 140,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 140,
|
||||
height: 160,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getMenuItemCardStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
height: 140,
|
||||
padding: "12px 12px 12px 16px",
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
height: 160,
|
||||
padding: "16px",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
height: 180,
|
||||
padding: "20px",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getCategoryImageStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 60,
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 90,
|
||||
borderTopLeftRadius: 12,
|
||||
borderTopRightRadius: 12,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 120,
|
||||
height: 100,
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getMenuItemImageStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 95,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 120,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 140,
|
||||
height: 140,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getGridClass = () => {
|
||||
if (isMobile) {
|
||||
return styles.menuItemsGridMobile;
|
||||
} else if (isTablet) {
|
||||
return styles.menuItemsGridTablet;
|
||||
} else {
|
||||
return styles.menuItemsGridDesktop;
|
||||
}
|
||||
};
|
||||
|
||||
const getPageContainerStyle = () => {
|
||||
if (isDesktop) {
|
||||
return {
|
||||
maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
padding: "32px",
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
padding: "24px",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.pageContainer} ${styles.skeletonContainer}`}
|
||||
style={getPageContainerStyle()}
|
||||
>
|
||||
{/* Restaurant Header Skeleton */}
|
||||
<div className={styles.restaurantHeader}>
|
||||
{/* Cover Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "100vw",
|
||||
height: isMobile ? 182 : isTablet ? 200 : 220,
|
||||
borderRadius: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Logo Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: isMobile ? "33px" : "40px",
|
||||
top: isMobile ? "133px" : "-70px",
|
||||
borderRadius: "50%",
|
||||
width: isMobile ? "72px" : "80px",
|
||||
height: isMobile ? "72px" : "80px",
|
||||
border: "3px solid var(--background)",
|
||||
zIndex: 10,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Decorative Shapes Skeleton */}
|
||||
<div className={styles.leftShape}></div>
|
||||
<div className={styles.rightShape}></div>
|
||||
</div>
|
||||
|
||||
{/* Restaurant Info Skeleton */}
|
||||
<div className={styles.restaurantInfoSkeleton}>
|
||||
<div
|
||||
className={
|
||||
styles.restaurantDescriptionSkeleton +
|
||||
" " +
|
||||
"restaurant-description-skeleton"
|
||||
}
|
||||
>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: 1,
|
||||
width: ["100%"],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loyalty Card Skeleton */}
|
||||
<div className={styles.loyaltySkeleton}>
|
||||
<Card className={styles.loyaltyCardSkeleton}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Skeleton.Input
|
||||
active
|
||||
style={{
|
||||
width: "120px",
|
||||
height: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<Skeleton.Image
|
||||
key={index}
|
||||
active
|
||||
style={{
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Skeleton.Button
|
||||
active
|
||||
style={{
|
||||
width: "80px",
|
||||
height: "32px",
|
||||
borderRadius: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Categories Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "categories-only") && (
|
||||
<div style={{ padding: "0 1rem", display: "flex", gap: 8, overflow: "hidden" }}>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(categoryCount, 4)
|
||||
: categoryCount,
|
||||
}).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginRight: isMobile ? "3px" : "8px",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getCategoryCardStyle(),
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getCategoryImageStyle(),
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "4px" : "8px",
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{ rows: 1 }}
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: isMobile ? 3 : 8,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu Items Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "menu-only") && (
|
||||
<div className={styles.menuSections} style={{ padding: "0 1rem" }}>
|
||||
{Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
|
||||
(_, sectionIndex) => (
|
||||
<div key={sectionIndex} className={styles.menuSection}>
|
||||
{/* Section Header Skeleton */}
|
||||
{/* <div
|
||||
style={{
|
||||
margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0",
|
||||
padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0"
|
||||
}}
|
||||
>
|
||||
<Skeleton.Input
|
||||
active
|
||||
size="large"
|
||||
style={{
|
||||
width: isMobile ? 120 : isTablet ? 160 : 200,
|
||||
height: isMobile ? 24 : isTablet ? 28 : 32,
|
||||
}}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<div className={`${styles.menuItemsGrid} ${getGridClass()}`}>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(itemCount, 4)
|
||||
: itemCount,
|
||||
}).map((_, itemIndex) => (
|
||||
<Card
|
||||
key={itemIndex}
|
||||
className="responsive-card"
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getMenuItemCardStyle(),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
gap: isMobile ? 12 : 16,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
lineHeight: 1,
|
||||
height: "100%",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{/* Item Name Skeleton */}
|
||||
<Skeleton.Input
|
||||
active
|
||||
style={{
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
height: isMobile ? 16 : isTablet ? 18 : 20,
|
||||
width: "80%",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Item Description Skeleton */}
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: isMobile ? 1 : 2,
|
||||
width: ["100%", "90%", "70%"],
|
||||
}}
|
||||
style={{
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
}}
|
||||
/>
|
||||
{/* Action Icons Skeleton */}
|
||||
</div>
|
||||
|
||||
<div style={{ position: "relative" }}>
|
||||
{/* Item Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getMenuItemImageStyle(),
|
||||
}}
|
||||
/>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuSkeleton;
|
||||
Reference in New Issue
Block a user