more sexy ui

src/App.tsx

@@ -4,6 +4,7 @@ import { invoke } from '@tauri-apps/api';
 import { Button } from './components/primative/Button';
 import { Input, Toggle } from './components/primative';
 import { InputContainer } from './components/primative/InputContainer';
+import { TrafficLights } from './components/os/trafficLights';
 
 export default function App() {
   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
         data-tauri-drag-region
-        className="max-w bg-gray-100 dark:bg-gray-800 h-10 border-b-1 border-gray-400"
-      ></div>
+        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"
+      >
+        <TrafficLights className="p-1.5" />
+      </div>
       <div className="p-4 ">
         <div className="flex space-x-2">
           <InputContainer title="Quick scan directory">
             <Input placeholder="/users/jamie/Desktop" />
           </InputContainer>
         </div>
-        <div className="space-x-2 flex flex-row mt-4">
+        <div className="space-x-2 flex flex-row mt-2">
           <Button
             variant="primary"
             onClick={() => {
@@ -35,6 +38,12 @@ export default function App() {
           </Button>
           <Button>Cancel</Button>
         </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">
           <Toggle initialState={false} />
         </div>

src/components/os/trafficLights.tsx

@@ -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>
+  );
+};

src/components/primative/Button.tsx

@@ -3,6 +3,11 @@ import { ButtonHTMLAttributes, useState } from 'react';
 import { Switch } from '@headlessui/react';
 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 = {
   default: `
     bg-gray-50 
@@ -33,6 +38,7 @@ const variants = {
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: keyof typeof variants;
+  size?: keyof typeof sizes;
   loading?: boolean;
 }
 
@@ -41,8 +47,9 @@ export const Button: React.FC<ButtonProps> = ({ loading, ...props }) => {
     <button
       {...props}
       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 },
+        sizes[props.size || 'default'],
         variants[props.variant || 'default'],
         props.className
       )}