From a71c3ed96c8f6d580b8ca3edc03625af5868b914 Mon Sep 17 00:00:00 2001
From: edwin yue <53625790+edwaddle@users.noreply.github.com>
Date: Sat, 12 Oct 2024 22:13:52 -0700
Subject: [PATCH 1/5] Created Tabs component

Currently testing it on the error screen, but will get rid of it when I finish the actual component. Using 'customText' as a placeholder since I'm not sure how to use Props yet
---
 app/error.tsx                       |  3 ++-
 components/atoms/index.ts           |  1 +
 components/atoms/tabs/component.tsx | 35 +++++++++++++++++++++++++++++
 components/atoms/tabs/index.ts      |  2 ++
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 components/atoms/tabs/component.tsx
 create mode 100644 components/atoms/tabs/index.ts

diff --git a/app/error.tsx b/app/error.tsx
index 64917ca..0275721 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { VerticalLine } from '@/components/atoms';
+import { VerticalLine, Tabs } 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>
+      <Tabs/>
     </main>
   );
 }
diff --git a/components/atoms/index.ts b/components/atoms/index.ts
index e372089..a0a8008 100644
--- a/components/atoms/index.ts
+++ b/components/atoms/index.ts
@@ -3,3 +3,4 @@ export * from './vertical-line';
 export * from './link-btn';
 export * from './card';
 export * from './tag';
+export * from './tabs';
diff --git a/components/atoms/tabs/component.tsx b/components/atoms/tabs/component.tsx
new file mode 100644
index 0000000..20af21a
--- /dev/null
+++ b/components/atoms/tabs/component.tsx
@@ -0,0 +1,35 @@
+import {cn} from '@/lib/cn';
+import { HorizontalLine} from '@/components/atoms';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement>{
+    children?: React.ReactNode;
+}
+
+export const Tabs: React.FC<Props> = ({ children, ...rest }) => {
+    const Component = (Props) => (<div className={cn('box-border h-[41px] m-1 border-line-width border-px w-1/4 rounded-[5px] text-light-neutral-dark border-dashed')} >{Props.children}
+     <p>{Props.customText}</p>  {/* Example of using a custom prop */}</div>)
+    return (
+        <section className={cn('box-border m-[20px] flex w-[460px] h-[102px] justify-around content-between flex-wrap  border-b-[1px]')}>
+            <Component  customText="Hello, world!" >
+            </Component>
+        </section>
+        
+           
+       
+        
+    );
+};
+
+/*
+ <section className={cn('flex w-40 justify-between')}>
+            <div className={cn('border-line-width border-px size-[25px] rounded-[5px] text-light-neutral-dark border-dashed')} >
+            {children} {}
+            </div>
+            <div className={cn('border-line-width border-px size-[25px] rounded-[5px] text-light-neutral-dark')} 
+            {children} {}
+            </div>
+            <div className={cn('border-line-width border-px size-[25px] rounded-[5px] text-light-neutral-dark')} {...rest}> 
+            {children} {}
+        </div>
+        </section>
+*/
\ No newline at end of file
diff --git a/components/atoms/tabs/index.ts b/components/atoms/tabs/index.ts
new file mode 100644
index 0000000..e35b209
--- /dev/null
+++ b/components/atoms/tabs/index.ts
@@ -0,0 +1,2 @@
+export { Tabs as default } from './component';
+export * from './component';
\ No newline at end of file

From 82cd503865322d8cf76c2dc7b3bff0de22dc69e8 Mon Sep 17 00:00:00 2001
From: edwin yue <53625790+edwaddle@users.noreply.github.com>
Date: Wed, 16 Oct 2024 22:53:55 -0700
Subject: [PATCH 2/5] Got rid of comments and the placeholder I used for the
 props element

Not sure if this is formatted correctly
---
 components/atoms/tabs/component.tsx | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/components/atoms/tabs/component.tsx b/components/atoms/tabs/component.tsx
index 20af21a..9037060 100644
--- a/components/atoms/tabs/component.tsx
+++ b/components/atoms/tabs/component.tsx
@@ -1,17 +1,15 @@
 import {cn} from '@/lib/cn';
-import { HorizontalLine} from '@/components/atoms';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement>{
     children?: React.ReactNode;
 }
 
-export const Tabs: React.FC<Props> = ({ children, ...rest }) => {
-    const Component = (Props) => (<div className={cn('box-border h-[41px] m-1 border-line-width border-px w-1/4 rounded-[5px] text-light-neutral-dark border-dashed')} >{Props.children}
-     <p>{Props.customText}</p>  {/* Example of using a custom prop */}</div>)
+export const Tabs: React.FC<Props> = ({ children, ...props }) => {
+    const Component = (Props) => (<div className={cn('box-border h-[41px] m-1 border-line-width border-px w-1/4 rounded-[5px] text-light-neutral-dark border-dashed')} >{Props.children}</div>)
     return (
-        <section className={cn('box-border m-[20px] flex w-[460px] h-[102px] justify-around content-between flex-wrap  border-b-[1px]')}>
-            <Component  customText="Hello, world!" >
-            </Component>
+        <section className={cn('box-border m-[20px] flex w-[460px] h-[102px] justify-around content-between flex-wrap  border-b-[1px]')}> 
+            <Component {...props}> 
+            </Component> {/*not exactly sure how to pass things into props to test it out*/}
         </section>
         
            
@@ -19,17 +17,3 @@ export const Tabs: React.FC<Props> = ({ children, ...rest }) => {
         
     );
 };
-
-/*
- <section className={cn('flex w-40 justify-between')}>
-            <div className={cn('border-line-width border-px size-[25px] rounded-[5px] text-light-neutral-dark border-dashed')} >
-            {children} {}
-            </div>
-            <div className={cn('border-line-width border-px size-[25px] rounded-[5px] text-light-neutral-dark')} 
-            {children} {}
-            </div>
-            <div className={cn('border-line-width border-px size-[25px] rounded-[5px] text-light-neutral-dark')} {...rest}> 
-            {children} {}
-        </div>
-        </section>
-*/
\ No newline at end of file

From bfc1ca9009cb441723140b7b8558ec9dc5704fb9 Mon Sep 17 00:00:00 2001
From: edwin yue <53625790+edwaddle@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:45:20 -0800
Subject: [PATCH 3/5] Minor tweaks

I don't actually rememebr what I changed, I'm pretty sure it was something to do with the 'peer-checked' styling
---
 components/atoms/tab/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/atoms/tab/component.tsx b/components/atoms/tab/component.tsx
index 555db27..c51883b 100644
--- a/components/atoms/tab/component.tsx
+++ b/components/atoms/tab/component.tsx
@@ -17,7 +17,7 @@ export const Tab: React.FC<Props> = ({ children, className, ...props }) => {
             <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 ',
+                '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}

From 43e4dedb3da72c72a337bc5fcafffdfd98446152 Mon Sep 17 00:00:00 2001
From: edwin yue <53625790+edwaddle@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:46:54 -0800
Subject: [PATCH 4/5] added tabs to index.ts in atoms

---
 components/atoms/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/atoms/index.ts b/components/atoms/index.ts
index 0fa7156..155f68b 100644
--- a/components/atoms/index.ts
+++ b/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';
\ No newline at end of file
+export * from './file-input';
+export * from './tab';
\ No newline at end of file

From 6cd0d80d98f644ebd8f4298af5816c9755092978 Mon Sep 17 00:00:00 2001
From: edwin yue <53625790+edwaddle@users.noreply.github.com>
Date: Sat, 21 Dec 2024 00:09:06 -0800
Subject: [PATCH 5/5] Reverted error.tsx back to its original state

---
 app/error.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/error.tsx b/app/error.tsx
index 6d15d89..21909cd 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { VerticalLine, Tab, Tag } from '@/components/atoms';
+import { VerticalLine} from '@/components/atoms';
 import React from 'react';
-import Link from 'next/link'
 
 export default function Error({
   error,