mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 12:13:27 +00:00
more sexy ui
This commit is contained in:
parent
1332eb0791
commit
7617feac8d
15
src/App.tsx
15
src/App.tsx
|
@ -4,6 +4,7 @@ import { invoke } from '@tauri-apps/api';
|
||||||
import { Button } from './components/primative/Button';
|
import { Button } from './components/primative/Button';
|
||||||
import { Input, Toggle } from './components/primative';
|
import { Input, Toggle } from './components/primative';
|
||||||
import { InputContainer } from './components/primative/InputContainer';
|
import { InputContainer } from './components/primative/InputContainer';
|
||||||
|
import { TrafficLights } from './components/os/trafficLights';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const fileUploader = useRef<HTMLInputElement | null>(null);
|
const fileUploader = useRef<HTMLInputElement | null>(null);
|
||||||
|
@ -14,15 +15,17 @@ export default function App() {
|
||||||
<div className="flex flex-col h-screen rounded-xl bg-white dark:bg-gray-900 overflow-hidden ">
|
<div className="flex flex-col h-screen rounded-xl bg-white dark:bg-gray-900 overflow-hidden ">
|
||||||
<div
|
<div
|
||||||
data-tauri-drag-region
|
data-tauri-drag-region
|
||||||
className="max-w bg-gray-100 dark:bg-gray-800 h-10 border-b-1 border-gray-400"
|
className="max-w p-2 bg-gray-50 dark:bg-gray-800 h-10 border-b border-gray-100 dark:border-gray-900 shadow-sm"
|
||||||
></div>
|
>
|
||||||
|
<TrafficLights className="p-1.5" />
|
||||||
|
</div>
|
||||||
<div className="p-4 ">
|
<div className="p-4 ">
|
||||||
<div className="flex space-x-2">
|
<div className="flex space-x-2">
|
||||||
<InputContainer title="Quick scan directory">
|
<InputContainer title="Quick scan directory">
|
||||||
<Input placeholder="/users/jamie/Desktop" />
|
<Input placeholder="/users/jamie/Desktop" />
|
||||||
</InputContainer>
|
</InputContainer>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-x-2 flex flex-row mt-4">
|
<div className="space-x-2 flex flex-row mt-2">
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -35,6 +38,12 @@ export default function App() {
|
||||||
</Button>
|
</Button>
|
||||||
<Button>Cancel</Button>
|
<Button>Cancel</Button>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex space-x-2 mt-2">
|
||||||
|
<Button size="sm" variant="primary">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button size="sm">Cancel</Button>
|
||||||
|
</div>
|
||||||
<div className="space-x-2 flex flex-row mt-4">
|
<div className="space-x-2 flex flex-row mt-4">
|
||||||
<Toggle initialState={false} />
|
<Toggle initialState={false} />
|
||||||
</div>
|
</div>
|
||||||
|
|
36
src/components/os/trafficLights.tsx
Normal file
36
src/components/os/trafficLights.tsx
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import React from 'react';
|
||||||
|
import { DefaultProps } from '../primative/types';
|
||||||
|
|
||||||
|
export interface TrafficLightsProps extends DefaultProps {
|
||||||
|
onClose?: () => void;
|
||||||
|
onMinimize?: () => void;
|
||||||
|
onFullscreen?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TrafficLights: React.FC<TrafficLightsProps> = (props) => {
|
||||||
|
return (
|
||||||
|
<div className={clsx('flex flex-row space-x-1.5', props.className)}>
|
||||||
|
<Light mode="close" action={props.onClose} />
|
||||||
|
<Light mode="minimize" action={props.onMinimize} />
|
||||||
|
<Light mode="fullscreen" action={props.onFullscreen} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface LightProps {
|
||||||
|
mode: 'close' | 'minimize' | 'fullscreen';
|
||||||
|
action?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Light: React.FC<LightProps> = (props) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx('w-3.5 h-3.5 rounded-full', {
|
||||||
|
'bg-red-400': props.mode == 'close',
|
||||||
|
'bg-green-400': props.mode == 'fullscreen',
|
||||||
|
'bg-yellow-400': props.mode == 'minimize'
|
||||||
|
})}
|
||||||
|
></div>
|
||||||
|
);
|
||||||
|
};
|
|
@ -3,6 +3,11 @@ import { ButtonHTMLAttributes, useState } from 'react';
|
||||||
import { Switch } from '@headlessui/react';
|
import { Switch } from '@headlessui/react';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
const sizes = {
|
||||||
|
default: 'py-1 px-3 text-md font-medium',
|
||||||
|
sm: 'py-1 px-2 text-sm font-medium'
|
||||||
|
};
|
||||||
|
|
||||||
const variants = {
|
const variants = {
|
||||||
default: `
|
default: `
|
||||||
bg-gray-50
|
bg-gray-50
|
||||||
|
@ -33,6 +38,7 @@ const variants = {
|
||||||
|
|
||||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
variant?: keyof typeof variants;
|
variant?: keyof typeof variants;
|
||||||
|
size?: keyof typeof sizes;
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,8 +47,9 @@ export const Button: React.FC<ButtonProps> = ({ loading, ...props }) => {
|
||||||
<button
|
<button
|
||||||
{...props}
|
{...props}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'flex justify-center py-1 px-3 border rounded-md font-medium text-md transition-all duration-100 text-white',
|
'flex justify-center border rounded-md transition-all duration-100 text-white',
|
||||||
{ 'opacity-5': loading },
|
{ 'opacity-5': loading },
|
||||||
|
sizes[props.size || 'default'],
|
||||||
variants[props.variant || 'default'],
|
variants[props.variant || 'default'],
|
||||||
props.className
|
props.className
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue