Update
This commit is contained in:
@@ -1,152 +1,201 @@
|
||||
import { useState, useEffect, useLayoutEffect } from "react"
|
||||
import { useEffect, useLayoutEffect, useState } from 'react';
|
||||
|
||||
import EditSidebar from "./partials/edit-sidebar"
|
||||
import EditorCanvas from "./partials/editor-canvas"
|
||||
import EditorHeader from "./partials/editor-header"
|
||||
import EditorControls from "./partials/editor-controls"
|
||||
import { calculateOptimalMaxWidth, calculateResponsiveWidth } from "./utils/layout-constants"
|
||||
import useLocalSettingsStore from '@/stores/localSettingsStore';
|
||||
import { Volume2Icon, VolumeOffIcon } from 'lucide-react';
|
||||
import EditNavSidebar from './partials/edit-nav-sidebar';
|
||||
import EditSidebar from './partials/edit-sidebar';
|
||||
import EditorCanvas from './partials/editor-canvas';
|
||||
import EditorControls from './partials/editor-controls';
|
||||
import EditorHeader from './partials/editor-header';
|
||||
import { calculateOptimalMaxWidth, calculateResponsiveWidth } from './utils/layout-constants';
|
||||
|
||||
// Hook to detect if viewport is below minimum width
|
||||
const useViewportDetection = (minWidth = 320) => {
|
||||
const [isBelowMinWidth, setIsBelowMinWidth] = useState(false);
|
||||
const [isBelowMinWidth, setIsBelowMinWidth] = useState(false);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setIsBelowMinWidth(window.innerWidth < minWidth);
|
||||
}, [minWidth]);
|
||||
useLayoutEffect(() => {
|
||||
setIsBelowMinWidth(window.innerWidth < minWidth);
|
||||
}, [minWidth]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkViewport = () => {
|
||||
setIsBelowMinWidth(window.innerWidth < minWidth);
|
||||
};
|
||||
useEffect(() => {
|
||||
const checkViewport = () => {
|
||||
setIsBelowMinWidth(window.innerWidth < minWidth);
|
||||
};
|
||||
|
||||
checkViewport();
|
||||
window.addEventListener('resize', checkViewport);
|
||||
window.addEventListener('orientationchange', checkViewport);
|
||||
checkViewport();
|
||||
window.addEventListener('resize', checkViewport);
|
||||
window.addEventListener('orientationchange', checkViewport);
|
||||
|
||||
let resizeObserver;
|
||||
if (window.ResizeObserver) {
|
||||
resizeObserver = new ResizeObserver(checkViewport);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
let resizeObserver;
|
||||
if (window.ResizeObserver) {
|
||||
resizeObserver = new ResizeObserver(checkViewport);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkViewport);
|
||||
window.removeEventListener('orientationchange', checkViewport);
|
||||
if (resizeObserver) resizeObserver.disconnect();
|
||||
};
|
||||
}, [minWidth]);
|
||||
return () => {
|
||||
window.removeEventListener('resize', checkViewport);
|
||||
window.removeEventListener('orientationchange', checkViewport);
|
||||
if (resizeObserver) resizeObserver.disconnect();
|
||||
};
|
||||
}, [minWidth]);
|
||||
|
||||
return isBelowMinWidth;
|
||||
return isBelowMinWidth;
|
||||
};
|
||||
|
||||
// Hook for responsive dimensions
|
||||
const useResponsiveDimensions = () => {
|
||||
const [dimensions, setDimensions] = useState(() => ({
|
||||
maxWidth: calculateOptimalMaxWidth(),
|
||||
responsiveWidth: calculateResponsiveWidth()
|
||||
}));
|
||||
const [dimensions, setDimensions] = useState(() => ({
|
||||
maxWidth: calculateOptimalMaxWidth(),
|
||||
responsiveWidth: calculateResponsiveWidth(),
|
||||
}));
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const newMaxWidth = calculateOptimalMaxWidth();
|
||||
const newResponsiveWidth = calculateResponsiveWidth();
|
||||
setDimensions({
|
||||
maxWidth: newMaxWidth,
|
||||
responsiveWidth: newResponsiveWidth
|
||||
});
|
||||
}, []);
|
||||
useLayoutEffect(() => {
|
||||
const newMaxWidth = calculateOptimalMaxWidth();
|
||||
const newResponsiveWidth = calculateResponsiveWidth();
|
||||
setDimensions({
|
||||
maxWidth: newMaxWidth,
|
||||
responsiveWidth: newResponsiveWidth,
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
const newMaxWidth = calculateOptimalMaxWidth();
|
||||
const newResponsiveWidth = calculateResponsiveWidth();
|
||||
setDimensions({
|
||||
maxWidth: newMaxWidth,
|
||||
responsiveWidth: newResponsiveWidth
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
const newMaxWidth = calculateOptimalMaxWidth();
|
||||
const newResponsiveWidth = calculateResponsiveWidth();
|
||||
setDimensions({
|
||||
maxWidth: newMaxWidth,
|
||||
responsiveWidth: newResponsiveWidth,
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
window.addEventListener('orientationchange', handleResize);
|
||||
window.addEventListener('resize', handleResize);
|
||||
window.addEventListener('orientationchange', handleResize);
|
||||
|
||||
let resizeObserver;
|
||||
if (window.ResizeObserver) {
|
||||
resizeObserver = new ResizeObserver(handleResize);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
let resizeObserver;
|
||||
if (window.ResizeObserver) {
|
||||
resizeObserver = new ResizeObserver(handleResize);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
let mutationObserver;
|
||||
if (window.MutationObserver) {
|
||||
mutationObserver = new MutationObserver(() => {
|
||||
setTimeout(handleResize, 50);
|
||||
});
|
||||
mutationObserver.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['style']
|
||||
});
|
||||
}
|
||||
let mutationObserver;
|
||||
if (window.MutationObserver) {
|
||||
mutationObserver = new MutationObserver(() => {
|
||||
setTimeout(handleResize, 50);
|
||||
});
|
||||
mutationObserver.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['style'],
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
if (resizeObserver) resizeObserver.disconnect();
|
||||
if (mutationObserver) mutationObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
if (resizeObserver) resizeObserver.disconnect();
|
||||
if (mutationObserver) mutationObserver.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return dimensions;
|
||||
return dimensions;
|
||||
};
|
||||
|
||||
const Editor = () => {
|
||||
const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
|
||||
const { maxWidth, responsiveWidth } = useResponsiveDimensions();
|
||||
const isBelowMinWidth = useViewportDetection(320);
|
||||
const { getSetting } = useLocalSettingsStore();
|
||||
|
||||
const handleEditClick = () => {
|
||||
setIsEditSidebarOpen(!isEditSidebarOpen)
|
||||
}
|
||||
const [isEditNavSidebarOpen, setIsEditNavSidebarOpen] = useState(false);
|
||||
const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false);
|
||||
const [isMuted, setIsMuted] = useState(true); // Video starts muted by default
|
||||
const { maxWidth, responsiveWidth } = useResponsiveDimensions();
|
||||
const isBelowMinWidth = useViewportDetection(320);
|
||||
|
||||
const handleCloseSidebar = () => {
|
||||
setIsEditSidebarOpen(false)
|
||||
}
|
||||
const handleEditNavClick = () => {
|
||||
setIsEditNavSidebarOpen(!isEditNavSidebarOpen);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="mx-auto min-h-screen flex flex-col relative space-y-2 py-4"
|
||||
style={{ width: `${responsiveWidth}px` }}
|
||||
>
|
||||
<EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />
|
||||
const handleEditNavClose = () => {
|
||||
setIsEditNavSidebarOpen(false);
|
||||
};
|
||||
|
||||
<EditorHeader className="mx-auto" style={{ width: `${responsiveWidth}px` }} />
|
||||
const handleEditClick = () => {
|
||||
setIsEditSidebarOpen(!isEditSidebarOpen);
|
||||
};
|
||||
|
||||
{isBelowMinWidth ? (
|
||||
<div className="aspect-[9/16]">
|
||||
<div className="flex-1 flex items-center justify-center p-6 bg-white h-full rounded-lg border shadow-lg ">
|
||||
const handleEditClose = () => {
|
||||
setIsEditSidebarOpen(false);
|
||||
};
|
||||
|
||||
<div>
|
||||
<video className="mx-auto" width="100" height="100%" src="https://cdn.memeaigen.com/videos/cat%20asking%20for%20food.webm" autoPlay muted loop />
|
||||
<div className="text-center">
|
||||
<div className="text-xl
|
||||
font-bold">YIKES 🥔</div>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||
You seem to be using a potato-sized screen. Please continue with desktop for a more refined experience!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<EditorCanvas maxWidth={maxWidth} />
|
||||
<EditorControls
|
||||
className="mx-auto"
|
||||
style={{ width: `${responsiveWidth}px` }}
|
||||
onEditClick={handleEditClick}
|
||||
isEditActive={isEditSidebarOpen}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// Toggle mute functionality
|
||||
const handleToggleMute = () => {
|
||||
setIsMuted(!isMuted);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative mx-auto flex min-h-screen flex-col space-y-2 py-4" style={{ width: `${responsiveWidth}px` }}>
|
||||
<EditSidebar isOpen={isEditSidebarOpen} onClose={handleEditClose} />
|
||||
<EditNavSidebar isOpen={isEditNavSidebarOpen} onClose={handleEditNavClose} />
|
||||
|
||||
<EditorHeader
|
||||
className="mx-auto"
|
||||
style={{ width: `${responsiveWidth}px` }}
|
||||
onNavClick={handleEditNavClick}
|
||||
isNavActive={isEditNavSidebarOpen}
|
||||
/>
|
||||
|
||||
{isBelowMinWidth ? (
|
||||
<div className="aspect-[9/16]">
|
||||
<div className="flex h-full flex-1 items-center justify-center rounded-lg border bg-white p-6 shadow-lg">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<div className="relative">
|
||||
<video
|
||||
className="mx-auto"
|
||||
width="100"
|
||||
height="100%"
|
||||
src="https://cdn.memeaigen.com/videos/cat%20asking%20for%20food.webm"
|
||||
autoPlay
|
||||
muted={isMuted}
|
||||
loop
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full space-y-2 text-center">
|
||||
<div className="text-xl font-bold">{getSetting('genAlphaSlang') ? 'SHEESH' : 'YIKES'} 🥔</div>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||
{getSetting('genAlphaSlang')
|
||||
? 'Not gonna lie, using on a potato screen is giving L vibes. Desktop hits different - that experience is straight fire, bet!'
|
||||
: 'You seem to be using a potato-sized screen. Please continue with desktop for a more refined experience!'}
|
||||
</p>
|
||||
<div class="text-muted-foreground text-xs italic">
|
||||
Note: You can turn {getSetting('genAlphaSlang') ? 'off' : 'on'} gen alpha slang in Settings.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full justify-center">
|
||||
<button
|
||||
onClick={handleToggleMute}
|
||||
className="bg-opacity-50 hover:bg-opacity-70 mx-auto rounded-full bg-black p-2 text-white transition-opacity"
|
||||
title={isMuted ? 'Unmute video' : 'Mute video'}
|
||||
>
|
||||
{isMuted ? <VolumeOffIcon className="h-4 w-4" /> : <Volume2Icon className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<EditorCanvas maxWidth={maxWidth} />
|
||||
<EditorControls
|
||||
className="mx-auto"
|
||||
style={{ width: `${responsiveWidth}px` }}
|
||||
onEditClick={handleEditClick}
|
||||
isEditActive={isEditSidebarOpen}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Editor;
|
||||
|
||||
59
resources/js/modules/editor/partials/edit-nav-sidebar.tsx
Normal file
59
resources/js/modules/editor/partials/edit-nav-sidebar.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import useLocalSettingsStore from '@/stores/localSettingsStore';
|
||||
import { SettingsIcon } from 'lucide-react';
|
||||
|
||||
interface EditNavSidebarProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function EditNavSidebar({ isOpen, onClose }: EditNavSidebarProps) {
|
||||
const { getSetting, setSetting } = useLocalSettingsStore();
|
||||
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent side="left" className="w-50 overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<div className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEAIGEN</div>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="link">
|
||||
<SettingsIcon className="h-6 w-6" /> Settings
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
<DialogDescription>Change your settings here.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="genAlphaSlang"
|
||||
checked={getSetting('genAlphaSlang')}
|
||||
onCheckedChange={() => setSetting('genAlphaSlang', !getSetting('genAlphaSlang'))}
|
||||
/>
|
||||
<label
|
||||
htmlFor="genAlphaSlang"
|
||||
className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Use gen alpha slang
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<DialogFooter></DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
@@ -1,138 +1,133 @@
|
||||
import { Edit3, Plus, Coins } from "lucide-react"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import { Coins, Edit3, Plus } from 'lucide-react';
|
||||
|
||||
interface EditSidebarProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent side="right" className="w-80 overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<Edit3 className="h-6 w-6" />
|
||||
Edit Media
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
return (
|
||||
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent side="right" className="w-80 overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-3">
|
||||
<Edit3 className="h-6 w-6" />
|
||||
Edit Media
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Background and Meme Selection */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="border-2 border-gray-300 rounded-lg p-3 text-center">
|
||||
<div className="w-full h-16 bg-blue-600 rounded mb-2 overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg?height=64&width=120"
|
||||
alt="Gaming background"
|
||||
width={120}
|
||||
height={64}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Background</span>
|
||||
</div>
|
||||
<div className="border-2 border-gray-300 rounded-lg p-3 text-center">
|
||||
<div className="w-full h-16 bg-gray-200 rounded mb-2 overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg?height=64&width=120"
|
||||
alt="Meme character"
|
||||
width={120}
|
||||
height={64}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Meme</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{/* Background and Meme Selection */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-lg border-2 border-gray-300 p-3 text-center">
|
||||
<div className="mb-2 h-16 w-full overflow-hidden rounded bg-blue-600">
|
||||
<img
|
||||
src="/placeholder.svg?height=64&width=120"
|
||||
alt="Gaming background"
|
||||
width={120}
|
||||
height={64}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Background</span>
|
||||
</div>
|
||||
<div className="rounded-lg border-2 border-gray-300 p-3 text-center">
|
||||
<div className="mb-2 h-16 w-full overflow-hidden rounded bg-gray-200">
|
||||
<img
|
||||
src="/placeholder.svg?height=64&width=120"
|
||||
alt="Meme character"
|
||||
width={120}
|
||||
height={64}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">Meme</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Background Search */}
|
||||
<div>
|
||||
<h3 className="text-lg font-medium mb-4">Search for backgrounds using AI</h3>
|
||||
{/* AI Background Search */}
|
||||
<div>
|
||||
<h3 className="mb-4 text-lg font-medium">Search for backgrounds using AI</h3>
|
||||
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center mb-4">
|
||||
<div className="w-12 h-12 border-2 border-gray-400 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Plus className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="text-sm font-medium mb-2">Generate a background with AI</p>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<span className="text-lg font-bold">1</span>
|
||||
<div className="w-5 h-5 bg-yellow-400 rounded-full flex items-center justify-center">
|
||||
<Coins className="h-3 w-3 text-yellow-800" />
|
||||
<div className="mb-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
|
||||
<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full border-2 border-gray-400">
|
||||
<Plus className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="mb-2 text-sm font-medium">Generate a background with AI</p>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<span className="text-lg font-bold">1</span>
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-yellow-400">
|
||||
<Coins className="h-3 w-3 text-yellow-800" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meme Templates Grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Creepy face meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Confused person meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute top-2 right-2 text-sm font-bold text-black">???</div>
|
||||
<div className="absolute bottom-2 left-2 text-sm font-bold text-black">???</div>
|
||||
</div>
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Woody meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Doge meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative aspect-square overflow-hidden rounded-lg bg-blue-900">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Stock market meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-blue-900/50">
|
||||
<span className="text-xs text-white">📈 28%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-square overflow-hidden rounded-lg bg-yellow-100">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Room meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meme Templates Grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Creepy face meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Confused person meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute top-2 right-2 text-black font-bold text-sm">???</div>
|
||||
<div className="absolute bottom-2 left-2 text-black font-bold text-sm">???</div>
|
||||
</div>
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Woody meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Doge meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="aspect-square bg-blue-900 rounded-lg overflow-hidden relative">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Stock market meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-blue-900/50 flex items-center justify-center">
|
||||
<span className="text-white text-xs">📈 28%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-square bg-yellow-100 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg?height=150&width=150"
|
||||
alt="Room meme"
|
||||
width={150}
|
||||
height={150}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +1,53 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { cn } from "@/lib/utils"
|
||||
import CoinIcon from "@/reusables/coin-icon"
|
||||
import { Menu, Coins } from "lucide-react"
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { cn } from '@/lib/utils';
|
||||
import CoinIcon from '@/reusables/coin-icon';
|
||||
import useLocalSettingsStore from '@/stores/localSettingsStore';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const EditorHeader = (
|
||||
{className = ''}
|
||||
) => {
|
||||
return (
|
||||
<div className={cn("bg-white rounded-xl p-2 flex items-center justify-between shadow-sm w-full", className)}>
|
||||
<Button variant="outline" size="icon" className="rounded">
|
||||
<Menu className="h-8 w-8" />
|
||||
</Button>
|
||||
const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = false }) => {
|
||||
const { getSetting } = useLocalSettingsStore();
|
||||
|
||||
<h1 className="text-lg md:text-xl font-display tracking-wide ml-0 md:ml-3">MEMEAIGEN</h1>
|
||||
const [openCoinDialog, setOpenCoinDialog] = useState(false);
|
||||
|
||||
<Button variant="outline" className="rounded inline-flex gap-1">
|
||||
<span className="text-sm font-semibold">100</span>
|
||||
<CoinIcon className="w-8 h-8" />
|
||||
</Button>
|
||||
return (
|
||||
<div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm', className)}>
|
||||
<Button onClick={onNavClick} variant="outline" size="icon" className="rounded">
|
||||
<Menu className="h-8 w-8" />
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<h1 className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEAIGEN</h1>
|
||||
|
||||
<Button variant="outline" className="inline-flex gap-1 rounded" onClick={() => setOpenCoinDialog(true)}>
|
||||
<span className="text-sm font-semibold">0</span>
|
||||
<CoinIcon className="h-8 w-8" />
|
||||
</Button>
|
||||
|
||||
<Dialog open={openCoinDialog} onOpenChange={(open) => setOpenCoinDialog(open)}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{getSetting('genAlphaSlang') ? 'Bruh' : 'Chill'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{getSetting('genAlphaSlang')
|
||||
? "No cap, soon you'll be able to get AI cooking memes that absolutely slay! But lowkey fam, we gotta focus on making these core features bussin' first."
|
||||
: "Soon you'll be able to prompt AI to generate memes! Let us focus on nailing the core features first."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<div className="flex justify-between gap-1">
|
||||
<span class="text-muted-foreground text-xs italic">
|
||||
Note: You can turn {getSetting('genAlphaSlang') ? 'off' : 'on'} gen alpha slang in Settings.
|
||||
</span>
|
||||
<Button variant="outline" onClick={() => setOpenCoinDialog(false)}>
|
||||
{getSetting('genAlphaSlang') ? 'Bet' : 'Okay'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditorHeader;
|
||||
|
||||
Reference in New Issue
Block a user