init create-fias
This commit is contained in:
nabijonovdavronbek619@gmail.com
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;
|
||||
32
src/widgets/welcome/index.tsx
Normal file
32
src/widgets/welcome/index.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { getPosts } from '@/shared/config/api/testApi';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
|
||||
const Welcome = () => {
|
||||
const { data } = useQuery({
|
||||
queryKey: ['posts'],
|
||||
queryFn: () => getPosts({ _limit: 1 }),
|
||||
});
|
||||
|
||||
console.log('CSR posts', data);
|
||||
|
||||
return (
|
||||
<div className="custom-container h-full bg-accent min-h-[400px] rounded-2xl flex items-center justify-center">
|
||||
<Link
|
||||
className="github-button"
|
||||
href="https://github.com/fiasuz/create-fias"
|
||||
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
||||
data-icon="octicon-star"
|
||||
data-size="large"
|
||||
aria-label="Star fiasuz/create-fias on GitHub"
|
||||
>
|
||||
Star on github
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Welcome;
|
||||
Reference in New Issue
Block a user