18 feature create tabtsx component

app/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { VerticalLine } from '@/components/atoms';
+import { VerticalLine} from '@/components/atoms';
 import React from 'react';
 
 export default function Error({
@@ -34,6 +34,7 @@ export default function Error({
         </div>
         <div className="max-lg:min-w-line-mobile lg:min-w-line-desktop" />
       </section>
+
     </main>
   );
 }

components/atoms/index.ts

@@ -3,4 +3,5 @@ export * from './vertical-line';
 export * from './link-btn';
 export * from './card';
 export * from './tag';
-export * from './file-input';
+export * from './file-input';
+export * from './tab';

components/atoms/tab/component.tsx

@@ -0,0 +1,30 @@
+import {cn} from '@/lib/cn';
+import React from 'react';
+
+interface Props extends React.HTMLAttributes<HTMLInputElement>{
+    children?: React.ReactNode;
+}
+/*
+*peer-checked: I have no idea, I don't think its implemented yet
+*peer-focus: selected tab
+*peer-enabled: the one you're clicking on?
+*/
+export const Tab: React.FC<Props> = ({ children, className, ...props }) => {
+    const [id, setId] = React.useState('');
+    React.useEffect(() => setId(Math.random().toString(36).substring(7)), []);
+    return (
+        <span className={cn('block w-[100%] max-w-[120px] text-center')}>
+            <input {...props} className="peer sr-only" id={id} type="radio"/>
+            <label
+                className={cn(
+                'flex cursor-pointer items-center gap-xs px-md py-sm opacity-25 peer-checked:!opacity-100 peer-checked:border-b-line-width peer-focus:outline-none peer-enabled:hover:opacity-50 peer-enabled:active:opacity-100 peer-enabled:active:border-b-line-width ',
+                className,
+                )}
+                htmlFor={id}
+            >
+                {children}
+            </label>
+        </span>
+
+    );
+};

components/atoms/tab/index.ts

@@ -0,0 +1,2 @@
+export { Tab as default } from './component';
+export * from './component';