✨ chore: first steps added

Author: futjesus

lib/components/Filter/Filter.tsx

@@ -1,3 +1,44 @@
-export const Filter = () => {
-  return <div>Filter</div>;
-};
+import { ChevronDownIcon } from 'lucide-react';
+import { FC } from 'react';
+
+import { Button } from '@/components/Button/Button';
+import { cn } from '@/utils';
+
+import { FilterProps } from './Filter.types';
+import {
+  filterButtonIconVariants,
+  filterButtonVariants,
+  filterVariants,
+} from './Filter.variants';
+
+export const Filter: FC<FilterProps> = ({ className }) => (
+  <div className={cn(filterVariants({ className }))}>
+    <div className="relative">
+      <button className={cn(filterButtonVariants())}>
+        Status <ChevronDownIcon className={cn(filterButtonIconVariants())} />
+      </button>
+    </div>
+
+    <div className="relative">
+      <button className={cn(filterButtonVariants())}>
+        Created <ChevronDownIcon className={cn(filterButtonIconVariants())} />
+      </button>
+    </div>
+
+    <div className="relative">
+      <button className={cn(filterButtonVariants())}>
+        Type <ChevronDownIcon className={cn(filterButtonIconVariants())} />
+      </button>
+    </div>
+
+    <Button
+      type="button"
+      variant="text"
+      theme="civo"
+      appearance="compact"
+      version="alternate"
+    >
+      Reset
+    </Button>
+  </div>
+);

lib/components/Filter/Filter.types.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+import { filterVariants } from './Filter.variants';
+
+export interface FilterProps extends VariantProps<typeof filterVariants> {
+  className?: string;
+}

lib/components/Filter/Filter.variants.ts

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+
+export const filterVariants = cva(['flex', 'gap-8', 'items-center']);
+
+export const filterButtonVariants = cva([
+  'flex',
+  'items-center',
+  'gap-1',
+  'text-slate-500',
+  'cursor-pointer',
+  'text-sm',
+]);
+
+export const filterButtonIconVariants = cva([
+  'text-slate-400',
+  'h-[20px]',
+  'w-[20px]',
+]);