spacing and sizing
This commit is contained in:
DaKheera47
parent
7b0cd82193
commit
14535b73d2
@ -3,7 +3,15 @@
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { ChevronDown, Loader2, Play, RefreshCcw, Rocket, Settings, Trash2 } from "lucide-react";
|
||||
import {
|
||||
ChevronDown,
|
||||
Loader2,
|
||||
Play,
|
||||
RefreshCcw,
|
||||
Rocket,
|
||||
Settings,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
@ -66,29 +74,32 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4">
|
||||
<Link to="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
|
||||
<Rocket className="h-5 w-5" />
|
||||
<header className='sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
|
||||
<div className='container mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4'>
|
||||
<Link
|
||||
to='/'
|
||||
className='flex items-center gap-3 hover:opacity-80 transition-opacity'
|
||||
>
|
||||
<div className='flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm'>
|
||||
<Rocket className='h-5 w-5' />
|
||||
</div>
|
||||
<div className="leading-tight">
|
||||
<div className="text-sm font-semibold tracking-tight">Job Ops</div>
|
||||
<div className="text-xs text-muted-foreground">Orchestrator</div>
|
||||
<div className='leading-tight'>
|
||||
<div className='text-sm font-semibold tracking-tight'>Job Ops</div>
|
||||
<div className='text-xs text-muted-foreground'>Orchestrator</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className='flex flex-wrap items-center gap-1.5'>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
variant='outline'
|
||||
size='sm'
|
||||
disabled={isLoading}
|
||||
title="Clear all jobs from database"
|
||||
title='Clear all jobs from database'
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Clear DB</span>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
<span className='hidden sm:inline'>Clear DB</span>
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
@ -108,72 +119,96 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Refresh</span>
|
||||
</Button>
|
||||
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<Link to="/settings">
|
||||
<Settings className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Settings</span>
|
||||
</Link>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<RefreshCcw className='h-4 w-4' />
|
||||
<span className='hidden sm:inline'>Refresh</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onRunPipeline}
|
||||
disabled={isPipelineRunning}
|
||||
className="rounded-r-none"
|
||||
asChild
|
||||
variant='outline'
|
||||
size='sm'
|
||||
>
|
||||
{isPipelineRunning ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Running...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="h-4 w-4" />
|
||||
Run Pipeline
|
||||
</>
|
||||
)}
|
||||
<Link to='/settings'>
|
||||
<Settings className='h-4 w-4' />
|
||||
<span className='hidden sm:inline'>Settings</span>
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={isPipelineRunning}
|
||||
className="rounded-l-none border-l border-primary-foreground/20 px-2"
|
||||
aria-label="Select pipeline sources"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>Sources</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{orderedSources.map((source) => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={source}
|
||||
checked={pipelineSources.includes(source)}
|
||||
onCheckedChange={(checked) => toggleSource(source, Boolean(checked))}
|
||||
<div>
|
||||
<Button
|
||||
size='sm'
|
||||
onClick={onRunPipeline}
|
||||
disabled={isPipelineRunning}
|
||||
className='rounded-r-none'
|
||||
>
|
||||
{isPipelineRunning ? (
|
||||
<>
|
||||
<Loader2 className='h-4 w-4 animate-spin' />
|
||||
Running...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className='h-4 w-4' />
|
||||
Run Pipeline
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size='sm'
|
||||
disabled={isPipelineRunning}
|
||||
className='rounded-l-none border-l border-primary-foreground/20'
|
||||
aria-label='Select pipeline sources'
|
||||
>
|
||||
{sourceLabel[source]}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onSelect={() => onPipelineSourcesChange(orderedSources)}>
|
||||
All sources
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={() => onPipelineSourcesChange(["gradcracker"])}>
|
||||
Gradcracker only
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={() => onPipelineSourcesChange(["indeed", "linkedin"])}>
|
||||
Indeed + LinkedIn only
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<ChevronDown className='h-4 w-4' />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align='end'
|
||||
className='w-56'
|
||||
>
|
||||
<DropdownMenuLabel>Sources</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{orderedSources.map((source) => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={source}
|
||||
checked={pipelineSources.includes(source)}
|
||||
onCheckedChange={(checked) =>
|
||||
toggleSource(source, Boolean(checked))
|
||||
}
|
||||
>
|
||||
{sourceLabel[source]}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onSelect={() => onPipelineSourcesChange(orderedSources)}
|
||||
>
|
||||
All sources
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onSelect={() => onPipelineSourcesChange(["gradcracker"])}
|
||||
>
|
||||
Gradcracker only
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onSelect={() =>
|
||||
onPipelineSourcesChange(["indeed", "linkedin"])
|
||||
}
|
||||
>
|
||||
Indeed + LinkedIn only
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -313,8 +313,8 @@ export const JobList: React.FC<JobListProps> = ({
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<TabsList className="w-full sm:w-auto">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<TabsList className="w-full sm:w-auto h-9">
|
||||
{tabs.map((tab) => (
|
||||
<TabsTrigger key={tab.id} value={tab.id} className="flex-1 sm:flex-none">
|
||||
{tab.label}
|
||||
@ -325,8 +325,8 @@ export const JobList: React.FC<JobListProps> = ({
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<div className="flex items-center justify-between gap-2 sm:justify-end">
|
||||
<div className="flex items-center rounded-md border bg-muted/20 p-0.5">
|
||||
<div className="flex items-center justify-between gap-1.5 sm:justify-end">
|
||||
<div className="flex items-center rounded-md border bg-muted/20 p-0.5 h-9">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@ -367,7 +367,7 @@ export const JobList: React.FC<JobListProps> = ({
|
||||
<div className="flex flex-wrap items-center gap-2 self-start sm:self-auto">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Button variant="outline" size="sm" className="h-9">
|
||||
<ArrowUpDown className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">
|
||||
Sort: {sortLabels[sort.key]} {sort.direction === "asc" ? "↑" : "↓"}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user