Skip to content

[Frontend] - Positions Page Updates #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LOTaher merged 8 commits into from
Jan 24, 2026
Merged

[Frontend] - Positions Page Updates #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c7709f3
remove row and column buttons
Anzhuo-W Jan 21, 2026
36c3efa
update buttons and add line
Anzhuo-W Jan 21, 2026
20d95a2
position card updates
Anzhuo-W Jan 21, 2026
217116d
update buttons
Anzhuo-W Jan 22, 2026
f54c260
make prettier
Anzhuo-W Jan 22, 2026
b92237a
remove unnecessary imports
Anzhuo-W Jan 22, 2026
b726519
mind the gap
Anzhuo-W Jan 24, 2026
1c6e972
make prettier
Anzhuo-W Jan 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/lib/components/core/PositionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function PositionCard({
<div
className={cn(
'min-h-[160px] w-[384px]',
'border-sarge-gray-200 bg-sarge-gray-0 rounded-xl border p-4',
'border-sarge-gray-200 bg-sarge-gray-50 rounded-md border p-4',
onClick && 'cursor-pointer transition-shadow hover:shadow-md',
className
)}
Expand All @@ -57,7 +57,7 @@ export default function PositionCard({
: undefined
}
>
<div className="flex items-start justify-between gap-2">
<div className="-mr-4 flex items-start justify-between gap-2">
<div className="flex min-w-0 flex-[1_0_0] flex-col items-start gap-1 px-1">
<h3 className="text-label-s text-sarge-gray-800 line-clamp-2" title={title}>
{title}
Expand All @@ -76,7 +76,7 @@ export default function PositionCard({
<MoreVertical className="h-5 w-5" />
</button>
</div>
<div className="border-sarge-gray-200 bg-sarge-gray-0 mt-4 w-full rounded-lg border p-3">
<div className="border-sarge-gray-200 bg-sarge-gray-0 mt-4 w-full rounded-md border p-3">
<div className="flex flex-col items-start gap-2">
<div className="flex w-full min-w-0 items-start gap-3">
<FileText className="text-sarge-gray-600 h-5 w-5 shrink-0" />
Expand Down
50 changes: 25 additions & 25 deletions src/lib/components/core/PositionsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { Button } from '@/lib/components/ui/Button';
import { Plus, ArrowUpDown, SlidersHorizontal, Rows3, LayoutGrid } from 'lucide-react';
import { Plus, ArrowUpDown, SlidersHorizontal } from 'lucide-react';
import PositionCard from '@/lib/components/core/PositionCard';
import { Search } from '@/lib/components/core/Search';
import { type PositionWithCounts } from '@/lib/types/position.types';
Expand Down Expand Up @@ -33,45 +33,45 @@ export default function PositionsContent() {
</div>

<div className="flex items-center gap-3">
<button className="border-sarge-gray-200 text-sarge-gray-600 hover:bg-sarge-gray-100 flex items-center gap-2 rounded-lg border bg-white px-3 py-2.5">
<ArrowUpDown className="size-5" />
<Button
variant="primary"
className="bg-sarge-gray-100 text-sarge-gray-600 hover:bg-sarge-gray-200 border-sarge-gray-200 h-11 gap-2 border px-3"
>
<ArrowUpDown className="!text-sarge-gray-600 size-5" />
<span className="text-label-s">Sort</span>
</button>
<button className="border-sarge-gray-200 text-sarge-gray-600 hover:bg-sarge-gray-100 flex items-center gap-2 rounded-lg border bg-white px-3 py-2.5">
<SlidersHorizontal className="size-5" />
</Button>
<Button
variant="primary"
className="bg-sarge-gray-100 text-sarge-gray-600 hover:bg-sarge-gray-200 border-sarge-gray-200 h-11 gap-2 border px-3"
>
<SlidersHorizontal className="!text-sarge-gray-600 size-5" />
<span className="text-label-s">Filter</span>
</button>
</Button>
</div>

<div className="border-sarge-gray-200 flex items-center rounded-lg border bg-white">
<button className="text-sarge-gray-600 hover:bg-sarge-gray-100 flex items-center justify-center p-3">
<Rows3 className="size-5" />
</button>
<div className="bg-sarge-gray-200 h-6 w-px" />
<button className="text-sarge-gray-600 hover:bg-sarge-gray-100 flex items-center justify-center p-3">
<LayoutGrid className="size-5" />
</button>
</div>
<div className="w-25" />

<Button
type="button"
variant="primary"
className="gap-2 px-4 py-2.5"
className="h-11 gap-2 border border-transparent px-4"
onClick={() => setIsCreateModalOpen(true)}
>
<Plus className="size-5" />
<span>New position</span>
</Button>
</div>

<TabsList className="h-auto gap-5 bg-transparent p-0">
<UnderlineTabsTrigger value="active">
Active ({active.length ?? 0})
</UnderlineTabsTrigger>
<UnderlineTabsTrigger value="archived">
Archived ({archived.length})
</UnderlineTabsTrigger>
</TabsList>
<div className="border-sarge-gray-200 border-b">
<TabsList className="h-auto gap-5 bg-transparent p-0">
<UnderlineTabsTrigger value="active">
Active ({active.length ?? 0})
</UnderlineTabsTrigger>
<UnderlineTabsTrigger value="archived">
Archived ({archived.length})
</UnderlineTabsTrigger>
</TabsList>
</div>

<TabsContent value="active" className="flex flex-col gap-4">
{active.length > 0 ? (
Expand Down
Loading