first commit
This commit is contained in:
Samandar Turgunboyev
13
src/app/[locale]/boxes/page.tsx
Normal file
13
src/app/[locale]/boxes/page.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { getPosts } from '@/shared/config/api/testApi';
|
||||
import Welcome from '@/widgets/welcome';
|
||||
|
||||
export default async function BoxesPage() {
|
||||
const res = await getPosts({ _limit: 1 });
|
||||
console.log('SSR res', res.data);
|
||||
|
||||
return (
|
||||
<div className='flex justify-center items-center h-screen'>
|
||||
<Welcome />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
src/app/[locale]/boxes/qr-code/[id]/page.tsx
Normal file
11
src/app/[locale]/boxes/qr-code/[id]/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import Boxes from '@/widgets/boxes';
|
||||
|
||||
const BoxesId = async () => {
|
||||
return (
|
||||
<div className="flex justify-center items-start h-screen py-10">
|
||||
<Boxes />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoxesId;
|
||||
13
src/app/[locale]/boxes/qr-code/page.tsx
Normal file
13
src/app/[locale]/boxes/qr-code/page.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { getPosts } from '@/shared/config/api/testApi';
|
||||
import Welcome from '@/widgets/welcome';
|
||||
|
||||
export default async function QrCode() {
|
||||
const res = await getPosts({ _limit: 1 });
|
||||
console.log('SSR res', res.data);
|
||||
|
||||
return (
|
||||
<div className='flex justify-center items-center h-screen'>
|
||||
<Welcome />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
src/app/[locale]/layout.tsx
Normal file
66
src/app/[locale]/layout.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import type { Metadata } from 'next';
|
||||
import '../globals.css';
|
||||
import { golosText } from '@/shared/config/fonts';
|
||||
import { ThemeProvider } from '@/shared/config/theme-provider';
|
||||
import { PRODUCT_INFO } from '@/shared/constants/data';
|
||||
import { hasLocale, Locale, NextIntlClientProvider } from 'next-intl';
|
||||
import { routing } from '@/shared/config/i18n/routing';
|
||||
import { notFound } from 'next/navigation';
|
||||
import Footer from '@/widgets/footer/ui';
|
||||
import Navbar from '@/widgets/navbar/ui';
|
||||
import { ReactNode } from 'react';
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import QueryProvider from '@/shared/config/react-query/QueryProvider';
|
||||
import Script from 'next/script';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: PRODUCT_INFO.name,
|
||||
description: PRODUCT_INFO.description,
|
||||
icons: PRODUCT_INFO.favicon,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
params: Promise<{ locale: Locale }>;
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
return routing.locales.map((locale) => ({ locale }));
|
||||
}
|
||||
|
||||
export default async function RootLayout({ children, params }: Props) {
|
||||
const { locale } = await params;
|
||||
if (!hasLocale(routing.locales, locale)) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// Enable static rendering
|
||||
setRequestLocale(locale);
|
||||
|
||||
return (
|
||||
<html lang={locale} suppressHydrationWarning>
|
||||
<body className={`${golosText.variable} antialiased`}>
|
||||
<NextIntlClientProvider locale={locale}>
|
||||
<ThemeProvider
|
||||
attribute={'class'}
|
||||
defaultTheme="light"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<QueryProvider>
|
||||
{/* <Navbar /> */}
|
||||
{children}
|
||||
{/* <Footer /> */}
|
||||
</QueryProvider>
|
||||
</ThemeProvider>
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
<Script
|
||||
src="https://buttons.github.io/buttons.js"
|
||||
strategy="lazyOnload"
|
||||
async
|
||||
defer
|
||||
/>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
9
src/app/[locale]/page.tsx
Normal file
9
src/app/[locale]/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import Welcome from '@/widgets/welcome';
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<Welcome />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
137
src/app/globals.css
Normal file
137
src/app/globals.css
Normal file
@@ -0,0 +1,137 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-golos-text);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
/* Ranglarni ko'rish uchun https://oklch.com/ saytidan foydalaning */
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(62.3% 0.214 259.815);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.705 0.015 286.067);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(62.3% 0.214 259.815);
|
||||
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.552 0.016 285.938);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.custom-container {
|
||||
@apply container px-4 mx-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.text-foreground {
|
||||
color: var(--muted-foreground)
|
||||
}
|
||||
|
||||
.bg-muted-foreground {
|
||||
background-color: var(--sidebar-ring);
|
||||
}
|
||||
11
src/app/layout.tsx
Normal file
11
src/app/layout.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
// Since we have a `not-found.tsx` page on the root, a layout file
|
||||
// is required, even if it's just passing children through.
|
||||
export default function RootLayout({ children }: Props) {
|
||||
return children;
|
||||
}
|
||||
6
src/app/page.tsx
Normal file
6
src/app/page.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
// This page only renders when the app is built statically (output: 'export')
|
||||
export default function RootPage() {
|
||||
redirect('/uz');
|
||||
}
|
||||
BIN
src/assets/logo.jpeg
Normal file
BIN
src/assets/logo.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/passport.jpg
Normal file
BIN
src/assets/passport.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
1
src/features/auth/lib/index.ts
Normal file
1
src/features/auth/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Ushbu fayl loyiha structurasi uchun qo'shilgan. O'chirib tashlasangiz bo'ladi
|
||||
1
src/features/auth/model/index.ts
Normal file
1
src/features/auth/model/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Ushbu fayl loyiha structurasi uchun qo'shilgan. O'chirib tashlasangiz bo'ladi
|
||||
1
src/features/auth/ui/index.ts
Normal file
1
src/features/auth/ui/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Ushbu fayl loyiha structurasi uchun qo'shilgan. O'chirib tashlasangiz bo'ladi
|
||||
1
src/features/index.ts
Normal file
1
src/features/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Ushbu fayl loyiha structurasi uchun qo'shilgan. O'chirib tashlasangiz bo'ladi
|
||||
11
src/middleware.ts
Normal file
11
src/middleware.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import createMiddleware from 'next-intl/middleware';
|
||||
import { routing } from './shared/config/i18n/routing';
|
||||
|
||||
export default createMiddleware(routing);
|
||||
|
||||
export const config = {
|
||||
// Match all pathnames except for
|
||||
// - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
|
||||
// - … the ones containing a dot (e.g. `favicon.ico`)
|
||||
matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
|
||||
};
|
||||
5
src/shared/config/api/URLs.ts
Normal file
5
src/shared/config/api/URLs.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
|
||||
|
||||
const GET_BOXES = '/qr';
|
||||
|
||||
export { BASE_URL, GET_BOXES };
|
||||
42
src/shared/config/api/httpClient.ts
Normal file
42
src/shared/config/api/httpClient.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import getLocaleCS from '@/shared/lib/getLocaleCS';
|
||||
import axios from 'axios';
|
||||
import { getLocale } from 'next-intl/server';
|
||||
import { LanguageRoutes } from '../i18n/types';
|
||||
import { BASE_URL } from './URLs';
|
||||
|
||||
const httpClient = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
httpClient.interceptors.request.use(
|
||||
async (config) => {
|
||||
// Language configs
|
||||
let language = LanguageRoutes.UZ;
|
||||
try {
|
||||
language = (await getLocale()) as LanguageRoutes;
|
||||
} catch (e) {
|
||||
console.log('error', e);
|
||||
language = getLocaleCS() || LanguageRoutes.UZ;
|
||||
}
|
||||
|
||||
config.headers['Accept-Language'] = language;
|
||||
// const accessToken = localStorage.getItem('accessToken');
|
||||
// if (accessToken) {
|
||||
// config.headers['Authorization'] = `Bearer ${accessToken}`;
|
||||
// }
|
||||
|
||||
return config;
|
||||
},
|
||||
(error) => Promise.reject(error),
|
||||
);
|
||||
|
||||
httpClient.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
console.error('API error:', error);
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
export default httpClient;
|
||||
13
src/shared/config/api/testApi.ts
Normal file
13
src/shared/config/api/testApi.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { TestApiType } from '@/shared/types/testApi';
|
||||
import { AxiosResponse } from 'axios';
|
||||
import httpClient from './httpClient';
|
||||
import { GET_BOXES } from './URLs';
|
||||
|
||||
export const getBoxes = {
|
||||
async boxesDetail({ id }: { id: number }) {
|
||||
const res = await httpClient.get<AxiosResponse<TestApiType>>(
|
||||
`${GET_BOXES}/${id}/details`,
|
||||
);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
20
src/shared/config/api/types.ts
Normal file
20
src/shared/config/api/types.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
export interface ResWithPagination<T> {
|
||||
success: boolean;
|
||||
message: string;
|
||||
links: Links;
|
||||
total_items: number;
|
||||
total_pages: number;
|
||||
page_size: number;
|
||||
current_page: number;
|
||||
data: T[];
|
||||
}
|
||||
|
||||
interface Links {
|
||||
next: number | null;
|
||||
previous: number | null;
|
||||
}
|
||||
|
||||
export interface ReqWithPagination {
|
||||
_start?: number;
|
||||
_limit?: number;
|
||||
}
|
||||
9
src/shared/config/fonts.ts
Normal file
9
src/shared/config/fonts.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { Golos_Text } from 'next/font/google';
|
||||
|
||||
const golosText = Golos_Text({
|
||||
weight: ['400', '500', '600', '700', '800'],
|
||||
variable: '--font-golos-text',
|
||||
subsets: ['latin', 'cyrillic'],
|
||||
});
|
||||
|
||||
export { golosText };
|
||||
6
src/shared/config/i18n/messages/ki.json
Normal file
6
src/shared/config/i18n/messages/ki.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"HomePage": {
|
||||
"title": "Salom dunyo! (Kiril)",
|
||||
"about": "Go to the about page"
|
||||
}
|
||||
}
|
||||
6
src/shared/config/i18n/messages/ru.json
Normal file
6
src/shared/config/i18n/messages/ru.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"HomePage": {
|
||||
"title": "Hello world!",
|
||||
"about": "Go to the about page"
|
||||
}
|
||||
}
|
||||
10
src/shared/config/i18n/messages/uz.d.json.ts
Normal file
10
src/shared/config/i18n/messages/uz.d.json.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
// This file is auto-generated by next-intl, do not edit directly.
|
||||
// See: https://next-intl.dev/docs/workflows/typescript#messages-arguments
|
||||
|
||||
declare const messages: {
|
||||
"HomePage": {
|
||||
"title": "Salom dunyo!",
|
||||
"about": "Go to the about page"
|
||||
}
|
||||
};
|
||||
export default messages;
|
||||
6
src/shared/config/i18n/messages/uz.json
Normal file
6
src/shared/config/i18n/messages/uz.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"HomePage": {
|
||||
"title": "Salom dunyo!",
|
||||
"about": "Go to the about page"
|
||||
}
|
||||
}
|
||||
7
src/shared/config/i18n/navigation.ts
Normal file
7
src/shared/config/i18n/navigation.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createNavigation } from 'next-intl/navigation';
|
||||
import { routing } from './routing';
|
||||
|
||||
// Lightweight wrappers around Next.js' navigation
|
||||
// APIs that consider the routing configuration
|
||||
export const { Link, redirect, usePathname, useRouter, getPathname } =
|
||||
createNavigation(routing);
|
||||
16
src/shared/config/i18n/request.ts
Normal file
16
src/shared/config/i18n/request.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { getRequestConfig } from 'next-intl/server';
|
||||
import { hasLocale } from 'next-intl';
|
||||
import { routing } from './routing';
|
||||
|
||||
export default getRequestConfig(async ({ requestLocale }) => {
|
||||
// Typically corresponds to the `[locale]` segment
|
||||
const requested = await requestLocale;
|
||||
const locale = hasLocale(routing.locales, requested)
|
||||
? requested
|
||||
: routing.defaultLocale;
|
||||
|
||||
return {
|
||||
locale,
|
||||
messages: (await import(`./messages/${locale}.json`)).default,
|
||||
};
|
||||
});
|
||||
11
src/shared/config/i18n/routing.ts
Normal file
11
src/shared/config/i18n/routing.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { defineRouting } from 'next-intl/routing';
|
||||
import { LanguageRoutes } from './types';
|
||||
|
||||
export const routing = defineRouting({
|
||||
// A list of all locales that are supported
|
||||
locales: [LanguageRoutes.UZ, LanguageRoutes.RU, LanguageRoutes.KI],
|
||||
|
||||
// Used when no locale matches
|
||||
defaultLocale: LanguageRoutes.UZ,
|
||||
localeDetection: false,
|
||||
});
|
||||
5
src/shared/config/i18n/types.ts
Normal file
5
src/shared/config/i18n/types.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export enum LanguageRoutes {
|
||||
UZ = 'uz', // o'zbekcha
|
||||
RU = 'ru', // ruscha
|
||||
KI = 'ki', // kirilcha
|
||||
}
|
||||
27
src/shared/config/react-query/QueryProvider.tsx
Normal file
27
src/shared/config/react-query/QueryProvider.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode, useState } from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
|
||||
const QueryProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1,
|
||||
staleTime: 1000 * 60 * 5,
|
||||
refetchOnReconnect: false,
|
||||
refetchOnMount: false,
|
||||
refetchInterval: 1000 * 60 * 5,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default QueryProvider;
|
||||
11
src/shared/config/theme-provider.tsx
Normal file
11
src/shared/config/theme-provider.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { ThemeProvider as NextThemesProvider } from 'next-themes';
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NextThemesProvider>) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
}
|
||||
21
src/shared/constants/data.ts
Normal file
21
src/shared/constants/data.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
const PRODUCT_INFO = {
|
||||
name: 'QR CPOST',
|
||||
description: 'Generated by create next app',
|
||||
logo: '/favicon-32x32.png',
|
||||
favicon: '/favicon-32x32.png',
|
||||
// url: 'https://www.shadcnblocks.com',
|
||||
// socials: {
|
||||
// telegram: 'https://t.me/usmanov_dev',
|
||||
// instagram: 'https://t.me/usmanov_dev',
|
||||
// youtube: 'https://t.me/usmanov_dev',
|
||||
// linkedin: 'https://www.linkedin.com/in/usmonov-azizbek/',
|
||||
// },
|
||||
// contact: {
|
||||
// phone: '+998901234567',
|
||||
// email: 'contact@fias.uz',
|
||||
// },
|
||||
// terms_of_use: '',
|
||||
creator: 'QR CPOST',
|
||||
};
|
||||
|
||||
export { PRODUCT_INFO };
|
||||
39
src/shared/hooks/use-closer.ts
Normal file
39
src/shared/hooks/use-closer.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* Hook for closing some items when they are unnecessary to the user
|
||||
* @param ref For an item that needs to be closed when the outer part is pressed
|
||||
* @param closeFunction Closing function
|
||||
* @param scrollClose If it shouldn't close when scrolling, false will be sent. Default true
|
||||
*/
|
||||
|
||||
const useCloser = (
|
||||
ref: React.RefObject<HTMLElement>,
|
||||
closeFunction: () => void,
|
||||
scrollClose: boolean = true,
|
||||
) => {
|
||||
useEffect(() => {
|
||||
// call function when click outside is ref element
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||
closeFunction();
|
||||
}
|
||||
}
|
||||
|
||||
// call function when page is scrolling
|
||||
function handleScroll() {
|
||||
if (scrollClose) {
|
||||
closeFunction();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [ref, closeFunction]);
|
||||
};
|
||||
|
||||
export default useCloser;
|
||||
27
src/shared/hooks/use-mobile.ts
Normal file
27
src/shared/hooks/use-mobile.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import * as React from 'react';
|
||||
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
/**
|
||||
* Determine if it's on the current mobile screen (768px)
|
||||
* @returns boolean
|
||||
*/
|
||||
const useIsMobile = () => {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||
};
|
||||
mql.addEventListener('change', onChange);
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||
return () => mql.removeEventListener('change', onChange);
|
||||
}, []);
|
||||
|
||||
return !!isMobile;
|
||||
};
|
||||
|
||||
export default useIsMobile;
|
||||
38
src/shared/hooks/use-window-size.ts
Normal file
38
src/shared/hooks/use-window-size.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface ISize {
|
||||
width: number | undefined;
|
||||
height: number | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Screen size determination
|
||||
* @returns number
|
||||
*/
|
||||
const useWindowSize = () => {
|
||||
const [size, setSize] = useState<ISize>({
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const getScreenSize = () => {
|
||||
setSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
};
|
||||
|
||||
getScreenSize();
|
||||
|
||||
window.addEventListener('resize', getScreenSize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', getScreenSize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
export default useWindowSize;
|
||||
10
src/shared/lib/addBaseUrl.ts
Normal file
10
src/shared/lib/addBaseUrl.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Add base url to url
|
||||
* @param url Current url
|
||||
* @returns string
|
||||
*/
|
||||
const addBaseUrl = (url: string) => {
|
||||
return process.env.NEXT_PUBLIC_API_URL + url;
|
||||
};
|
||||
|
||||
export default addBaseUrl;
|
||||
89
src/shared/lib/formatDate.ts
Normal file
89
src/shared/lib/formatDate.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/uz-latn';
|
||||
import 'dayjs/locale/uz';
|
||||
import 'dayjs/locale/ru';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { getLocale } from 'next-intl/server';
|
||||
|
||||
// Install Dayjs plugins
|
||||
dayjs.extend(localizedFormat);
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
// Find locale
|
||||
const getCurrentLocale = async () => {
|
||||
const locale = await getLocale();
|
||||
switch (locale) {
|
||||
case 'ki':
|
||||
return 'uz';
|
||||
case 'uz':
|
||||
return 'uz-latn';
|
||||
case 'ru':
|
||||
return 'ru';
|
||||
|
||||
default:
|
||||
return 'uz-latn';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = {
|
||||
/**
|
||||
* Show date in specified format
|
||||
* @param time Date object or string or number
|
||||
* @param format type
|
||||
* @param locale Language (optional)
|
||||
* @returns string
|
||||
*/
|
||||
to: async (
|
||||
time: Date | string | number,
|
||||
format: string,
|
||||
locale?: string,
|
||||
): Promise<string> => {
|
||||
const currentLocale = locale || (await getCurrentLocale());
|
||||
return dayjs(time).locale(currentLocale).format(format);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sync date in specified format (for client-side)
|
||||
* @param time Date object or string or number
|
||||
* @param format type
|
||||
* @param locale Language (optional, standard Uzbek)
|
||||
* @returns string
|
||||
*/
|
||||
format: (
|
||||
time: Date | string | number,
|
||||
format: string,
|
||||
locale: string = 'uz',
|
||||
): string => {
|
||||
return dayjs(time).locale(locale).format(format);
|
||||
},
|
||||
|
||||
/**
|
||||
* Show date in relative time format (today, yesterday, 2 days ago,...)
|
||||
* @param time Date object or string or number
|
||||
* @param locale Language (optional, standard Uzbek)
|
||||
* @returns string
|
||||
*/
|
||||
relative: async (
|
||||
time: Date | string | number,
|
||||
locale?: string,
|
||||
): Promise<string> => {
|
||||
const currentLocale = locale || (await getCurrentLocale());
|
||||
return dayjs(time).locale(currentLocale).fromNow();
|
||||
},
|
||||
|
||||
/**
|
||||
* Show relative time synchronously (for client-side)
|
||||
* @param time Date object or string or number
|
||||
* @param locale Language (optional, standard Uzbek)
|
||||
* @returns string
|
||||
*/
|
||||
relativeFormat: (
|
||||
time: Date | string | number,
|
||||
locale: string = 'uz',
|
||||
): string => {
|
||||
return dayjs(time).locale(locale).fromNow();
|
||||
},
|
||||
};
|
||||
|
||||
export default formatDate;
|
||||
38
src/shared/lib/formatPhone.ts
Normal file
38
src/shared/lib/formatPhone.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Format the number (+998 00 111-22-33)
|
||||
* @param value Number to be formatted
|
||||
* @returns string +998 00 111-22-33
|
||||
*/
|
||||
const formatPhone = (value: string) => {
|
||||
// Keep only numbers
|
||||
const digits = value.replace(/\D/g, '');
|
||||
|
||||
// Return empty string if data is not available
|
||||
if (digits.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const prefix = digits.startsWith('998') ? '+998 ' : '+998 ';
|
||||
|
||||
let formattedNumber = prefix;
|
||||
|
||||
if (digits.length > 3) {
|
||||
formattedNumber += digits.slice(3, 5);
|
||||
}
|
||||
|
||||
if (digits.length > 5) {
|
||||
formattedNumber += ' ' + digits.slice(5, 8);
|
||||
}
|
||||
|
||||
if (digits.length > 8) {
|
||||
formattedNumber += '-' + digits.slice(8, 10);
|
||||
}
|
||||
|
||||
if (digits.length > 10) {
|
||||
formattedNumber += '-' + digits.slice(10, 12);
|
||||
}
|
||||
|
||||
return formattedNumber.trim();
|
||||
};
|
||||
|
||||
export default formatPhone;
|
||||
32
src/shared/lib/formatPrice.ts
Normal file
32
src/shared/lib/formatPrice.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { LanguageRoutes } from '../config/i18n/types';
|
||||
import { getLocale } from 'next-intl/server';
|
||||
|
||||
/**
|
||||
* Format price. With label.
|
||||
* @param amount Price
|
||||
* @param withLabel Show label. Default false
|
||||
* @returns string. Ex. X XXX XXX sum
|
||||
*/
|
||||
const formatPrice = async (amount: number | string, withLabel?: boolean) => {
|
||||
const locale = (await getLocale()) as LanguageRoutes;
|
||||
const label = withLabel
|
||||
? locale == LanguageRoutes.RU
|
||||
? ' сум'
|
||||
: locale == LanguageRoutes.KI
|
||||
? ' сўм'
|
||||
: ' so‘m'
|
||||
: '';
|
||||
const parts = String(amount).split('.');
|
||||
const dollars = parts[0];
|
||||
const cents = parts.length > 1 ? parts[1] : '00';
|
||||
|
||||
const formattedDollars = dollars.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||||
|
||||
if (String(amount).length == 0) {
|
||||
return formattedDollars + '.' + cents + label;
|
||||
} else {
|
||||
return formattedDollars + label;
|
||||
}
|
||||
};
|
||||
|
||||
export default formatPrice;
|
||||
13
src/shared/lib/getLocaleCS.ts
Normal file
13
src/shared/lib/getLocaleCS.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { LanguageRoutes } from '../config/i18n/types';
|
||||
|
||||
const getLocaleCS = (): LanguageRoutes | undefined => {
|
||||
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
||||
const match = document.cookie
|
||||
.split('; ')
|
||||
.find((row) => row.startsWith('NEXT_LOCALE='));
|
||||
return match?.split('=')[1] as LanguageRoutes;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export default getLocaleCS;
|
||||
6
src/shared/lib/utils.ts
Normal file
6
src/shared/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
41
src/shared/types/testApi.ts
Normal file
41
src/shared/types/testApi.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
export interface TestApiType {
|
||||
boxName: string;
|
||||
cargoType: string;
|
||||
id: number;
|
||||
packetCount: number;
|
||||
partyName: string;
|
||||
packets: {
|
||||
id: number;
|
||||
packetName: string;
|
||||
packetStatus: string;
|
||||
items: {
|
||||
acceptedNumber: null | string | number;
|
||||
amount: number;
|
||||
id: number;
|
||||
name: string;
|
||||
nameRu: string;
|
||||
netWeight: number;
|
||||
price: number;
|
||||
totalPrice: number;
|
||||
trekId: string;
|
||||
}[];
|
||||
passportInfo: {
|
||||
address: string;
|
||||
birthDate: string | number;
|
||||
fullName: string;
|
||||
id: number;
|
||||
passportBackImage: string;
|
||||
passportFrontImage: string;
|
||||
passportPin: string;
|
||||
passportSeries: string;
|
||||
phone: string;
|
||||
};
|
||||
userInfo: {
|
||||
address: string;
|
||||
cargoID: string;
|
||||
fullName: string;
|
||||
id: number;
|
||||
phone: string;
|
||||
};
|
||||
}[];
|
||||
}
|
||||
66
src/shared/ui/accordion.tsx
Normal file
66
src/shared/ui/accordion.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
||||
import { ChevronDownIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn('border-b last:border-b-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
);
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn('pt-0 pb-4', className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
);
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||
59
src/shared/ui/button.tsx
Normal file
59
src/shared/ui/button.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import * as React from 'react';
|
||||
import { Slot } from '@radix-ui/react-slot';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline:
|
||||
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||
ghost:
|
||||
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<'button'> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot : 'button';
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants };
|
||||
257
src/shared/ui/dropdown-menu.tsx
Normal file
257
src/shared/ui/dropdown-menu.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = 'default',
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
variant?: 'default' | 'destructive';
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn('bg-border -mx-1 my-1 h-px', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<'span'>) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
'text-muted-foreground ml-auto text-xs tracking-widest',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
};
|
||||
21
src/shared/ui/input.tsx
Normal file
21
src/shared/ui/input.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
|
||||
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Input };
|
||||
168
src/shared/ui/navigation-menu.tsx
Normal file
168
src/shared/ui/navigation-menu.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import * as React from 'react';
|
||||
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
|
||||
import { cva } from 'class-variance-authority';
|
||||
import { ChevronDownIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
function NavigationMenu({
|
||||
className,
|
||||
children,
|
||||
viewport = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||
viewport?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Root
|
||||
data-slot="navigation-menu"
|
||||
data-viewport={viewport}
|
||||
className={cn(
|
||||
'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{viewport && <NavigationMenuViewport />}
|
||||
</NavigationMenuPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.List
|
||||
data-slot="navigation-menu-list"
|
||||
className={cn(
|
||||
'group flex flex-1 list-none items-center justify-center gap-1',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Item
|
||||
data-slot="navigation-menu-item"
|
||||
className={cn('relative', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const navigationMenuTriggerStyle = cva(
|
||||
'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
|
||||
);
|
||||
|
||||
function NavigationMenuTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
data-slot="navigation-menu-trigger"
|
||||
className={cn(navigationMenuTriggerStyle(), 'group', className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{' '}
|
||||
<ChevronDownIcon
|
||||
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Content
|
||||
data-slot="navigation-menu-content"
|
||||
className={cn(
|
||||
'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
|
||||
'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuViewport({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'absolute top-full left-0 isolate z-50 flex justify-center',
|
||||
)}
|
||||
>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
data-slot="navigation-menu-viewport"
|
||||
className={cn(
|
||||
'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuLink({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Link
|
||||
data-slot="navigation-menu-link"
|
||||
className={cn(
|
||||
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NavigationMenuIndicator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
data-slot="navigation-menu-indicator"
|
||||
className={cn(
|
||||
'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
navigationMenuTriggerStyle,
|
||||
};
|
||||
139
src/shared/ui/sheet.tsx
Normal file
139
src/shared/ui/sheet.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
||||
import { XIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = 'right',
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: 'top' | 'right' | 'bottom' | 'left';
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
className={cn(
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
|
||||
side === 'right' &&
|
||||
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
|
||||
side === 'left' &&
|
||||
'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
|
||||
side === 'top' &&
|
||||
'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
|
||||
side === 'bottom' &&
|
||||
'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn('flex flex-col gap-1.5 p-4', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn('text-foreground font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
};
|
||||
39
src/shared/ui/theme-toggle.tsx
Normal file
39
src/shared/ui/theme-toggle.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Laptop, Moon, Sun } from 'lucide-react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { ToggleGroup, ToggleGroupItem } from './toggle-group';
|
||||
|
||||
export function ModeToggle() {
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<ToggleGroup type="single" className="border">
|
||||
<ToggleGroupItem
|
||||
value="system"
|
||||
className="border-r"
|
||||
aria-label="Toggle system"
|
||||
onClick={() => setTheme('system')}
|
||||
>
|
||||
<Laptop className="h-4 w-4" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="light"
|
||||
aria-label="Toggle light"
|
||||
onClick={() => setTheme('light')}
|
||||
>
|
||||
<Sun className="h-4 w-4" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="dark"
|
||||
className="border-l"
|
||||
aria-label="Toggle dark"
|
||||
onClick={() => setTheme('dark')}
|
||||
>
|
||||
<Moon className="h-4 w-4" />
|
||||
</ToggleGroupItem>
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</ToggleGroup>
|
||||
);
|
||||
}
|
||||
73
src/shared/ui/toggle-group.tsx
Normal file
73
src/shared/ui/toggle-group.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
||||
import { type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
import { toggleVariants } from '@/shared/ui/toggle';
|
||||
|
||||
const ToggleGroupContext = React.createContext<
|
||||
VariantProps<typeof toggleVariants>
|
||||
>({
|
||||
size: 'default',
|
||||
variant: 'default',
|
||||
});
|
||||
|
||||
function ToggleGroup({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<ToggleGroupPrimitive.Root
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(
|
||||
'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider value={{ variant, size }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
const context = React.useContext(ToggleGroupContext);
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
data-slot="toggle-group-item"
|
||||
data-variant={context.variant || variant}
|
||||
data-size={context.size || size}
|
||||
className={cn(
|
||||
toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}),
|
||||
'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
);
|
||||
}
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem };
|
||||
47
src/shared/ui/toggle.tsx
Normal file
47
src/shared/ui/toggle.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-transparent',
|
||||
outline:
|
||||
'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-2 min-w-9',
|
||||
sm: 'h-8 px-1.5 min-w-8',
|
||||
lg: 'h-10 px-2.5 min-w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants };
|
||||
206
src/widgets/boxes/index.tsx
Normal file
206
src/widgets/boxes/index.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
'use client';
|
||||
|
||||
import Passport from '@/assets/passport.jpg';
|
||||
import { getBoxes } from '@/shared/config/api/testApi';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import Image from 'next/image';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
const Boxes = () => {
|
||||
const products = [
|
||||
{
|
||||
name: 'Quloqchin',
|
||||
nameRu: 'Наушники',
|
||||
trackId: 'TRK-001',
|
||||
quantity: 2,
|
||||
price: '120 000 UZS',
|
||||
weight: 0.4,
|
||||
},
|
||||
{
|
||||
name: 'Zaryadka',
|
||||
nameRu: 'Зарядка',
|
||||
trackId: 'TRK-002',
|
||||
quantity: 1,
|
||||
price: '60 000 UZS',
|
||||
weight: 0.2,
|
||||
},
|
||||
];
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['boxes_detail'],
|
||||
queryFn: () => getBoxes.boxesDetail({ id: Number(id) }),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
console.log(data);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-10 container w-full justify-start items-center h-screen">
|
||||
<div className="bg-gray-100/50 shadow-xl p-4 py-6 rounded-lg w-[50%] max-lg:w-[90%] flex flex-col gap-6">
|
||||
<h1 className="text-3xl text-blue-700 text-center font-semibold">
|
||||
Karobka maʼlumotlari
|
||||
</h1>
|
||||
<div className="flex justify-between max-lg:flex-col">
|
||||
<p className="text-lg font-semibold">
|
||||
ID: <span className="font-normal">{data?.boxName}</span>
|
||||
</p>
|
||||
<p className="text-lg font-semibold">
|
||||
Partiya: <span className="font-normal">{data?.partyName}</span>
|
||||
</p>
|
||||
<p className="text-lg font-semibold">
|
||||
Paketlar soni:{' '}
|
||||
<span className="font-normal">{data?.packetCount}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{data?.packets.map((e) => (
|
||||
<div
|
||||
className="bg-gray-100/50 shadow-xl p-4 py-6 rounded-lg w-[50%] max-lg:w-[90%] flex flex-col gap-6"
|
||||
key={e.id}
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-md font-semibold text-purple-600">
|
||||
Paket:
|
||||
<span className="font-normal">{data?.boxName}</span>
|
||||
<span className="text-xs ml-2 bg-blue-100 text-blue-700 px-2 py-0.5 rounded">
|
||||
Status: {e.packetStatus}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-md text-foreground font-semibold">
|
||||
Cargo ID:<span className="font-normal">{e.userInfo.cargoID}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-[1px] bg-black" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
|
||||
<div className="bg-muted-foreground/10 rounded-md p-2 flex flex-col gap-2">
|
||||
<p>Foydalanuvchi</p>
|
||||
<p className="text-md font-semibold">
|
||||
Ismi:
|
||||
<span className="font-normal pl-2">{e.userInfo.fullName}</span>
|
||||
</p>
|
||||
<p className="text-md font-semibold">
|
||||
Cargo ID:
|
||||
<span className="font-normal pl-2">{e.userInfo.cargoID}</span>
|
||||
</p>
|
||||
<p className="text-md font-semibold">
|
||||
Manzil:
|
||||
<span className="font-normal pl-2">{e.userInfo.address}</span>
|
||||
</p>
|
||||
<p className="text-md font-semibold">
|
||||
Telefon:
|
||||
<span className="font-normal pl-2">
|
||||
{formatPhone(e.userInfo.phone)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-muted-foreground/10 rounded-md flex flex-col gap-2 p-2">
|
||||
<p>Passport</p>
|
||||
<p className="text-md font-semibold">
|
||||
Seriya:
|
||||
<span className="font-normal pl-2">
|
||||
{e.passportInfo.passportSeries}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-md font-semibold">
|
||||
PINFL:
|
||||
<span className="font-normal pl-2">
|
||||
{e.passportInfo.passportPin}
|
||||
</span>
|
||||
</p>
|
||||
<div className="text-md font-semibold">
|
||||
<p>Passport rasmi:</p>
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href={Passport.src}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
src={Passport}
|
||||
alt="Passport"
|
||||
className="w-16 mt-2"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={Passport.src}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
src={Passport}
|
||||
alt="Passport"
|
||||
className="w-16 mt-2"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold mb-2">Mahsulotlar</h5>
|
||||
<div className="overflow-x-auto rounded-lg border border-gray-300">
|
||||
<table className="min-w-full divide-y divide-gray-200 text-sm text-left">
|
||||
<thead className="bg-blue-100 text-blue-800">
|
||||
<tr>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">T/r</th>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">Nomi</th>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">
|
||||
Nomi (Ru)
|
||||
</th>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">
|
||||
Trek ID
|
||||
</th>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">Soni</th>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">
|
||||
Narxi
|
||||
</th>
|
||||
<th className="px-3 py-2 border whitespace-nowrap">
|
||||
Og‘irligi (kg)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{e.items.map((item, index) => (
|
||||
<tr key={index} className="hover:bg-gray-50">
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{index + 1}
|
||||
</td>
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{item.name}
|
||||
</td>
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{item.nameRu}
|
||||
</td>
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{item.trekId}
|
||||
</td>
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{item.amount}
|
||||
</td>
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{item.price}
|
||||
</td>
|
||||
<td className="px-3 py-2 border whitespace-nowrap">
|
||||
{item.netWeight}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Boxes;
|
||||
31
src/widgets/footer/lib/data.ts
Normal file
31
src/widgets/footer/lib/data.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
const sections = [
|
||||
{
|
||||
title: 'Product',
|
||||
links: [
|
||||
{ name: 'Overview', href: '#' },
|
||||
{ name: 'Pricing', href: '#' },
|
||||
{ name: 'Marketplace', href: '#' },
|
||||
{ name: 'Features', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
links: [
|
||||
{ name: 'About', href: '#' },
|
||||
{ name: 'Team', href: '#' },
|
||||
{ name: 'Blog', href: '#' },
|
||||
{ name: 'Careers', href: '#' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
links: [
|
||||
{ name: 'Help', href: '#' },
|
||||
{ name: 'Sales', href: '#' },
|
||||
{ name: 'Advertise', href: '#' },
|
||||
{ name: 'Privacy', href: '#' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export { sections };
|
||||
86
src/widgets/footer/ui/index.tsx
Normal file
86
src/widgets/footer/ui/index.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { PRODUCT_INFO } from '@/shared/constants/data';
|
||||
import { InstagramIcon, YoutubeIcon } from 'lucide-react';
|
||||
import { sections } from '../lib/data';
|
||||
import { ModeToggle } from '@/shared/ui/theme-toggle';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<section className="py-32">
|
||||
<div className="custom-container">
|
||||
<div className="flex w-full flex-col items-center justify-between gap-10 text-center lg:flex-row lg:items-start lg:text-left">
|
||||
<div className="flex w-full flex-col items-center justify-between gap-6 lg:items-start">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2 lg:justify-start">
|
||||
<a href="https://shadcnblocks.com">
|
||||
<img
|
||||
src={PRODUCT_INFO.logo}
|
||||
alt={PRODUCT_INFO.name}
|
||||
title={PRODUCT_INFO.name}
|
||||
className="h-8"
|
||||
/>
|
||||
</a>
|
||||
<h2 className="text-xl font-semibold">{PRODUCT_INFO.name}</h2>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
A collection of 100+ responsive HTML templates for your startup
|
||||
business or side project.
|
||||
</p>
|
||||
<ul className="flex items-center space-x-6 text-muted-foreground">
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<InstagramIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<YoutubeIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<InstagramIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<InstagramIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ModeToggle />
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-3 gap-6 lg:gap-20">
|
||||
{sections.map((section, sectionIdx) => (
|
||||
<div key={sectionIdx}>
|
||||
<h3 className="mb-6 font-bold">{section.title}</h3>
|
||||
<ul className="space-y-4 text-sm text-muted-foreground">
|
||||
{section.links.map((link, linkIdx) => (
|
||||
<li
|
||||
key={linkIdx}
|
||||
className="font-medium hover:text-primary"
|
||||
>
|
||||
<a href={link.href}>{link.name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-left">
|
||||
<p>
|
||||
© {new Date().getFullYear()} {PRODUCT_INFO.creator}. All rights
|
||||
reserved.
|
||||
</p>
|
||||
{/* <ul className="flex justify-center gap-4 lg:justify-start">
|
||||
<li className="hover:text-primary">
|
||||
<a href={PRODUCT_INFO.terms_of_use}>Terms and Conditions</a>
|
||||
</li>
|
||||
</ul> */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
93
src/widgets/navbar/lib/data.ts
Normal file
93
src/widgets/navbar/lib/data.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import { Book, Sunset, Trees, Zap } from 'lucide-react';
|
||||
import { MenuItem } from './model';
|
||||
import { LanguageRoutes } from '@/shared/config/i18n/types';
|
||||
|
||||
const menu: MenuItem[] = [
|
||||
{ title: 'Home', url: '#' },
|
||||
{
|
||||
title: 'Products',
|
||||
url: '#',
|
||||
items: [
|
||||
{
|
||||
title: 'Blog',
|
||||
description: 'The latest industry news, updates, and info',
|
||||
icon: Book,
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
description: 'Our mission is to innovate and empower the world',
|
||||
icon: Trees,
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Careers',
|
||||
description: 'Browse job listing and discover our workspace',
|
||||
icon: Sunset,
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
description:
|
||||
'Get in touch with our support team or visit our community forums',
|
||||
icon: Zap,
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
url: '#',
|
||||
items: [
|
||||
{
|
||||
title: 'Help Center',
|
||||
description: 'Get all the answers you need right here',
|
||||
icon: Zap,
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Contact Us',
|
||||
description: 'We are here to help you with any questions you have',
|
||||
icon: Sunset,
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
description: 'Check the current status of our services and APIs',
|
||||
icon: Trees,
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Terms of Service',
|
||||
description: 'Our terms and conditions for using our services',
|
||||
icon: Book,
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
url: '#',
|
||||
},
|
||||
];
|
||||
|
||||
const languages: { name: string; key: LanguageRoutes }[] = [
|
||||
{
|
||||
name: "O'zbekcha",
|
||||
key: LanguageRoutes.UZ,
|
||||
},
|
||||
{
|
||||
name: 'Ўзбекча',
|
||||
key: LanguageRoutes.KI,
|
||||
},
|
||||
{
|
||||
name: 'Русский',
|
||||
key: LanguageRoutes.RU,
|
||||
},
|
||||
];
|
||||
|
||||
export { menu, languages };
|
||||
7
src/widgets/navbar/lib/model.ts
Normal file
7
src/widgets/navbar/lib/model.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export interface MenuItem {
|
||||
title: string;
|
||||
url: string;
|
||||
description?: string;
|
||||
icon?: React.ComponentType<{ className?: string }>;
|
||||
items?: MenuItem[];
|
||||
}
|
||||
45
src/widgets/navbar/ui/ChangeLang.tsx
Normal file
45
src/widgets/navbar/ui/ChangeLang.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { GlobeIcon } from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/shared/ui/dropdown-menu';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import { languages } from '../lib/data';
|
||||
import { useParams, usePathname, useRouter } from 'next/navigation';
|
||||
import { LanguageRoutes } from '@/shared/config/i18n/types';
|
||||
|
||||
export function ChangeLang() {
|
||||
const { locale } = useParams();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
const changeLocale = (locale: LanguageRoutes) => {
|
||||
const segments = pathname.split('/');
|
||||
segments[1] = locale;
|
||||
const newPath = segments.join('/');
|
||||
router.push(newPath);
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<GlobeIcon />
|
||||
<span>{languages.find((e) => e.key == locale)?.name}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{languages.map((e, i) => (
|
||||
<DropdownMenuItem key={i} onClick={() => changeLocale(e.key)}>
|
||||
{e.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
40
src/widgets/navbar/ui/RenderItem.tsx
Normal file
40
src/widgets/navbar/ui/RenderItem.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import {
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuTrigger,
|
||||
} from '@/shared/ui/navigation-menu';
|
||||
import { MenuItem } from '../lib/model';
|
||||
import SubMenuLink from './SubMenuLink';
|
||||
|
||||
const RenderMenuItem = (item: MenuItem) => {
|
||||
// const t = useTranslations("")
|
||||
|
||||
if (item.items) {
|
||||
return (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
<NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent className="bg-popover text-popover-foreground">
|
||||
{item.items.map((subItem) => (
|
||||
<NavigationMenuLink asChild key={subItem.title} className="w-80">
|
||||
<SubMenuLink item={subItem} />
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
<NavigationMenuLink
|
||||
href={item.url}
|
||||
className="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground"
|
||||
>
|
||||
{item.title}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
export default RenderMenuItem;
|
||||
32
src/widgets/navbar/ui/RenderMobileMenuItem.tsx
Normal file
32
src/widgets/navbar/ui/RenderMobileMenuItem.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import {
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/shared/ui/accordion';
|
||||
import { MenuItem } from '../lib/model';
|
||||
import SubMenuLink from './SubMenuLink';
|
||||
|
||||
const RenderMobileMenuItem = (item: MenuItem) => {
|
||||
if (item.items) {
|
||||
return (
|
||||
<AccordionItem key={item.title} value={item.title} className="border-b-0">
|
||||
<AccordionTrigger className="text-md py-0 font-semibold hover:no-underline">
|
||||
{item.title}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="mt-2">
|
||||
{item.items.map((subItem) => (
|
||||
<SubMenuLink key={subItem.title} item={subItem} />
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a key={item.title} href={item.url} className="text-md font-semibold">
|
||||
{item.title}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default RenderMobileMenuItem;
|
||||
24
src/widgets/navbar/ui/SubMenuLink.tsx
Normal file
24
src/widgets/navbar/ui/SubMenuLink.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { MenuItem } from '../lib/model';
|
||||
|
||||
const SubMenuLink = ({ item }: { item: MenuItem }) => {
|
||||
return (
|
||||
<a
|
||||
className="flex flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-accent-foreground"
|
||||
href={item.url}
|
||||
>
|
||||
<div className="text-foreground">
|
||||
{item.icon && <item.icon className="size-5 shrink-0" />}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold">{item.title}</div>
|
||||
{item.description && (
|
||||
<p className="text-sm leading-snug text-muted-foreground">
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubMenuLink;
|
||||
123
src/widgets/navbar/ui/index.tsx
Normal file
123
src/widgets/navbar/ui/index.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { Accordion } from '@/shared/ui/accordion';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
} from '@/shared/ui/navigation-menu';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/shared/ui/sheet';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { menu } from '../lib/data';
|
||||
import { PRODUCT_INFO } from '@/shared/constants/data';
|
||||
import RenderMenuItem from './RenderItem';
|
||||
import RenderMobileMenuItem from './RenderMobileMenuItem';
|
||||
import { ChangeLang } from './ChangeLang';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Navbar = () => {
|
||||
const auth = {
|
||||
login: { title: 'Login', url: '#' },
|
||||
signup: { title: 'Sign up', url: '#' },
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-4">
|
||||
<div className="custom-container">
|
||||
{/* Desktop Menu */}
|
||||
<nav className="hidden justify-between lg:flex">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Logo */}
|
||||
<Link href={'/'} className="flex items-center gap-2">
|
||||
<img
|
||||
src={PRODUCT_INFO.logo}
|
||||
className="max-h-8"
|
||||
alt={PRODUCT_INFO.name}
|
||||
/>
|
||||
<span className="text-lg font-semibold tracking-tighter">
|
||||
{PRODUCT_INFO.name}
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center">
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{menu.map((item) => RenderMenuItem(item))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<ChangeLang />
|
||||
<Button asChild variant="outline">
|
||||
<Link href={auth.login.url}>{auth.login.title}</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link href={auth.signup.url}>{auth.signup.title}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href={'/'} className="flex items-center gap-2">
|
||||
<img
|
||||
src={PRODUCT_INFO.logo}
|
||||
className="max-h-8"
|
||||
alt={PRODUCT_INFO.name}
|
||||
/>
|
||||
</Link>
|
||||
<Sheet>
|
||||
<div className="space-x-2">
|
||||
<ChangeLang />
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Menu className="size-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
</div>
|
||||
<SheetContent className="overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
<Link href={'/'} className="flex items-center gap-2">
|
||||
<img
|
||||
src={PRODUCT_INFO.logo}
|
||||
className="max-h-8"
|
||||
alt={PRODUCT_INFO.name}
|
||||
/>
|
||||
</Link>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="flex flex-col gap-6 p-4">
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="flex w-full flex-col gap-4"
|
||||
>
|
||||
{menu.map((item) => RenderMobileMenuItem(item))}
|
||||
</Accordion>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<Button asChild variant="outline">
|
||||
<Link href={auth.login.url}>{auth.login.title}</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link href={auth.signup.url}>{auth.signup.title}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
18
src/widgets/welcome/index.tsx
Normal file
18
src/widgets/welcome/index.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { getPosts } from '@/shared/config/api/testApi';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import Image from 'next/image';
|
||||
import LOGO from "@/assets/logo.jpeg"
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
|
||||
const Welcome = () => {
|
||||
return (
|
||||
<div className="custom-container h-full max-h-[600px] rounded-2xl flex items-center justify-center">
|
||||
<Image src={LOGO} alt='logo' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Welcome;
|
||||
Reference in New Issue
Block a user