External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: re-design export button (design credit: @AdamBartas on twitter)

Browse Source
This commit is contained in:
Maze Winther
2025-08-05 15:03:38 +02:00
parent 4f6d014286
commit f8724851fd
2 changed files with 64 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor-header.tsx
+26 -15
View File
@@ -29,6 +29,7 @@ import { useRouter } from "next/navigation";
import { FaDiscord } from "react-icons/fa6";
import { useTheme } from "next-themes";
import { usePlaybackStore } from "@/stores/playback-store";
import { TransitionUpIcon } from "./icons";
export function EditorHeader() {
const { getTotalDuration } = useTimelineStore();
@@ -39,13 +40,6 @@ export function EditorHeader() {
const router = useRouter();
const { theme, setTheme } = useTheme();
const handleExport = () => {
// TODO: Implement export functionality
// NOTE: This is already being worked on
console.log("Export project");
window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
};
const handleNameSave = async (newName: string) => {
console.log("handleNameSave", newName);
if (activeProject && newName.trim() && newName !== activeProject.name) {
@@ -148,14 +142,7 @@ export function EditorHeader() {
const rightContent = (
<nav className="flex items-center gap-2">
<KeyboardShortcutsHelp />
<Button
size="sm"
className="h-8 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
onClick={handleExport}
>
<Download className="h-4 w-4" />
<span className="text-sm pr-1">Export</span>
</Button>
<ExportButton />
<Button
size="icon"
variant="text"
@@ -177,3 +164,27 @@ export function EditorHeader() {
/>
);
}
function ExportButton() {
const handleExport = () => {
// TODO: Implement export functionality
// NOTE: This is already being worked on
console.log("Export project");
window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
};
return (
<button
className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.1rem] py-[0.1rem] cursor-pointer hover:brightness-95 transition-all duration-200"
onClick={handleExport}
>
<div className="flex items-center gap-1.5 bg-linear-270 from-[#37B6F7] to-[#2567EC] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.45)]">
<TransitionUpIcon className="z-50" />
<span className="text-[0.875rem] z-50">Export</span>
<div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
<div className="absolute w-[calc(100%-6px)] h-[calc(100%-4px)] top-0.5 bg-linear-270 from-[#37B6F7] to-[#2567EC] z-50 rounded-lg"></div>
</div>
</div>
</button>
);
}