Side Navigation Tabs

'use client';

import './VerticalTabs.css';

/** VerticalTabs — ported from astro-component-kit. */
export interface VerticalTabsProps {
}

export function VerticalTabs({}: VerticalTabsProps) {
  return (
    <>
      <div className="v-tabs" data-rk-0ae995="">
        <button className="v-tab active" data-rk-0ae995="">General</button>
        <button className="v-tab" data-rk-0ae995="">Account</button>
        <button className="v-tab" data-rk-0ae995="">Security</button>
        <button className="v-tab" data-rk-0ae995="">Notifications</button>
      </div>
    </>
  );
}

export default VerticalTabs;

/* VerticalTabs — ported from astro-component-kit (navigation/VerticalTabs.astro) */

.v-tabs:where([data-rk-0ae995]) { display: flex; flex-direction: column; width: 200px; border-left: 2px solid #1e293b; }
.v-tab:where([data-rk-0ae995]) { background: none; border: none; padding: 0.75rem 1.25rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border-left: 2px solid transparent; margin-left: -2px; }
.v-tab:hover:where([data-rk-0ae995]) { color: #fff; }
.v-tab.active:where([data-rk-0ae995]) { color: #6366f1; border-left-color: #6366f1; background: rgba(99,102,241,0.05); }