From 97ef74e0f772d4a0fd39d48849717f7ac57c1252 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Sun, 15 Mar 2026 21:25:53 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20add=20scroll=20button?=
 =?UTF-8?q?=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ScrollingButton.tsx            | 21 +++++
 .../home/sections/Recommendation/wrapper.tsx  |  6 +-
 shared/libs/shadcn/ui/button-group.tsx        | 83 +++++++++++++++++++
 shared/libs/shadcn/ui/separator.tsx           |  2 +-
 4 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 features/home/sections/Recommendation/components/ScrollingButton.tsx
 create mode 100644 shared/libs/shadcn/ui/button-group.tsx

diff --git a/features/home/sections/Recommendation/components/ScrollingButton.tsx b/features/home/sections/Recommendation/components/ScrollingButton.tsx
new file mode 100644
index 0000000..05c8725
--- /dev/null
+++ b/features/home/sections/Recommendation/components/ScrollingButton.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/shared/libs/shadcn/ui/button";
+import { ButtonGroup } from "@/shared/libs/shadcn/ui/button-group";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import React from "react";
+
+const ScrollingButton = () => {
+  return (
+    <div>
+      <ButtonGroup>
+        <Button variant="outline">
+          <ArrowLeft />
+        </Button>
+        <Button variant="outline">
+          <ArrowRight />
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default ScrollingButton;
diff --git a/features/home/sections/Recommendation/wrapper.tsx b/features/home/sections/Recommendation/wrapper.tsx
index caf67b2..c4d15aa 100644
--- a/features/home/sections/Recommendation/wrapper.tsx
+++ b/features/home/sections/Recommendation/wrapper.tsx
@@ -1,14 +1,18 @@
 import { Suspense } from "react";
 import RecommendationMain from "./main";
 import RecommendationSkeleton from "./skeleton";
+import ScrollingButton from "./components/ScrollingButton";
 
 const Recommendation = async () => {
   return (
     <div className="mt-12">
-      <div>
+      <div className="flex justify-between">
         <h1 className="text-[26px] text-neutral-100 font-semibold w-fit tracking-tight">
           Maybe You Like
         </h1>
+        <div>
+          <ScrollingButton />
+        </div>
       </div>
       <Suspense fallback={<RecommendationSkeleton />}>
         <RecommendationMain />
diff --git a/shared/libs/shadcn/ui/button-group.tsx b/shared/libs/shadcn/ui/button-group.tsx
new file mode 100644
index 0000000..9a022ff
--- /dev/null
+++ b/shared/libs/shadcn/ui/button-group.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/shared/libs/shadcn/lib/utils"
+import { Separator } from "@/shared/libs/shadcn/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/shared/libs/shadcn/ui/separator.tsx b/shared/libs/shadcn/ui/separator.tsx
index 99a09e3..4d1d21f 100644
--- a/shared/libs/shadcn/ui/separator.tsx
+++ b/shared/libs/shadcn/ui/separator.tsx
@@ -17,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}