@wger-project/react-components 25.12.5 → 26.1.18

package/src/components/Carousel/carousel.module.scss

@@ -1,46 +0,0 @@
-.carousel {
-    overflow: hidden;
-    margin: 2rem 0;
-
-    @media screen and (min-width: 700px) {
-        display: none;
-    }
-
-    .inner {
-        white-space: nowrap;
-        transition: transform 0.3s;
-      }
-  }
-    
-  .carousel_item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    background-color: rgb(119, 149, 189);
-    color: #fff;
-    border-radius: 10px;
-    
-    img {
-       
-    }
-  }
-  
-  .indicators {
-    display: flex;
-    justify-content: center;
-  }
-  
-  .indicators > button {
-    margin: 5px;
-    border: none;
-    background-color: #2a4c7d;
-    color: #fff;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-  
-  .indicators > button.active {
-    background-color: green;
-    color: #fff;
-  }  

package/src/components/Carousel/index.tsx

@@ -1,66 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styles from './carousel.module.css';
-
-export interface CarouselItemProps {
-    children: React.ReactNode;
-}
-
-export const CarouselItem = ({ children }: CarouselItemProps) => {
-    return (
-        <div className={styles.carousel_item}>
-            {children}
-        </div>
-    );
-};
-
-export interface CarouselProps {
-    children: React.ReactNode | React.ReactNode[];
-}
-
-export const Carousel: React.FC<CarouselProps> = ({ children }: CarouselProps) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-
-    const updateIndex = (newIndex: number) => {
-        if (newIndex < 0) {
-            newIndex = React.Children.count(children) - 1;
-
-        } else if (newIndex >= React.Children.count(children)) {
-            newIndex = 0;
-        }
-
-        setActiveIndex(newIndex);
-    };
-
-    useEffect(() => {
-
-    });
-
-    return (
-        <div className={styles.carousel}>
-            <div
-                className={styles.inner}
-                style={{ transform: `translateX(-${activeIndex * 100}%)` }}
-            >
-                {React.Children.map(children, (child) => {
-                    if (React.isValidElement(child)) {
-                        return React.cloneElement(child);
-                    }
-                })}
-            </div>
-            <div className={styles.indicators}>
-                {React.Children.map(children, (child, index) => {
-                    return (
-                        <button
-                            className={`${index === activeIndex ? "active" : ""}`}
-                            onClick={() => {
-                                updateIndex(index);
-                            }}
-                        >
-                            {index + 1}
-                        </button>
-                    );
-                })}
-            </div>
-        </div>
-    );
-};

package/src/components/Dashboard/GoalCard.tsx

@@ -1,71 +0,0 @@
-import TrendingUpIcon from "@mui/icons-material/TrendingUp";
-import { Button, IconButton, List, ListItem, ListItemText, Typography } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import { DashboardCard } from "components/Dashboard/DashboardCard";
-import React from "react";
-// import { useTranslation } from "react-i18next";
-
-/**
- * Example of a new widget using DashboardCard
- *
- * This demonstrates how simple it is to create a new dashboard widget.
- * All the responsive layout logic is handled by DashboardCard!
- */
-export const GoalsCard = () => {
-    // const { t } = useTranslation();
-
-    // Your data fetching logic here
-    const goals = [
-        { id: 1, title: "Lose 5kg", progress: 60 },
-        { id: 2, title: "Run 5km", progress: 80 },
-        { id: 3, title: "Bench 100kg", progress: 45 },
-    ];
-
-    return (
-        <DashboardCard
-            title="My Goals"
-            subheader="Track your fitness goals"
-            // Optional header action (top-right icon)
-            headerAction={
-                <Tooltip title="View trends">
-                    <IconButton>
-                        <TrendingUpIcon />
-                    </IconButton>
-                </Tooltip>
-            }
-            // Actions at the bottom of the card
-            actions={
-                <>
-                    <Button size="small">See All Goals</Button>
-                    <Button size="small" variant="contained">
-                        Add Goal
-                    </Button>
-                </>
-            }
-        >
-            {/* Your card content goes here */}
-            <List>
-                {goals.map((goal) => (
-                    <ListItem key={goal.id}>
-                        <ListItemText
-                            primary={goal.title}
-                            secondary={
-                                <Typography variant="body2" color="text.secondary">
-                                    Progress: {goal.progress}%
-                                </Typography>
-                            }
-                        />
-                    </ListItem>
-                ))}
-            </List>
-        </DashboardCard>
-    );
-};
-
-// To add this widget to the dashboard, just add it to AVAILABLE_WIDGETS in ConfigurableDashboard.tsx:
-// {
-//   id: 'goals',
-//   type: 'goals',
-//   component: GoalsCard,
-//   defaultLayout: { w: 4, h: 6, x: 0, y: 6, minW: 3, minH: 4 },
-// }