Skip to content

Commit

Permalink
feat: create back button
Browse files Browse the repository at this point in the history
  • Loading branch information
iqbalpa committed Jul 19, 2024
1 parent f204cfe commit d5f308b
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
import './globals.css';
import Header from '@/components/header/header';
import GoTopButton from '@/components/goTopButton/goTopButton';
import BackButton from '@/components/backButton/backButton';

const inter = Inter({ subsets: ['latin'] });

Expand All @@ -22,6 +23,7 @@ export default function RootLayout({
className={`${inter.className} relative bg-gray-800 text-slate-200`}
>
<Header />
<BackButton />
{children}
<GoTopButton />
</body>
Expand Down
22 changes: 22 additions & 0 deletions src/components/backButton/backButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use client';

import { CircleArrowLeft } from 'lucide-react';
import { useRouter } from 'next/navigation';
import React from 'react';

const BackButton: React.FC = () => {
const router = useRouter();
const handleBack = () => router.push('/');

return (
<button
onClick={handleBack}
className="absolute left-5 top-20 z-40 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-500 hover:bg-opacity-95"
>
<CircleArrowLeft />
<p>Back</p>
</button>
);
};

export default BackButton;

0 comments on commit d5f308b

Please sign in to comment.