martin/Kunst_Gegen_Bares_Kimaschine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile test8

Browse Source 
#deploy
This commit is contained in:
martin 2026-01-21 17:49:11 +01:00
parent a0d6457778
commit 7715cbfb6f
1 changed files with 84 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/features/event/components/PromotionTemplatesSection.tsx
View File

@ -3,6 +3,8 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { useIsMobile } from '@/hooks/use-mobile';
type Props = {
mediaUrl: string;
@ -28,6 +30,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
onFileSelected,
mediaPreview,
}) => {
const isMobile = useIsMobile();
const templates: PromotionTemplate[] = useMemo(
() => [
{
@ -96,33 +99,92 @@ const PromotionTemplatesSection: React.FC<Props> = ({
onValueChange: (next: string) => void;
selected: PromotionTemplate | null;
}) => {
const [open, setOpen] = useState(false);
return (
<div className="space-y-2">
<Label>{label}</Label>
<div className="grid gap-3 md:grid-cols-[1fr,280px] items-start">
<Select value={value} onValueChange={onValueChange}>
<SelectTrigger>
<SelectValue placeholder="Template wählen" />
</SelectTrigger>
<SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-1.5rem)] overflow-x-hidden">
{templates.map((tpl) => (
<SelectItem key={tpl.id} value={tpl.id}>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded border bg-muted/40 overflow-hidden flex items-center justify-center">
{tpl.previewUrl ? (
<img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
) : (
<div className="h-full w-full" />
)}
</div>
<div className="min-w-0">
<div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
{isMobile ? (
<>
<Button
type="button"
variant="outline"
className="w-full justify-between"
onClick={() => setOpen(true)}
>
<span className="truncate">{selected?.name || 'Template wählen'}</span>
<span className="text-muted-foreground">Auswählen</span>
</Button>
<Sheet open={open} onOpenChange={setOpen}>
<SheetContent side="bottom" className="p-0">
<div className="p-4">
<SheetHeader>
<SheetTitle>{label}</SheetTitle>
</SheetHeader>
</div>
<div className="max-h-[70vh] overflow-y-auto px-4 pb-4">
<div className="space-y-2">
{templates.map((tpl) => {
const isActive = tpl.id === value;
return (
<button
key={tpl.id}
type="button"
className={`w-full rounded-md border p-3 text-left transition-colors ${
isActive ? 'bg-primary/10 border-primary/30' : 'hover:bg-muted/40'
}`}
onClick={() => {
onValueChange(tpl.id);
setOpen(false);
}}
>
<div className="flex items-center gap-3">
<div className="h-12 w-12 rounded border bg-muted/40 overflow-hidden flex items-center justify-center shrink-0">
{tpl.previewUrl ? (
<img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
) : (
<div className="h-full w-full" />
)}
</div>
<div className="min-w-0">
<div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
</div>
</div>
</button>
);
})}
</div>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</SheetContent>
</Sheet>
</>
) : (
<Select value={value} onValueChange={onValueChange}>
<SelectTrigger>
<SelectValue placeholder="Template wählen" />
</SelectTrigger>
<SelectContent className="w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-1.5rem)] overflow-x-hidden">
{templates.map((tpl) => (
<SelectItem key={tpl.id} value={tpl.id}>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded border bg-muted/40 overflow-hidden flex items-center justify-center">
{tpl.previewUrl ? (
<img src={tpl.previewUrl} alt="" className="h-full w-full object-cover" />
) : (
<div className="h-full w-full" />
)}
</div>
<div className="min-w-0">
<div className="text-sm font-medium leading-tight truncate">{tpl.name}</div>
</div>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
)}
<div className="rounded-md border bg-background p-3">
<div className="text-xs text-muted-foreground">Vorschau</div>
@ -213,7 +275,7 @@ const PromotionTemplatesSection: React.FC<Props> = ({
</div>
<div className="flex items-center justify-between gap-3 rounded-md border p-3">
<div className="text-sm font-medium">Templates verwalten</div>
{/* <div className="text-sm font-medium">Templates verwalten</div> */}
<div className="flex items-center gap-2">
<input
ref={importZipInputRef}