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