rome -> eslint + prettier
This commit is contained in:
Ren Amamiya
@@ -1,84 +1,89 @@
|
||||
import { EyeOffIcon, EyeOnIcon } from "@shared/icons";
|
||||
import { useAccount } from "@utils/hooks/useAccount";
|
||||
import { useState } from "react";
|
||||
import { useState } from 'react';
|
||||
|
||||
import { EyeOffIcon, EyeOnIcon } from '@shared/icons';
|
||||
|
||||
import { useAccount } from '@utils/hooks/useAccount';
|
||||
|
||||
export function AccountSettingsScreen() {
|
||||
const { status, account } = useAccount();
|
||||
const [type, setType] = useState("password");
|
||||
const { status, account } = useAccount();
|
||||
const [type, setType] = useState('password');
|
||||
|
||||
const showPrivateKey = () => {
|
||||
if (type === "password") {
|
||||
setType("text");
|
||||
} else {
|
||||
setType("password");
|
||||
}
|
||||
};
|
||||
const showPrivateKey = () => {
|
||||
if (type === 'password') {
|
||||
setType('text');
|
||||
} else {
|
||||
setType('password');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-zinc-100">Account</h1>
|
||||
<div className="">
|
||||
{status === "loading" ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-base font-semibold text-zinc-400">
|
||||
Public Key
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={account.pubkey}
|
||||
className="relative w-2/3 rounded-lg py-3 pl-3.5 pr-11 !outline-none placeholder:text-zinc-400 bg-zinc-800 text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-base font-semibold text-zinc-400">
|
||||
Npub
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={account.npub}
|
||||
className="relative w-2/3 rounded-lg py-3 pl-3.5 pr-11 !outline-none placeholder:text-zinc-400 bg-zinc-800 text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-base font-semibold text-zinc-400">
|
||||
Private Key
|
||||
</label>
|
||||
<div className="relative w-2/3">
|
||||
<input
|
||||
readOnly
|
||||
type={type}
|
||||
value={account.privkey}
|
||||
className="relative w-full rounded-lg py-3 pl-3.5 pr-11 !outline-none placeholder:text-zinc-400 bg-zinc-800 text-zinc-100"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPrivateKey()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
|
||||
>
|
||||
{type === "password" ? (
|
||||
<EyeOffIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-zinc-500 group-hover:text-zinc-100"
|
||||
/>
|
||||
) : (
|
||||
<EyeOnIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-zinc-500 group-hover:text-zinc-100"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-zinc-100">Account</h1>
|
||||
<div className="">
|
||||
{status === 'loading' ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="pubkey" className="text-base font-semibold text-zinc-400">
|
||||
Public Key
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={account.pubkey}
|
||||
className="relative w-2/3 rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label htmlFor="npub" className="text-base font-semibold text-zinc-400">
|
||||
Npub
|
||||
</label>
|
||||
<input
|
||||
readOnly
|
||||
value={account.npub}
|
||||
className="relative w-2/3 rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label
|
||||
htmlFor="privkey"
|
||||
className="text-base font-semibold text-zinc-400"
|
||||
>
|
||||
Private Key
|
||||
</label>
|
||||
<div className="relative w-2/3">
|
||||
<input
|
||||
readOnly
|
||||
type={type}
|
||||
value={account.privkey}
|
||||
className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => showPrivateKey()}
|
||||
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
|
||||
>
|
||||
{type === 'password' ? (
|
||||
<EyeOffIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-zinc-500 group-hover:text-zinc-100"
|
||||
/>
|
||||
) : (
|
||||
<EyeOnIcon
|
||||
width={20}
|
||||
height={20}
|
||||
className="text-zinc-500 group-hover:text-zinc-100"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,61 +1,58 @@
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { getSetting, updateSetting } from "@libs/storage";
|
||||
import { useEffect, useState } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { disable, enable, isEnabled } from "tauri-plugin-autostart-api";
|
||||
import { Switch } from '@headlessui/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { disable, enable, isEnabled } from 'tauri-plugin-autostart-api';
|
||||
|
||||
import { getSetting, updateSetting } from '@libs/storage';
|
||||
|
||||
export function AutoStartSetting() {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
const toggle = async () => {
|
||||
if (!enabled) {
|
||||
await enable();
|
||||
await updateSetting("auto_start", 1);
|
||||
console.log(`registered for autostart? ${await isEnabled()}`);
|
||||
} else {
|
||||
await disable();
|
||||
await updateSetting("auto_start", 0);
|
||||
}
|
||||
setEnabled(!enabled);
|
||||
};
|
||||
const toggle = async () => {
|
||||
if (!enabled) {
|
||||
await enable();
|
||||
await updateSetting('auto_start', 1);
|
||||
console.log(`registered for autostart? ${await isEnabled()}`);
|
||||
} else {
|
||||
await disable();
|
||||
await updateSetting('auto_start', 0);
|
||||
}
|
||||
setEnabled(!enabled);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function getAppSetting() {
|
||||
const setting = await getSetting("auto_start");
|
||||
if (parseInt(setting) === 0) {
|
||||
setEnabled(false);
|
||||
} else {
|
||||
setEnabled(true);
|
||||
}
|
||||
}
|
||||
getAppSetting();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
async function getAppSetting() {
|
||||
const setting = await getSetting('auto_start');
|
||||
if (parseInt(setting) === 0) {
|
||||
setEnabled(false);
|
||||
} else {
|
||||
setEnabled(true);
|
||||
}
|
||||
}
|
||||
getAppSetting();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Auto start
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Auto start at login
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={toggle}
|
||||
className={twMerge(
|
||||
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2",
|
||||
enabled ? "bg-fuchsia-500" : "bg-zinc-700",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={twMerge(
|
||||
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow ring-0 transition duration-200 ease-in-out",
|
||||
enabled ? "translate-x-5" : "translate-x-0",
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">Auto start</span>
|
||||
<span className="text-sm leading-none text-zinc-400">Auto start at login</span>
|
||||
</div>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={toggle}
|
||||
className={twMerge(
|
||||
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2',
|
||||
enabled ? 'bg-fuchsia-500' : 'bg-zinc-700'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={twMerge(
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-zinc-900 shadow ring-0 transition duration-200 ease-in-out',
|
||||
enabled ? 'translate-x-5' : 'translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
import { getSetting, updateSetting } from "@libs/storage";
|
||||
import { CheckCircleIcon } from "@shared/icons";
|
||||
import { useState } from "react";
|
||||
import { useState } from 'react';
|
||||
|
||||
const setting = await getSetting("cache_time");
|
||||
import { getSetting, updateSetting } from '@libs/storage';
|
||||
|
||||
import { CheckCircleIcon } from '@shared/icons';
|
||||
|
||||
const setting = await getSetting('cache_time');
|
||||
const cacheTime = setting;
|
||||
|
||||
export function CacheTimeSetting() {
|
||||
const [time, setTime] = useState(cacheTime);
|
||||
const [time, setTime] = useState(cacheTime);
|
||||
|
||||
const update = async () => {
|
||||
await updateSetting("cache_time", time);
|
||||
};
|
||||
const update = async () => {
|
||||
await updateSetting('cache_time', time);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Cache time
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
The length of time before inactive data gets removed from the cache
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<input
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.currentTarget.value)}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="none"
|
||||
className="w-24 h-8 rounded-md px-2 bg-zinc-800 text-zinc-300 text-right font-medium focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => update()}
|
||||
className="w-8 h-8 inline-flex items-center justify-center font-medium bg-zinc-800 hover:bg-fuchsia-500 rounded-md"
|
||||
>
|
||||
<CheckCircleIcon className="w-4 h-4 text-zinc-100" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">Cache time</span>
|
||||
<span className="text-sm leading-none text-zinc-400">
|
||||
The length of time before inactive data gets removed from the cache
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<input
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.currentTarget.value)}
|
||||
autoCapitalize="none"
|
||||
autoCorrect="none"
|
||||
className="h-8 w-24 rounded-md bg-zinc-800 px-2 text-right font-medium text-zinc-300 focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => update()}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
<CheckCircleIcon className="h-4 w-4 text-zinc-100" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +1,27 @@
|
||||
import { RefreshIcon } from "@shared/icons";
|
||||
import { getVersion } from "@tauri-apps/api/app";
|
||||
import { getVersion } from '@tauri-apps/api/app';
|
||||
|
||||
import { RefreshIcon } from '@shared/icons';
|
||||
|
||||
const appVersion = await getVersion();
|
||||
|
||||
export function VersionSetting() {
|
||||
return (
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">Version</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
You're using latest version
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="text-zinc-300 font-medium">{appVersion}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="w-8 h-8 inline-flex items-center justify-center font-medium bg-zinc-800 hover:bg-fuchsia-500 rounded-md"
|
||||
>
|
||||
<RefreshIcon className="w-4 h-4 text-zinc-100" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">Version</span>
|
||||
<span className="text-sm leading-none text-zinc-400">
|
||||
You're using latest version
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="font-medium text-zinc-300">{appVersion}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-fuchsia-500"
|
||||
>
|
||||
<RefreshIcon className="h-4 w-4 text-zinc-100" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import { AutoStartSetting } from "@app/settings/components/autoStart";
|
||||
import { CacheTimeSetting } from "@app/settings/components/cacheTime";
|
||||
import { VersionSetting } from "@app/settings/components/version";
|
||||
import { AutoStartSetting } from '@app/settings/components/autoStart';
|
||||
import { CacheTimeSetting } from '@app/settings/components/cacheTime';
|
||||
import { VersionSetting } from '@app/settings/components/version';
|
||||
|
||||
export function GeneralSettingsScreen() {
|
||||
return (
|
||||
<div className="w-full h-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-zinc-100">General</h1>
|
||||
<div className="w-full bg-zinc-900 border-t border-zinc-800/50 rounded-xl">
|
||||
<div className="w-full h-full flex flex-col divide-y divide-zinc-800">
|
||||
<AutoStartSetting />
|
||||
<CacheTimeSetting />
|
||||
<VersionSetting />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-zinc-100">General</h1>
|
||||
<div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-zinc-800">
|
||||
<AutoStartSetting />
|
||||
<CacheTimeSetting />
|
||||
<VersionSetting />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,110 +1,90 @@
|
||||
import { CommandIcon } from "@shared/icons";
|
||||
import { CommandIcon } from '@shared/icons';
|
||||
|
||||
export function ShortcutsSettingsScreen() {
|
||||
return (
|
||||
<div className="w-full h-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-zinc-100">Shortcuts</h1>
|
||||
<div className="w-full bg-zinc-900 border-t border-zinc-800/50 rounded-xl">
|
||||
<div className="w-full h-full flex flex-col divide-y divide-zinc-800">
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Open composer
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-zinc-500 text-sm leading-none">N</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Add image block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-zinc-500 text-sm leading-none">I</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Add newsfeed block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-zinc-500 text-sm leading-none">F</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Open personal page
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-zinc-500 text-sm leading-none">P</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-5 py-4 inline-flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="leading-none font-medium text-zinc-200">
|
||||
Open notification
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon
|
||||
width={12}
|
||||
height={12}
|
||||
className="text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-zinc-500 text-sm leading-none">B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="h-full w-full px-3 pt-12">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-lg font-semibold text-zinc-100">Shortcuts</h1>
|
||||
<div className="w-full rounded-xl border-t border-zinc-800/50 bg-zinc-900">
|
||||
<div className="flex h-full w-full flex-col divide-y divide-zinc-800">
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">
|
||||
Open composer
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-sm leading-none text-zinc-500">N</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">
|
||||
Add image block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-sm leading-none text-zinc-500">I</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">
|
||||
Add newsfeed block
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-sm leading-none text-zinc-500">F</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">
|
||||
Open personal page
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-sm leading-none text-zinc-500">P</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-between px-5 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-medium leading-none text-zinc-200">
|
||||
Open notification
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<CommandIcon width={12} height={12} className="text-zinc-500" />
|
||||
</div>
|
||||
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-700/50 bg-zinc-800">
|
||||
<span className="text-sm leading-none text-zinc-500">B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user