c088de53c3
- Added new dependencies including clsx, lucide-react, recharts, and various Radix UI components to improve UI functionality. - Upgraded Tailwind CSS to version 4.0.0 and updated configuration to utilize CSS variables for theming and responsive design. - Introduced global styles and improved accessibility features in the layout and components. - Removed outdated login page and refactored authentication store for better state management. - Enhanced API service with additional authentication methods and improved error handling. These changes aim to modernize the web applications and improve user experience through better design and functionality.
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ThemeToggle } from './theme-toggle';
|
|
|
|
/**
|
|
* EN: ThemeToggle component stories
|
|
* VI: Stories cho component ThemeToggle
|
|
*/
|
|
const meta: Meta<typeof ThemeToggle> = {
|
|
title: 'Components/ThemeToggle',
|
|
component: ThemeToggle,
|
|
parameters: {
|
|
layout: 'centered',
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'EN: A button component that toggles between light and dark themes. / VI: Component nút chuyển đổi giữa theme sáng và tối.',
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ThemeToggle>;
|
|
|
|
/**
|
|
* EN: Default theme toggle button
|
|
* VI: Nút chuyển đổi theme mặc định
|
|
*/
|
|
export const Default: Story = {
|
|
render: () => <ThemeToggle />,
|
|
};
|
|
|
|
/**
|
|
* EN: Theme toggle in different contexts
|
|
* VI: Chuyển đổi theme trong các ngữ cảnh khác nhau
|
|
*/
|
|
export const InHeader: Story = {
|
|
render: () => (
|
|
<div className="flex items-center justify-between p-4 bg-secondary rounded-lg border border-primary">
|
|
<span className="text-primary font-medium">Header / Tiêu đề</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
/**
|
|
* EN: Theme toggle in sidebar
|
|
* VI: Chuyển đổi theme trong sidebar
|
|
*/
|
|
export const InSidebar: Story = {
|
|
render: () => (
|
|
<div className="flex flex-col gap-4 p-4 bg-secondary rounded-lg border border-primary w-64">
|
|
<div className="text-primary font-semibold">Sidebar / Thanh bên</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-secondary text-sm">Theme / Giao diện</span>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
),
|
|
}; |