fork/inke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

release 0.3.4

Browse Source
This commit is contained in:
songjunxi
2023-11-10 14:59:47 +08:00
parent 2b456637e9
commit 602f2059fd
161 changed files with 9921 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
apps/web/ui/menu.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { AppContext } from "@/app/providers";
import {
Popover,
PopoverTrigger,
@@ -8,23 +9,34 @@ import {
// import { useContext } from "react";
// import { AppContext } from "../app/providers";
// import { FontDefault, FontSerif, FontMono } from "@/ui/icons";
import { Check, Menu as MenuIcon, Monitor, Moon, SunDim } from "lucide-react";
import {
Check,
FileJson,
FileText,
Menu as MenuIcon,
Monitor,
Moon,
SunDim,
} from "lucide-react";
import { useTheme } from "next-themes";
import { useContext, useState } from "react";
import { FontDefault, FontMono, FontSerif } from "./shared/icons";
import ImageDown from "./shared/icons/image-down";
// const fonts = [
// {
// font: "Default",
// icon: <FontDefault className="h-4 w-4" />,
// },
// {
// font: "Serif",
// icon: <FontSerif className="h-4 w-4" />,
// },
// {
// font: "Mono",
// icon: <FontMono className="h-4 w-4" />,
// },
// ];
const fonts = [
{
font: "Default",
icon: <FontDefault className="h-4 w-4" />,
},
{
font: "Serif",
icon: <FontSerif className="h-4 w-4" />,
},
{
font: "Mono",
icon: <FontMono className="h-4 w-4" />,
},
];
const appearances = [
{
theme: "System",
@@ -40,38 +52,63 @@ const appearances = [
},
];
export default function Menu() {
export default function Menu({
onExportImage,
onExportJson,
onExportTxT,
onExportPDF,
}: {
onExportImage: () => void;
onExportJson: () => void;
onExportTxT: () => void;
onExportPDF: () => void;
}) {
// const { font: currentFont, setFont } = useContext(AppContext);
const { theme: currentTheme, setTheme } = useTheme();
return (
<Popover>
<PopoverTrigger className="absolute bottom-5 right-5 z-10 flex h-8 w-8 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-stone-100 active:bg-stone-200 sm:bottom-auto sm:top-5">
<PopoverTrigger className="z-10 flex h-8 w-8 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-stone-100 active:bg-stone-200">
<MenuIcon className="text-stone-600" width={16} />
</PopoverTrigger>
<PopoverContent className="w-52 divide-y divide-stone-200" align="end">
{/* <div className="p-2">
<p className="p-2 text-xs font-medium text-stone-500">Font</p>
{fonts.map(({ font, icon }) => (
<button
key={font}
className="flex w-full items-center justify-between rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
onClick={() => {
setFont(font);
}}
>
<div className="flex items-center space-x-2">
<div className="rounded-sm border border-stone-200 p-1">
{icon}
</div>
<span>{font}</span>
</div>
{currentFont === font && <Check className="h-4 w-4" />}
</button>
))}
</div> */}
<div className="p-2">
<p className="p-2 text-xs font-medium text-stone-500">Appearance</p>
<p className="p-2 text-xs font-medium text-stone-500">Exports file</p>
<button
className="flex w-full items-center gap-3 rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
onClick={() => {
onExportImage();
}}
>
<ImageDown className="h-6 w-6 rounded-sm border border-stone-100 p-1" />
<span>Export as Image</span>
</button>
<button
className="flex w-full items-center gap-3 rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
onClick={onExportTxT}
>
<FileText className="h-6 w-6 rounded-sm border border-stone-100 p-1" />
<span>Export as Markdown</span>
</button>
<button
className="flex w-full items-center gap-3 rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
onClick={onExportJson}
>
<FileJson className="h-6 w-6 rounded-sm border border-stone-100 p-1" />
<span>Export as JSON</span>
</button>
<button
className="flex w-full items-center gap-3 rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
onClick={onExportPDF}
>
<FileJson className="h-6 w-6 rounded-sm border border-stone-100 p-1" />
<span>Export as PDF</span>
</button>
</div>
<div className="p-2">
<div className="p-2 text-xs font-medium text-stone-500">Themes</div>
{appearances.map(({ theme, icon }) => (
<button
key={theme}
@@ -81,7 +118,7 @@ export default function Menu() {
}}
>
<div className="flex items-center space-x-2">
<div className="rounded-sm border border-stone-200 p-1">
<div className="rounded-sm border border-stone-100 p-1">
{icon}
</div>
<span>{theme}</span>