mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 12:13:27 +00:00
server start, landing tweaks
This commit is contained in:
Jamie Pine
parent
92eb6da26a
commit
4c4325619f
8
Cargo.lock
generated
8
Cargo.lock
generated
|
|
@ -7044,6 +7044,14 @@ dependencies = [
|
|||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "server"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"sdcore",
|
||||
"tokio",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "servo_arc"
|
||||
version = "0.1.1"
|
||||
|
|
|
|||
|
|
@ -4,5 +4,6 @@ members = [
|
|||
"apps/desktop/src-tauri",
|
||||
"core",
|
||||
"core/prisma",
|
||||
"core/derive"
|
||||
"core/derive",
|
||||
"apps/server"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ function App() {
|
|||
<NavBar />
|
||||
<div className="container z-10 flex flex-col items-center px-4 mx-auto text-white bg-black">
|
||||
{/* <AppLogo className="z-30 w-40 h-40 mt-32" /> */}
|
||||
<h1 className="text-6xl font-black mt-36">The file explorer from the future</h1>
|
||||
<h1 className="text-4xl font-black leading-snug text-center md:text-6xl mt-36">
|
||||
The file explorer from the future
|
||||
</h1>
|
||||
<p className="max-w-5xl mt-1 mb-8 text-lg text-center text-gray-450">
|
||||
Spacedrive is the first file explorer that puts the full power of the cloud in your hands.
|
||||
</p>
|
||||
|
|
@ -21,11 +23,11 @@ function App() {
|
|||
{/* <Button className="px-2">
|
||||
<WindowsLogo className="" fill="white" />
|
||||
</Button> */}
|
||||
<Button variant="primary">
|
||||
<Button className="cursor-pointer" variant="primary">
|
||||
<AppleLogo className="inline -mt-[3px] mr-1.5" fill="white" />
|
||||
Download
|
||||
</Button>
|
||||
<Button variant="gray">
|
||||
<Button className="cursor-pointer" variant="gray">
|
||||
<GithubLogo className="inline -mt-[3px] mr-1.5" fill="white" />
|
||||
Star on GitHub
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default function NavBar() {
|
|||
<div className="container flex items-center h-full m-auto ">
|
||||
<AppLogo className="z-30 w-8 h-8 mr-3" />
|
||||
<h3 className="text-xl font-bold text-white">
|
||||
Memes
|
||||
Spacedrive
|
||||
<span className="ml-2 text-xs text-gray-400 uppercase">BETA</span>
|
||||
</h3>
|
||||
|
||||
|
|
|
|||
10
apps/server/Cargo.toml
Normal file
10
apps/server/Cargo.toml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
[package]
|
||||
name = "server"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
sdcore = { path = "../../core" }
|
||||
tokio = "1.17.0"
|
||||
23
apps/server/src/main.rs
Normal file
23
apps/server/src/main.rs
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
use sdcore::Core;
|
||||
use std::{env, path::Path};
|
||||
|
||||
#[tokio::main]
|
||||
async fn main() {
|
||||
let data_dir_var = "DATA_DIR";
|
||||
let data_dir = match env::var(data_dir_var) {
|
||||
Ok(path) => path,
|
||||
Err(e) => panic!("${} is not set ({})", data_dir_var, e),
|
||||
};
|
||||
|
||||
let data_dir_path = Path::new(&data_dir);
|
||||
|
||||
let (mut core, mut event_receiver) = Core::new(data_dir_path.to_path_buf()).await;
|
||||
|
||||
core.initializer().await;
|
||||
|
||||
let controller = core.get_controller();
|
||||
|
||||
tokio::spawn(async move {
|
||||
core.start().await;
|
||||
});
|
||||
}
|
||||
|
|
@ -1,348 +0,0 @@
|
|||
import { ReactComponent as Ai } from './ai.svg';
|
||||
import { ReactComponent as Angular } from './angular.svg';
|
||||
import { ReactComponent as Audio } from './audio.svg';
|
||||
import { ReactComponent as Audiomp3 } from './audiomp3.svg';
|
||||
import { ReactComponent as Audioogg } from './audioogg.svg';
|
||||
import { ReactComponent as Audiowav } from './audiowav.svg';
|
||||
import { ReactComponent as Babel } from './babel.svg';
|
||||
import { ReactComponent as Bat } from './bat.svg';
|
||||
import { ReactComponent as Bicep } from './bicep.svg';
|
||||
import { ReactComponent as Binary } from './binary.svg';
|
||||
import { ReactComponent as Blade } from './blade.svg';
|
||||
import { ReactComponent as Browserslist } from './browserslist.svg';
|
||||
import { ReactComponent as Bsconfig } from './bsconfig.svg';
|
||||
import { ReactComponent as Bundler } from './bundler.svg';
|
||||
import { ReactComponent as C } from './c.svg';
|
||||
import { ReactComponent as Cert } from './cert.svg';
|
||||
import { ReactComponent as Cheader } from './cheader.svg';
|
||||
import { ReactComponent as Cli } from './cli.svg';
|
||||
import { ReactComponent as Compodoc } from './compodoc.svg';
|
||||
import { ReactComponent as Composer } from './composer.svg';
|
||||
import { ReactComponent as Conf } from './conf.svg';
|
||||
import { ReactComponent as Cpp } from './cpp.svg';
|
||||
import { ReactComponent as Csharp } from './csharp.svg';
|
||||
import { ReactComponent as Cshtml } from './cshtml.svg';
|
||||
import { ReactComponent as Css } from './css.svg';
|
||||
import { ReactComponent as Cssmap } from './cssmap.svg';
|
||||
import { ReactComponent as Csv } from './csv.svg';
|
||||
import { ReactComponent as Dartlang } from './dartlang.svg';
|
||||
import { ReactComponent as Docker } from './docker.svg';
|
||||
import { ReactComponent as Dockerdebug } from './dockerdebug.svg';
|
||||
import { ReactComponent as Dockerignore } from './dockerignore.svg';
|
||||
import { ReactComponent as Editorconfig } from './editorconfig.svg';
|
||||
import { ReactComponent as Eex } from './eex.svg';
|
||||
import { ReactComponent as Elixir } from './elixir.svg';
|
||||
import { ReactComponent as Elm } from './elm.svg';
|
||||
import { ReactComponent as Env } from './env.svg';
|
||||
import { ReactComponent as Erb } from './erb.svg';
|
||||
import { ReactComponent as Erlang } from './erlang.svg';
|
||||
import { ReactComponent as Eslint } from './eslint.svg';
|
||||
import { ReactComponent as Exs } from './exs.svg';
|
||||
import { ReactComponent as Exx } from './exx.svg';
|
||||
import { ReactComponent as File } from './file.svg';
|
||||
import { ReactComponent as Folder } from './folder.svg';
|
||||
import { ReactComponent as Folder_light } from './folder_light.svg';
|
||||
import { ReactComponent as Folder_open } from './folder_open.svg';
|
||||
import { ReactComponent as Fontotf } from './fontotf.svg';
|
||||
import { ReactComponent as Fontttf } from './fontttf.svg';
|
||||
import { ReactComponent as Fontwoff } from './fontwoff.svg';
|
||||
import { ReactComponent as Fontwoff2 } from './fontwoff2.svg';
|
||||
import { ReactComponent as Git } from './git.svg';
|
||||
import { ReactComponent as Go } from './go.svg';
|
||||
import { ReactComponent as Gopackage } from './gopackage.svg';
|
||||
import { ReactComponent as Gradle } from './gradle.svg';
|
||||
import { ReactComponent as Graphql } from './graphql.svg';
|
||||
import { ReactComponent as Groovy } from './groovy.svg';
|
||||
import { ReactComponent as Grunt } from './grunt.svg';
|
||||
import { ReactComponent as Gulp } from './gulp.svg';
|
||||
import { ReactComponent as Haml } from './haml.svg';
|
||||
import { ReactComponent as Handlebars } from './handlebars.svg';
|
||||
import { ReactComponent as Haskell } from './haskell.svg';
|
||||
import { ReactComponent as Html } from './html.svg';
|
||||
import { ReactComponent as Image } from './image.svg';
|
||||
import { ReactComponent as Imagegif } from './imagegif.svg';
|
||||
import { ReactComponent as Imageico } from './imageico.svg';
|
||||
import { ReactComponent as Imagejpg } from './imagejpg.svg';
|
||||
import { ReactComponent as Imagepng } from './imagepng.svg';
|
||||
import { ReactComponent as Imagewebp } from './imagewebp.svg';
|
||||
import { ReactComponent as Info } from './info.svg';
|
||||
import { ReactComponent as Ipynb } from './ipynb.svg';
|
||||
import { ReactComponent as Java } from './java.svg';
|
||||
import { ReactComponent as Jenkins } from './jenkins.svg';
|
||||
import { ReactComponent as Jest } from './jest.svg';
|
||||
import { ReactComponent as Jinja } from './jinja.svg';
|
||||
import { ReactComponent as Js } from './js.svg';
|
||||
import { ReactComponent as Jsmap } from './jsmap.svg';
|
||||
import { ReactComponent as Json } from './json.svg';
|
||||
import { ReactComponent as Jsp } from './jsp.svg';
|
||||
import { ReactComponent as Julia } from './julia.svg';
|
||||
import { ReactComponent as Karma } from './karma.svg';
|
||||
import { ReactComponent as Key } from './key.svg';
|
||||
import { ReactComponent as Less } from './less.svg';
|
||||
import { ReactComponent as License } from './license.svg';
|
||||
import { ReactComponent as Lighteditorconfig } from './lighteditorconfig.svg';
|
||||
import { ReactComponent as Liquid } from './liquid.svg';
|
||||
import { ReactComponent as Llvm } from './llvm.svg';
|
||||
import { ReactComponent as Log } from './log.svg';
|
||||
import { ReactComponent as Lua } from './lua.svg';
|
||||
import { ReactComponent as M } from './m.svg';
|
||||
import { ReactComponent as Markdown } from './markdown.svg';
|
||||
import { ReactComponent as Mint } from './mint.svg';
|
||||
import { ReactComponent as Mov } from './mov.svg';
|
||||
import { ReactComponent as Mp4 } from './mp4.svg';
|
||||
import { ReactComponent as Nestjs } from './nestjs.svg';
|
||||
import { ReactComponent as Nestjscontroller } from './nestjscontroller.svg';
|
||||
import { ReactComponent as Nestjsdecorator } from './nestjsdecorator.svg';
|
||||
import { ReactComponent as Nestjsfilter } from './nestjsfilter.svg';
|
||||
import { ReactComponent as Nestjsguard } from './nestjsguard.svg';
|
||||
import { ReactComponent as Nestjsmodule } from './nestjsmodule.svg';
|
||||
import { ReactComponent as Nestjsservice } from './nestjsservice.svg';
|
||||
import { ReactComponent as Netlify } from './netlify.svg';
|
||||
import { ReactComponent as Nginx } from './nginx.svg';
|
||||
import { ReactComponent as Nim } from './nim.svg';
|
||||
import { ReactComponent as Njk } from './njk.svg';
|
||||
import { ReactComponent as Nodemon } from './nodemon.svg';
|
||||
import { ReactComponent as Npm } from './npm.svg';
|
||||
import { ReactComponent as Npmlock } from './npmlock.svg';
|
||||
import { ReactComponent as Nuxt } from './nuxt.svg';
|
||||
import { ReactComponent as Nvm } from './nvm.svg';
|
||||
import { ReactComponent as Opengl } from './opengl.svg';
|
||||
import { ReactComponent as Pdf } from './pdf.svg';
|
||||
import { ReactComponent as Photoshop } from './photoshop.svg';
|
||||
import { ReactComponent as Php } from './php.svg';
|
||||
import { ReactComponent as Postcssconfig } from './postcssconfig.svg';
|
||||
import { ReactComponent as Powershell } from './powershell.svg';
|
||||
import { ReactComponent as Powershelldata } from './powershelldata.svg';
|
||||
import { ReactComponent as Powershellmodule } from './powershellmodule.svg';
|
||||
import { ReactComponent as Prettier } from './prettier.svg';
|
||||
import { ReactComponent as Prisma } from './prisma.svg';
|
||||
import { ReactComponent as Prolog } from './prolog.svg';
|
||||
import { ReactComponent as Pug } from './pug.svg';
|
||||
import { ReactComponent as Python } from './python.svg';
|
||||
import { ReactComponent as Qt } from './qt.svg';
|
||||
import { ReactComponent as Razor } from './razor.svg';
|
||||
import { ReactComponent as Reactjs } from './reactjs.svg';
|
||||
import { ReactComponent as Reactts } from './reactts.svg';
|
||||
import { ReactComponent as Readme } from './readme.svg';
|
||||
import { ReactComponent as Rescript } from './rescript.svg';
|
||||
import { ReactComponent as Rjson } from './rjson.svg';
|
||||
import { ReactComponent as Robots } from './robots.svg';
|
||||
import { ReactComponent as Rollup } from './rollup.svg';
|
||||
import { ReactComponent as Ruby } from './ruby.svg';
|
||||
import { ReactComponent as Rust } from './rust.svg';
|
||||
import { ReactComponent as Sass } from './sass.svg';
|
||||
import { ReactComponent as Scss } from './scss.svg';
|
||||
import { ReactComponent as Shell } from './shell.svg';
|
||||
import { ReactComponent as Smarty } from './smarty.svg';
|
||||
import { ReactComponent as Sol } from './sol.svg';
|
||||
import { ReactComponent as Sql } from './sql.svg';
|
||||
import { ReactComponent as Storybook } from './storybook.svg';
|
||||
import { ReactComponent as Stylelint } from './stylelint.svg';
|
||||
import { ReactComponent as Stylus } from './stylus.svg';
|
||||
import { ReactComponent as Svelte } from './svelte.svg';
|
||||
import { ReactComponent as Svg } from './svg.svg';
|
||||
import { ReactComponent as Swift } from './swift.svg';
|
||||
import { ReactComponent as Symfony } from './symfony.svg';
|
||||
import { ReactComponent as Tailwind } from './tailwind.svg';
|
||||
import { ReactComponent as Testjs } from './testjs.svg';
|
||||
import { ReactComponent as Testts } from './testts.svg';
|
||||
import { ReactComponent as Tmpl } from './tmpl.svg';
|
||||
import { ReactComponent as Toml } from './toml.svg';
|
||||
import { ReactComponent as Travis } from './travis.svg';
|
||||
import { ReactComponent as Tsconfig } from './tsconfig.svg';
|
||||
import { ReactComponent as Tsx } from './tsx.svg';
|
||||
import { ReactComponent as Twig } from './twig.svg';
|
||||
import { ReactComponent as Txt } from './txt.svg';
|
||||
import { ReactComponent as Typescript } from './typescript.svg';
|
||||
import { ReactComponent as Typescriptdef } from './typescriptdef.svg';
|
||||
import { ReactComponent as Ui } from './ui.svg';
|
||||
import { ReactComponent as User } from './user.svg';
|
||||
import { ReactComponent as Vercel } from './vercel.svg';
|
||||
import { ReactComponent as Video } from './video.svg';
|
||||
import { ReactComponent as Vite } from './vite.svg';
|
||||
import { ReactComponent as Vscode } from './vscode.svg';
|
||||
import { ReactComponent as Vue } from './vue.svg';
|
||||
import { ReactComponent as Wasm } from './wasm.svg';
|
||||
import { ReactComponent as Webpack } from './webpack.svg';
|
||||
import { ReactComponent as Windi } from './windi.svg';
|
||||
import { ReactComponent as Xml } from './xml.svg';
|
||||
import { ReactComponent as Yaml } from './yaml.svg';
|
||||
import { ReactComponent as Yarn } from './yarn.svg';
|
||||
import { ReactComponent as Yarnerror } from './yarnerror.svg';
|
||||
import { ReactComponent as Zip } from './zip.svg';
|
||||
|
||||
|
||||
export default {
|
||||
ai: Ai,
|
||||
angular: Angular,
|
||||
audio: Audio,
|
||||
audiomp3: Audiomp3,
|
||||
audioogg: Audioogg,
|
||||
audiowav: Audiowav,
|
||||
babel: Babel,
|
||||
bat: Bat,
|
||||
bicep: Bicep,
|
||||
binary: Binary,
|
||||
blade: Blade,
|
||||
browserslist: Browserslist,
|
||||
bsconfig: Bsconfig,
|
||||
bundler: Bundler,
|
||||
c: C,
|
||||
cert: Cert,
|
||||
cheader: Cheader,
|
||||
cli: Cli,
|
||||
compodoc: Compodoc,
|
||||
composer: Composer,
|
||||
conf: Conf,
|
||||
cpp: Cpp,
|
||||
csharp: Csharp,
|
||||
cshtml: Cshtml,
|
||||
css: Css,
|
||||
cssmap: Cssmap,
|
||||
csv: Csv,
|
||||
dartlang: Dartlang,
|
||||
docker: Docker,
|
||||
dockerdebug: Dockerdebug,
|
||||
dockerignore: Dockerignore,
|
||||
editorconfig: Editorconfig,
|
||||
eex: Eex,
|
||||
elixir: Elixir,
|
||||
elm: Elm,
|
||||
env: Env,
|
||||
erb: Erb,
|
||||
erlang: Erlang,
|
||||
eslint: Eslint,
|
||||
exs: Exs,
|
||||
exx: Exx,
|
||||
file: File,
|
||||
folder: Folder,
|
||||
folder_light: Folder_light,
|
||||
folder_open: Folder_open,
|
||||
fontotf: Fontotf,
|
||||
fontttf: Fontttf,
|
||||
fontwoff: Fontwoff,
|
||||
fontwoff2: Fontwoff2,
|
||||
git: Git,
|
||||
go: Go,
|
||||
gopackage: Gopackage,
|
||||
gradle: Gradle,
|
||||
graphql: Graphql,
|
||||
groovy: Groovy,
|
||||
grunt: Grunt,
|
||||
gulp: Gulp,
|
||||
haml: Haml,
|
||||
handlebars: Handlebars,
|
||||
haskell: Haskell,
|
||||
html: Html,
|
||||
image: Image,
|
||||
imagegif: Imagegif,
|
||||
imageico: Imageico,
|
||||
imagejpg: Imagejpg,
|
||||
imagepng: Imagepng,
|
||||
imagewebp: Imagewebp,
|
||||
info: Info,
|
||||
ipynb: Ipynb,
|
||||
java: Java,
|
||||
jenkins: Jenkins,
|
||||
jest: Jest,
|
||||
jinja: Jinja,
|
||||
js: Js,
|
||||
jsmap: Jsmap,
|
||||
json: Json,
|
||||
jsp: Jsp,
|
||||
julia: Julia,
|
||||
karma: Karma,
|
||||
key: Key,
|
||||
less: Less,
|
||||
license: License,
|
||||
lighteditorconfig: Lighteditorconfig,
|
||||
liquid: Liquid,
|
||||
llvm: Llvm,
|
||||
log: Log,
|
||||
lua: Lua,
|
||||
m: M,
|
||||
markdown: Markdown,
|
||||
mint: Mint,
|
||||
mov: Mov,
|
||||
mp4: Mp4,
|
||||
nestjs: Nestjs,
|
||||
nestjscontroller: Nestjscontroller,
|
||||
nestjsdecorator: Nestjsdecorator,
|
||||
nestjsfilter: Nestjsfilter,
|
||||
nestjsguard: Nestjsguard,
|
||||
nestjsmodule: Nestjsmodule,
|
||||
nestjsservice: Nestjsservice,
|
||||
netlify: Netlify,
|
||||
nginx: Nginx,
|
||||
nim: Nim,
|
||||
njk: Njk,
|
||||
nodemon: Nodemon,
|
||||
npm: Npm,
|
||||
npmlock: Npmlock,
|
||||
nuxt: Nuxt,
|
||||
nvm: Nvm,
|
||||
opengl: Opengl,
|
||||
pdf: Pdf,
|
||||
photoshop: Photoshop,
|
||||
php: Php,
|
||||
postcssconfig: Postcssconfig,
|
||||
powershell: Powershell,
|
||||
powershelldata: Powershelldata,
|
||||
powershellmodule: Powershellmodule,
|
||||
prettier: Prettier,
|
||||
prisma: Prisma,
|
||||
prolog: Prolog,
|
||||
pug: Pug,
|
||||
python: Python,
|
||||
qt: Qt,
|
||||
razor: Razor,
|
||||
reactjs: Reactjs,
|
||||
reactts: Reactts,
|
||||
readme: Readme,
|
||||
rescript: Rescript,
|
||||
rjson: Rjson,
|
||||
robots: Robots,
|
||||
rollup: Rollup,
|
||||
ruby: Ruby,
|
||||
rust: Rust,
|
||||
sass: Sass,
|
||||
scss: Scss,
|
||||
shell: Shell,
|
||||
smarty: Smarty,
|
||||
sol: Sol,
|
||||
sql: Sql,
|
||||
storybook: Storybook,
|
||||
stylelint: Stylelint,
|
||||
stylus: Stylus,
|
||||
svelte: Svelte,
|
||||
svg: Svg,
|
||||
swift: Swift,
|
||||
symfony: Symfony,
|
||||
tailwind: Tailwind,
|
||||
testjs: Testjs,
|
||||
testts: Testts,
|
||||
tmpl: Tmpl,
|
||||
toml: Toml,
|
||||
travis: Travis,
|
||||
tsconfig: Tsconfig,
|
||||
tsx: Tsx,
|
||||
twig: Twig,
|
||||
txt: Txt,
|
||||
typescript: Typescript,
|
||||
typescriptdef: Typescriptdef,
|
||||
ui: Ui,
|
||||
user: User,
|
||||
vercel: Vercel,
|
||||
video: Video,
|
||||
vite: Vite,
|
||||
vscode: Vscode,
|
||||
vue: Vue,
|
||||
wasm: Wasm,
|
||||
webpack: Webpack,
|
||||
windi: Windi,
|
||||
xml: Xml,
|
||||
yaml: Yaml,
|
||||
yarn: Yarn,
|
||||
yarnerror: Yarnerror,
|
||||
zip: Zip,
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
TerminalWindow
|
||||
} from 'phosphor-react';
|
||||
import React from 'react';
|
||||
import { ButtonProps } from '../primitive';
|
||||
import { ButtonProps } from '@sd/ui';
|
||||
import { Shortcut } from '../primitive/Shortcut';
|
||||
import { DefaultProps } from '../primitive/types';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
|
|
|
|||
|
|
@ -35,47 +35,38 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
|
|||
</Button>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute left-0 z-50 mt-1 origin-top-left bg-white border divide-y divide-gray-100 rounded shadow-xl w-44 dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{props.items.map((item, index) => (
|
||||
<div key={index} className="px-1 py-1">
|
||||
{item.map((button, index) => (
|
||||
<Menu.Item key={index}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={clsx(
|
||||
'text-sm group flex rounded items-center w-full px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
|
||||
{
|
||||
'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
|
||||
// 'text-gray-900 dark:text-gray-200': !active
|
||||
}
|
||||
)}
|
||||
>
|
||||
{button.icon && (
|
||||
<button.icon
|
||||
className={clsx('mr-2 w-4 h-4', {
|
||||
'dark:text-gray-100': active,
|
||||
'text-gray-600 dark:text-gray-200': !active
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
{button.name}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
|
||||
<Menu.Items className="absolute left-0 z-50 mt-1 origin-top-left bg-white border divide-y divide-gray-100 rounded shadow-xl w-44 dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{props.items.map((item, index) => (
|
||||
<div key={index} className="px-1 py-1">
|
||||
{item.map((button, index) => (
|
||||
<Menu.Item key={index}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={clsx(
|
||||
'text-sm group flex rounded items-center w-full px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
|
||||
{
|
||||
'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
|
||||
// 'text-gray-900 dark:text-gray-200': !active
|
||||
}
|
||||
)}
|
||||
>
|
||||
{button.icon && (
|
||||
<button.icon
|
||||
className={clsx('mr-2 w-4 h-4', {
|
||||
'dark:text-gray-100': active,
|
||||
'text-gray-600 dark:text-gray-200': !active
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
{button.name}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,212 +0,0 @@
|
|||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
||||
import {
|
||||
CaretRightIcon,
|
||||
CheckIcon,
|
||||
CropIcon,
|
||||
EyeClosedIcon,
|
||||
EyeOpenIcon,
|
||||
FileIcon,
|
||||
FrameIcon,
|
||||
GridIcon,
|
||||
Link2Icon,
|
||||
MixerHorizontalIcon,
|
||||
PersonIcon,
|
||||
TransparencyGridIcon
|
||||
} from '@radix-ui/react-icons';
|
||||
import cx from 'clsx';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { Button } from '@sd/ui';
|
||||
|
||||
interface RadixMenuItem {
|
||||
label: string;
|
||||
shortcut?: string;
|
||||
icon?: ReactNode;
|
||||
}
|
||||
|
||||
interface User {
|
||||
name: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const generalMenuItems: RadixMenuItem[] = [
|
||||
{
|
||||
label: 'New File',
|
||||
icon: <FileIcon className="mr-2 h-3.5 w-3.5" />,
|
||||
shortcut: '⌘+N'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: <MixerHorizontalIcon className="mr-2 h-3.5 w-3.5" />,
|
||||
shortcut: '⌘+,'
|
||||
}
|
||||
];
|
||||
|
||||
const regionToolMenuItems: RadixMenuItem[] = [
|
||||
{
|
||||
label: 'Frame',
|
||||
icon: <FrameIcon className="mr-2 h-3.5 w-3.5" />,
|
||||
shortcut: '⌘+F'
|
||||
},
|
||||
{
|
||||
label: 'Crop',
|
||||
icon: <CropIcon className="mr-2 h-3.5 w-3.5" />,
|
||||
shortcut: '⌘+S'
|
||||
}
|
||||
];
|
||||
|
||||
const users: User[] = [
|
||||
{
|
||||
name: 'Adam',
|
||||
url: 'https://github.com/adamwathan.png'
|
||||
},
|
||||
{
|
||||
name: 'Steve',
|
||||
url: 'https://github.com/steveschoger.png'
|
||||
},
|
||||
{
|
||||
name: 'Robin',
|
||||
url: 'https://github.com/robinmalfait.png'
|
||||
}
|
||||
];
|
||||
|
||||
interface Props {}
|
||||
|
||||
const DropdownMenu = (props: Props) => {
|
||||
const [showGrid, setShowGrid] = useState(false);
|
||||
const [showUi, setShowUi] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative inline-block text-left">
|
||||
<DropdownMenuPrimitive.Root>
|
||||
<DropdownMenuPrimitive.Trigger asChild>
|
||||
<Button>Click</Button>
|
||||
</DropdownMenuPrimitive.Trigger>
|
||||
|
||||
<DropdownMenuPrimitive.Content
|
||||
align="end"
|
||||
sideOffset={5}
|
||||
className={cx(
|
||||
' radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down',
|
||||
'w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56',
|
||||
'bg-white dark:bg-gray-800'
|
||||
)}
|
||||
>
|
||||
{generalMenuItems.map(({ label, icon, shortcut }, i) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
key={`${label}-${i}`}
|
||||
className={cx(
|
||||
'flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none',
|
||||
'text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
<span className="flex-grow text-gray-700 dark:text-gray-300">{label}</span>
|
||||
{shortcut && <span className="text-xs">{shortcut}</span>}
|
||||
</DropdownMenuPrimitive.Item>
|
||||
))}
|
||||
|
||||
<DropdownMenuPrimitive.Separator className="h-px my-1 bg-gray-200 dark:bg-gray-700" />
|
||||
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
checked={showGrid}
|
||||
onCheckedChange={setShowGrid}
|
||||
className={cx(
|
||||
'flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none',
|
||||
'text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
{showGrid ? (
|
||||
<GridIcon className="w-4 h-4 mr-2" />
|
||||
) : (
|
||||
<TransparencyGridIcon className="mr-2 h-3.5 w-3.5 text-gray-700 dark:text-gray-300" />
|
||||
)}
|
||||
<span className="flex-grow text-gray-700 dark:text-gray-300">Show Grid</span>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-3.5 w-3.5" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
checked={showUi}
|
||||
onCheckedChange={setShowUi}
|
||||
className={cx(
|
||||
'flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none',
|
||||
'text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
{showUi ? (
|
||||
<EyeOpenIcon className="mr-2 h-3.5 w-3.5" />
|
||||
) : (
|
||||
<EyeClosedIcon className="mr-2 h-3.5 w-3.5" />
|
||||
)}
|
||||
<span className="flex-grow text-gray-700 dark:text-gray-300">Show UI</span>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-3.5 w-3.5" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
|
||||
<DropdownMenuPrimitive.Separator className="h-px my-1 bg-gray-200 dark:bg-gray-700" />
|
||||
|
||||
<DropdownMenuPrimitive.Label className="px-2 py-2 text-xs text-gray-700 select-none dark:text-gray-200">
|
||||
Region Tools
|
||||
</DropdownMenuPrimitive.Label>
|
||||
|
||||
{regionToolMenuItems.map(({ label, icon, shortcut }, i) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
key={`${label}-${i}`}
|
||||
className={cx(
|
||||
'flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none',
|
||||
'text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
<span className="flex-grow text-gray-700 dark:text-gray-300">{label}</span>
|
||||
{shortcut && <span className="text-xs">{shortcut}</span>}
|
||||
</DropdownMenuPrimitive.Item>
|
||||
))}
|
||||
|
||||
<DropdownMenuPrimitive.Separator className="h-px my-1 bg-gray-200 dark:bg-gray-700" />
|
||||
|
||||
<DropdownMenuPrimitive.Root>
|
||||
<DropdownMenuPrimitive.TriggerItem
|
||||
className={cx(
|
||||
'flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none',
|
||||
'text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
<Link2Icon className="mr-2 h-3.5 w-3.5" />
|
||||
<span className="flex-grow text-gray-700 dark:text-gray-300">Share</span>
|
||||
<CaretRightIcon className="h-3.5 w-3.5" />
|
||||
</DropdownMenuPrimitive.TriggerItem>
|
||||
<DropdownMenuPrimitive.Content
|
||||
className={cx(
|
||||
'origin-radix-dropdown-menu radix-side-right:animate-scale-in',
|
||||
'w-full rounded-md px-1 py-1 text-xs shadow-md',
|
||||
'bg-white dark:bg-gray-800'
|
||||
)}
|
||||
>
|
||||
{users.map(({ name, url }, i) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
key={`${name}-${i}`}
|
||||
className={cx(
|
||||
'flex w-28 cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none md:w-32',
|
||||
'text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900'
|
||||
)}
|
||||
>
|
||||
{url ? (
|
||||
<img className="mr-2.5 h-6 w-6 rounded-full" src={url} />
|
||||
) : (
|
||||
<PersonIcon className="mr-2.5 h-6 w-6" />
|
||||
)}
|
||||
<span className="text-gray-700 dark:text-gray-300">{name}</span>
|
||||
</DropdownMenuPrimitive.Item>
|
||||
))}
|
||||
</DropdownMenuPrimitive.Content>
|
||||
</DropdownMenuPrimitive.Root>
|
||||
</DropdownMenuPrimitive.Content>
|
||||
</DropdownMenuPrimitive.Root>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownMenu;
|
||||
|
|
@ -26,7 +26,7 @@ export default function GeneralSettings() {
|
|||
<p className="mt-1 text-sm text-gray-400">Basic settings related to this client</p>
|
||||
{/* <hr className="mt-4 border-gray-550" /> */}
|
||||
</div>
|
||||
<p className="px-5 py-3 mb-3 text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
|
||||
<p className="px-5 py-3 mb-3 text-sm text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
|
||||
<b>Note: </b>This is a pre-alpha build of Spacedrive, many features are yet to be
|
||||
functional.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { Button } from '@sd/ui';
|
||||
import { Dropdown } from '../../components/primitive/Dropdown';
|
||||
import DropdownMenu from '../../components/primitive/DropdownMenu';
|
||||
import { InputContainer } from '../../components/primitive/InputContainer';
|
||||
|
||||
const exampleLocations = [
|
||||
|
|
@ -20,21 +19,7 @@ export default function LocationSettings() {
|
|||
title="Something about a vault"
|
||||
description="Local cache storage for media previews and thumbnails."
|
||||
>
|
||||
<div className="flex flex-row space-x-2">
|
||||
<div className="flex flex-grow">
|
||||
{/* <Listbox
|
||||
options={locations.map((location) => ({
|
||||
key: location.name,
|
||||
option: location.name,
|
||||
description: location.path
|
||||
}))}
|
||||
/> */}
|
||||
</div>
|
||||
<Button className="mb-3" variant="primary">
|
||||
Add Location
|
||||
</Button>
|
||||
<DropdownMenu />
|
||||
</div>
|
||||
<div className="flex flex-row space-x-2"></div>
|
||||
</InputContainer>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -38,16 +38,17 @@ const variants = {
|
|||
active:bg-gray-100
|
||||
dark:bg-gray-500
|
||||
dark:hover:bg-gray-500
|
||||
dark:hover:bg-opacity-80
|
||||
dark:bg-opacity-80
|
||||
dark:hover:bg-opacity-100
|
||||
dark:active:bg-gray-550
|
||||
dark:active:opacity-80
|
||||
|
||||
border-gray-200
|
||||
hover:border-gray-300
|
||||
active:border-gray-200
|
||||
dark:border-gray-600
|
||||
dark:border-gray-500
|
||||
dark:active:border-gray-600
|
||||
dark:hover:border-gray-600
|
||||
dark:hover:border-gray-500
|
||||
|
||||
text-gray-700
|
||||
hover:text-gray-900
|
||||
|
|
|
|||
Loading…
Reference in a new issue