refactor: replace anchor tags with Link components for improved navigation consistency

This commit is contained in:
Yoga Pangestu 2026-08-05 20:48:58 +07:00
parent 705f0d3efa
commit bd20162c13
31 changed files with 123 additions and 122 deletions

View File

@ -1,3 +1,4 @@
import { router } from '@inertiajs/react';
import { Bell, Check, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Badge } from '@/components/ui/badge';
@ -189,15 +190,11 @@ export function NotificationBell() {
: 'opacity-60'
}`}
>
<a
href={notification.url || '#'}
<div
className="min-w-0 flex-1 cursor-pointer"
onClick={(e) => {
e.preventDefault();
onClick={() => {
if (notification.url) {
window.location.href =
notification.url;
router.visit(notification.url);
}
}}
>
@ -225,7 +222,7 @@ export function NotificationBell() {
minute: '2-digit',
})}
</span>
</a>
</div>
<div className="flex shrink-0 flex-col gap-1 pt-0.5">
{!notification.is_read && (
<Button

View File

@ -1,4 +1,4 @@
import { Form, Head, router } from '@inertiajs/react';
import { Form, Head, Link, router } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
@ -139,10 +139,10 @@ export default function PayrollPeriodShow({ payrollPeriod }: Props) {
</p>
</div>
<Button asChild variant="outline">
<a href={payrollPeriodsIndex.url()}>
<Link href={payrollPeriodsIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { AlertCircle, ArrowLeft } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
@ -55,10 +55,10 @@ export default function EmployeeCreate({ roles }: Props) {
</h2>
</div>
<Button asChild variant="outline">
<a href={employeeIndex.url()}>
<Link href={employeeIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { useMemo, useState } from 'react';
import { DatePicker } from '@/components/date-picker';
@ -94,10 +94,10 @@ export default function EmployeeEdit({ employee, roles }: Props) {
</h2>
</div>
<Button asChild variant="outline">
<a href={employeeIndex.url()}>
<Link href={employeeIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import type { PaginationState } from '@/components/data-table';
@ -94,7 +94,7 @@ export default function EmployeeIndex({ employees, filters }: Props) {
const columns = createEmployeeColumns({
handleEdit: (employee) => {
window.location.href = employeeEdit.url(employee.id);
router.visit(employeeEdit.url(employee.id));
},
handleDeleteClick: (employee) => setDeleting(employee),
handleResetPassword: (employee) => setResetPasswordTarget(employee),
@ -184,10 +184,10 @@ export default function EmployeeIndex({ employees, filters }: Props) {
title="Pegawai"
actions={
<Button asChild>
<a href={employeeCreate.url()}>
<Link href={employeeCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>

View File

@ -19,7 +19,7 @@ import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as cuttingIndex, store } from '@/routes/admin/manage/cuttings';
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { ArrowLeft, Check, Layers, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useMemo, useRef, useState } from 'react';
import type { CuttingCreateData } from './columns';
@ -290,10 +290,10 @@ export default function CuttingCreate({ data }: Props) {
<div className="flex items-center justify-between">
<h2 className="text-2xl font-semibold tracking-tight">Tambah Cutting</h2>
<Button asChild variant="outline">
<a href={cuttingIndex.url()}>
<Link href={cuttingIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -17,7 +17,7 @@ import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as cuttingIndex, update } from '@/routes/admin/manage/cuttings';
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, Check, Layers, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useMemo, useRef, useState } from 'react';
import type { CuttingCreateData, CuttingForEdit } from './columns';
@ -267,10 +267,10 @@ export default function CuttingEdit({ cutting, data }: Props) {
<div className="flex items-center justify-between">
<h2 className="text-2xl font-semibold tracking-tight">Edit Cutting</h2>
<Button asChild variant="outline">
<a href={cuttingIndex.url()}>
<Link href={cuttingIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import { CardTable } from '@/components/card-table';
@ -67,10 +67,10 @@ export default function CuttingIndex({ cuttings }: Props) {
title="Cutting"
actions={
<Button asChild>
<a href={cuttingCreate.url()}>
<Link href={cuttingCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>
@ -103,7 +103,7 @@ export default function CuttingIndex({ cuttings }: Props) {
isExpanded={isExpanded}
onToggleExpand={onToggleExpand}
onEdit={(c) => {
window.location.href = cuttingEdit.url(c.id);
router.visit(cuttingEdit.url(c.id));
}}
onDelete={(c) => setDeleting(c)}
/>

View File

@ -1,6 +1,6 @@
'use no memo';
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
ArrowLeft,
Check,
@ -428,10 +428,10 @@ export default function PurchaseCreate({ data }: Props) {
Tambah Belanja
</h2>
<Button asChild variant="outline">
<a href={purchaseIndex.url()}>
<Link href={purchaseIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,6 +1,6 @@
'use no memo';
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import {
ArrowLeft,
Check,
@ -369,10 +369,10 @@ export default function PurchaseEdit({ purchase, data }: Props) {
Edit Belanja
</h2>
<Button asChild variant="outline">
<a href={purchaseIndex.url()}>
<Link href={purchaseIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import { CardTable } from '@/components/card-table';
@ -67,10 +67,10 @@ export default function PurchaseIndex({ purchases }: Props) {
title="Belanja"
actions={
<Button asChild>
<a href={purchaseCreate.url()}>
<Link href={purchaseCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>
@ -103,7 +103,7 @@ export default function PurchaseIndex({ purchases }: Props) {
isExpanded={isExpanded}
onToggleExpand={onToggleExpand}
onEdit={(p) => {
window.location.href = purchaseEdit.url(p.id);
router.visit(purchaseEdit.url(p.id));
}}
onDelete={(p) => setDeleting(p)}
/>

View File

@ -1,6 +1,6 @@
'use no memo';
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
@ -219,10 +219,10 @@ return 0;
Tambah Restock
</h2>
<Button asChild variant="outline">
<a href={restockIndex.url()}>
<Link href={restockIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,6 +1,6 @@
'use no memo';
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
@ -193,10 +193,10 @@ return 0;
Edit Restock
</h2>
<Button asChild variant="outline">
<a href={restockIndex.url()}>
<Link href={restockIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import { CardTable } from '@/components/card-table';
@ -67,10 +67,10 @@ export default function RestockIndex({ restocks }: Props) {
title="Restock"
actions={
<Button asChild>
<a href={restockCreate.url()}>
<Link href={restockCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>
@ -103,7 +103,7 @@ export default function RestockIndex({ restocks }: Props) {
isExpanded={isExpanded}
onToggleExpand={onToggleExpand}
onEdit={(r) => {
window.location.href = restockEdit.url(r.id);
router.visit(restockEdit.url(r.id));
}}
onDelete={(r) => setDeleting(r)}
/>

View File

@ -1,6 +1,6 @@
'use no memo';
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
@ -299,10 +299,10 @@ export default function TransactionCreate({ data }: Props) {
Tambah Transaksi
</h2>
<Button asChild variant="outline">
<a href={transactionIndex.url()}>
<Link href={transactionIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,6 +1,6 @@
'use no memo';
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
@ -276,10 +276,10 @@ export default function TransactionEdit({ transaction, data }: Props) {
Edit Transaksi
</h2>
<Button asChild variant="outline">
<a href={transactionIndex.url()}>
<Link href={transactionIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useMemo, useState } from 'react';
import { CardTable } from '@/components/card-table';
@ -321,10 +321,10 @@ export default function TransactionIndex({
title="Transaksi"
actions={
<Button asChild>
<a href={transactionCreate.url()}>
<Link href={transactionCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>
@ -358,7 +358,7 @@ export default function TransactionIndex({
isExpanded={isExpanded}
onToggleExpand={onToggleExpand}
onEdit={(t) => {
window.location.href = transactionEdit.url(t.id);
router.visit(transactionEdit.url(t.id));
}}
onDelete={(t) => setDeleting(t)}
/>

View File

@ -1,4 +1,4 @@
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
ArrowLeft,
Copy,
@ -282,10 +282,10 @@ export default function ProductCreate({ categories }: Props) {
Tambah Produk
</h2>
<Button asChild variant="outline">
<a href={productIndex.url()}>
<Link href={productIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
ArrowLeft,
Copy,
@ -331,10 +331,10 @@ export default function ProductEdit({ product, categories }: Props) {
Edit Produk
</h2>
<Button asChild variant="outline">
<a href={productIndex.url()}>
<Link href={productIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,6 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useMemo, useState } from 'react';
import { router } from '@inertiajs/react';
import { CardTable } from '@/components/card-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FilterPopover } from '@/components/filter-popover';
@ -26,14 +24,17 @@ import { useServerTable } from '@/hooks/use-server-table';
import {
destroy,
create as productCreate,
index as productIndex,
edit as productEdit,
index as productIndex,
toggleStatus,
} from '@/routes/admin/master/products';
import {
destroy as variantDestroy,
edit as variantEdit,
} from '@/routes/admin/master/products/variants';
import { Head, router } from '@inertiajs/react';
import { Link, Plus } from 'lucide-react';
import { useMemo, useState } from 'react';
import type { Product, ProductVariant } from './columns';
import { ProductCardRow } from './product-card';
import { VariantSubRow } from './variant/sub-row';
@ -249,10 +250,10 @@ export default function ProductIndex({ products, categories, filters }: Props) {
title="Produk"
actions={
<Button asChild>
<a href={productCreate.url()}>
<Link href={productCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>
@ -279,14 +280,14 @@ export default function ProductIndex({ products, categories, filters }: Props) {
product={item}
index={
(pagination.current_page - 1) *
pagination.per_page +
pagination.per_page +
index +
1
}
isExpanded={isExpanded}
onToggleExpand={onToggleExpand}
onEdit={(p) => {
window.location.href = productEdit.url(p.id);
router.visit(productEdit.url(p.id));
}}
onDelete={(p) => setDeleting(p)}
toggleStatusUrl={(id) => toggleStatus.url(id)}
@ -296,10 +297,12 @@ export default function ProductIndex({ products, categories, filters }: Props) {
<VariantSubRow
product={product}
onEditVariant={(p, v) => {
window.location.href = variantEdit.url({
product: p.id,
variant: v.id,
});
router.visit(
variantEdit.url({
product: p.id,
variant: v.id,
}),
);
}}
onDeleteVariantClick={(p, v) =>
setDeletingVariant({ product: p, variant: v })

View File

@ -1,4 +1,4 @@
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { useState } from 'react';
import { FileUploadMultiple } from '@/components/file-upload-multiple';
@ -87,10 +87,10 @@ export default function ProductVariantEdit({ variant }: Props) {
Edit Varian
</h2>
<Button asChild variant="outline">
<a href={productIndex.url()}>
<Link href={productIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head } from '@inertiajs/react';
import { Head, Link } from '@inertiajs/react';
import {
ArrowDown,
ArrowLeft,
@ -149,10 +149,10 @@ export default function StockMutationsPage({
</p>
</div>
<Button asChild variant="outline">
<a href={productIndex.url()}>
<Link href={productIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,3 +1,4 @@
import { router } from '@inertiajs/react';
import { ArrowRightLeft, Pencil, ScrollText, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { ImagePreviewButton } from '@/components/image-preview-button';
@ -133,11 +134,12 @@ export function VariantSubRow({
<ScrollText className="h-4 w-4" />
),
onClick: () => {
window.location.href =
router.visit(
stockMutations.url({
product: product.id,
variant: variant.id,
});
}),
);
},
},
{

View File

@ -1,4 +1,4 @@
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
ArrowLeft,
Check,
@ -193,10 +193,10 @@ export default function RawMaterialCreate() {
Tambah Bahan Baku
</h2>
<Button asChild variant="outline">
<a href={rawMaterialIndex.url()}>
<Link href={rawMaterialIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Form, Head, usePage } from '@inertiajs/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
ArrowLeft,
Check,
@ -208,10 +208,10 @@ export default function RawMaterialEdit({ rawMaterial }: Props) {
Edit Bahan Baku
</h2>
<Button asChild variant="outline">
<a href={rawMaterialIndex.url()}>
<Link href={rawMaterialIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,6 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import { router } from '@inertiajs/react';
import { CardTable } from '@/components/card-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FilterPopover } from '@/components/filter-popover';
@ -18,14 +16,16 @@ import { useServerTable } from '@/hooks/use-server-table';
import {
destroy,
create as rawMaterialCreate,
index as rawMaterialIndex,
edit as rawMaterialEdit,
index as rawMaterialIndex,
toggleStatus,
} from '@/routes/admin/master/raw-materials';
import {
destroy as variantDestroy,
edit as variantEdit,
destroy as variantDestroy
} from '@/routes/admin/master/raw-materials/variants';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import type { RawMaterial, RawMaterialVariant } from './columns';
import { RawMaterialCardRow } from './raw-material-card';
import { RawMaterialVariantSubRow } from './variant/sub-row';
@ -155,12 +155,12 @@ export default function RawMaterialIndex({ rawMaterials, filters }: Props) {
<PageHeader
title="Bahan Baku"
actions={
<Button asChild>
<a href={rawMaterialCreate.url()}>
<Link href={rawMaterialCreate.url()}>
<Button>
<Plus className="h-4 w-4" />
Tambah
</a>
</Button>
</Button>
</Link>
}
/>
@ -186,16 +186,14 @@ export default function RawMaterialIndex({ rawMaterials, filters }: Props) {
rawMaterial={item}
index={
(pagination.current_page - 1) *
pagination.per_page +
pagination.per_page +
index +
1
}
isExpanded={isExpanded}
onToggleExpand={onToggleExpand}
onEdit={(rm) => {
window.location.href = rawMaterialEdit.url(
rm.id,
);
router.visit(rawMaterialEdit.url(rm.id));
}}
onDelete={(rm) => setDeleting(rm)}
toggleStatusUrl={(id) => toggleStatus.url(id)}

View File

@ -1,4 +1,4 @@
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { useState } from 'react';
import { FileUpload } from '@/components/file-upload';
@ -51,10 +51,10 @@ export default function RawMaterialVariantEdit({ variant }: Props) {
Edit Varian
</h2>
<Button asChild variant="outline">
<a href={rawMaterialIndex.url()}>
<Link href={rawMaterialIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -108,12 +108,13 @@ export function RawMaterialVariantSubRow({
<Pencil className="h-4 w-4" />
),
onClick: () => {
window.location.href =
router.visit(
variantEdit.url({
rawMaterial:
rawMaterial.id,
variant: variant.id,
});
}),
);
},
},
{

View File

@ -1,4 +1,4 @@
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
@ -70,10 +70,10 @@ export default function RoleCreate({ permissions }: Props) {
</h2>
</div>
<Button asChild variant="outline">
<a href={rolesIndex.url()}>
<Link href={rolesIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Form, Head } from '@inertiajs/react';
import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
@ -82,10 +82,10 @@ export default function RoleEdit({ role, permissions }: Props) {
</h2>
</div>
<Button asChild variant="outline">
<a href={rolesIndex.url()}>
<Link href={rolesIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Link>
</Button>
</div>

View File

@ -1,4 +1,4 @@
import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import type { PaginationState } from '@/components/data-table';
@ -58,7 +58,7 @@ export default function RoleIndex({ roles }: Props) {
const columns = createRoleColumns({
handleEdit: (role) => {
window.location.href = roleEdit.url(role.id);
router.visit(roleEdit.url(role.id));
},
handleDeleteClick: (role) => setDeleting(role),
});
@ -72,10 +72,10 @@ export default function RoleIndex({ roles }: Props) {
title="Role & Permission"
actions={
<Button asChild>
<a href={roleCreate.url()}>
<Link href={roleCreate.url()}>
<Plus className="h-4 w-4" />
Tambah
</a>
</Link>
</Button>
}
/>