|
@@ -1,10 +1,8 @@
|
|
-"use client";
|
|
|
|
-
|
|
|
|
import { useState } from "react";
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import Image from "next/image";
|
|
import { Play, Shuffle, MoreVertical, Trash2, Info, Target } from "lucide-react";
|
|
import { Play, Shuffle, MoreVertical, Trash2, Info, Target } from "lucide-react";
|
|
|
|
|
|
-import { useCurrentLocale, useI18n } from "locales/client";
|
|
|
|
|
|
+import { useI18n } from "locales/client";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
@@ -25,7 +23,6 @@ interface ExerciseCardProps {
|
|
|
|
|
|
export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }: ExerciseCardProps) {
|
|
export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }: ExerciseCardProps) {
|
|
const t = useI18n();
|
|
const t = useI18n();
|
|
- const locale = useCurrentLocale();
|
|
|
|
const [imageError, setImageError] = useState(false);
|
|
const [imageError, setImageError] = useState(false);
|
|
const [showVideo, setShowVideo] = useState(false);
|
|
const [showVideo, setShowVideo] = useState(false);
|
|
|
|
|
|
@@ -38,13 +35,10 @@ export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }:
|
|
|
|
|
|
const mechanicsType = exercise.attributes?.find((attr) => attr.attributeName.name === "MECHANICS_TYPE")?.attributeValue.value;
|
|
const mechanicsType = exercise.attributes?.find((attr) => attr.attributeName.name === "MECHANICS_TYPE")?.attributeValue.value;
|
|
|
|
|
|
- const exerciseName = locale === "fr" ? exercise.name : exercise.nameEn
|
|
|
|
-
|
|
|
|
const handlePlayVideo = () => {
|
|
const handlePlayVideo = () => {
|
|
setShowVideo(true);
|
|
setShowVideo(true);
|
|
};
|
|
};
|
|
|
|
|
|
-
|
|
|
|
return (
|
|
return (
|
|
<TooltipProvider>
|
|
<TooltipProvider>
|
|
<Card className="group relative overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all duration-200 hover:border-blue-200 dark:hover:border-blue-800">
|
|
<Card className="group relative overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:shadow-lg transition-all duration-200 hover:border-blue-200 dark:hover:border-blue-800">
|
|
@@ -62,12 +56,7 @@ export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }:
|
|
src={exercise.fullVideoImageUrl}
|
|
src={exercise.fullVideoImageUrl}
|
|
/>
|
|
/>
|
|
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
- <Button
|
|
|
|
- className="bg-white/90 text-slate-900"
|
|
|
|
- onClick={handlePlayVideo}
|
|
|
|
- size="small"
|
|
|
|
- variant="secondary"
|
|
|
|
- >
|
|
|
|
|
|
+ <Button className="bg-white/90 text-slate-900" onClick={handlePlayVideo} size="small" variant="secondary">
|
|
<Play className="h-4 w-4 mr-2" />
|
|
<Play className="h-4 w-4 mr-2" />
|
|
{t("workout_builder.exercise.watch_video")}
|
|
{t("workout_builder.exercise.watch_video")}
|
|
</Button>
|
|
</Button>
|
|
@@ -183,14 +172,7 @@ export function ExerciseCard({ exercise, muscle, onShuffle, onPick, onDelete }:
|
|
</CardContent>
|
|
</CardContent>
|
|
</Card>
|
|
</Card>
|
|
{/* Video Modal */}
|
|
{/* Video Modal */}
|
|
- {exercise.fullVideoUrl && (
|
|
|
|
- <ExerciseVideoModal
|
|
|
|
- onOpenChange={setShowVideo}
|
|
|
|
- open={showVideo}
|
|
|
|
- title={exerciseName || exercise.name}
|
|
|
|
- videoUrl={exercise.fullVideoUrl}
|
|
|
|
- />
|
|
|
|
- )}
|
|
|
|
- </TooltipProvider >
|
|
|
|
|
|
+ {exercise.fullVideoUrl && <ExerciseVideoModal exercise={exercise} onOpenChange={setShowVideo} open={showVideo} />}
|
|
|
|
+ </TooltipProvider>
|
|
);
|
|
);
|
|
}
|
|
}
|