= ({
13 | slug,
14 | pageNumber,
15 | lastPage,
16 | }) => {
17 | return (
18 |
43 | );
44 | };
45 |
46 | export default Pagination;
47 |
--------------------------------------------------------------------------------
/components/ui/Preview/PreviewApp.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { MDXRemoteSerializeResult } from "next-mdx-remote";
3 | import { usePathname } from "next/navigation";
4 | import { useState } from "react";
5 | import {
6 | CodeBlock,
7 | Component,
8 | ComponentCards,
9 | ComponentDetails,
10 | } from "types/types";
11 | import Preview from ".";
12 |
13 | interface ComponentData extends Component, ComponentDetails, CodeBlock {
14 | mdxSource: MDXRemoteSerializeResult;
15 | }
16 |
17 | interface Props {
18 | components: ComponentData[];
19 | }
20 |
21 | export default ({ components }: Props) => {
22 | const pathname = usePathname();
23 |
24 | return (
25 | <>
26 | {components?.map((item: ComponentData, idx: number) =>
27 | item.isActive ? (
28 |
31 | ) : (
32 | ""
33 | )
34 | )}
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/components/ui/PreviewSwitch/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { CodeBracketIcon, TvIcon } from "@heroicons/react/24/outline";
4 | import Button from "../Button";
5 |
6 | type Props = {
7 | preview: boolean;
8 | setPreview: (type: boolean) => void;
9 | };
10 |
11 | const SwitchBtn = ({ preview, setPreview }: Props) => (
12 | setPreview(!preview)}
14 | className="flex gap-x-3 text-sm text-zinc-50 bg-zinc-800 hover:bg-zinc-700 rounded-lg w-50 py-2 shadow-sm"
15 | >
16 | Code
17 | {preview ? (
18 |
23 | );
24 |
25 | export default ({ preview, setPreview }: Props) => {
26 | return (
27 |
28 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/components/ui/Sidebar/NavLink.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { usePathname } from "next/navigation";
3 | import { ReactNode } from "react";
4 | import mergeTW from "utils/mergeTW";
5 |
6 | const NavLink = ({ ...props }) => {
7 | const {
8 | children,
9 | href = "",
10 | className = "",
11 | active = "",
12 | }: {
13 | children?: ReactNode;
14 | href?: string;
15 | className?: string;
16 | active?: string;
17 | } = props;
18 |
19 | const pathname = usePathname();
20 |
21 | const isActive: boolean = pathname == href;
22 | const activeClass = isActive ? active : "";
23 |
24 | return (
25 |
39 | {children}
40 |
41 |
42 | );
43 | };
44 |
45 | export default NavLink;
46 |
--------------------------------------------------------------------------------
/components/ui/SupportedFrameworks/index.tsx:
--------------------------------------------------------------------------------
1 | import FrameworksTabs from "./FrameworksTabs";
2 | import PreviewCard from "./PreviewCard";
3 |
4 | export default () => {
5 | return (
6 |
7 |
8 |
9 |
Use your favorite framework
10 |
11 | Copy and paste the components you want with your favorite JS
12 | framework
13 |
14 |
15 |
19 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/components/ui/Tabs/TabsTrigger.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import * as Tabs from "@radix-ui/react-tabs";
3 | import { motion } from "framer-motion";
4 | import LazyMotionWrapper from "components/LazyMotionWrapper";
5 |
6 | export default ({
7 | children,
8 | value,
9 | selectedTab,
10 | }: {
11 | children: ReactNode;
12 | value: any;
13 | selectedTab: any;
14 | }) => (
15 |
19 | {children}
20 | {selectedTab == value ? (
21 |
22 |
28 | ) : (
29 | ""
30 | )}
31 |
32 | );
33 |
--------------------------------------------------------------------------------
/components/ui/TechStackSwitch/index.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEventHandler } from "react";
2 |
3 | export default ({
4 | setTechStack,
5 | framework,
6 | }: {
7 | setTechStack: (type: any) => void;
8 | framework: string;
9 | }) => {
10 | // Select menu items
11 | const techStack =
12 | framework == "react"
13 | ? [
14 | {
15 | label: "React and Tailwind",
16 | key: "jsxTail",
17 | },
18 | {
19 | label: "React and CSS",
20 | key: "jsxCss",
21 | },
22 | ]
23 | : [
24 | {
25 | label: "Vue and Tailwind",
26 | key: "vueTail",
27 | },
28 | {
29 | label: "Vue and CSS",
30 | key: "vueCss",
31 | },
32 | ];
33 |
34 | return (
35 |
36 |
setTechStack(e.target.value)}
39 | >
40 | {techStack.map((item, idx) => (
41 |
42 | {item.label}
43 |
44 | ))}
45 |
46 |
52 |
58 |
10 |
11 |
17 |
18 |
27 |
39 |
47 |
53 |
54 |
55 | );
56 |
--------------------------------------------------------------------------------
/components/ui/TemplateCTA/TemplateScoresCard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 | import { useInView } from "framer-motion";
5 | import { useRef } from "react";
6 |
7 | export default () => {
8 | const [progressCount, setProgressCount] = useState(5);
9 |
10 | const ref = useRef(null);
11 | const isInView = useInView(ref, { once: true });
12 |
13 | useEffect(() => {
14 | if (isInView && progressCount < 95) {
15 | setTimeout(() => {
16 | setProgressCount((count) => count + 1);
17 | }, 50);
18 | }
19 | }, [progressCount, isInView]);
20 |
21 | return (
22 |
23 |
Good template scores
24 |
25 | Our templates are made to be super fast, easy for everyone to use, and
26 | show up well on search engines.
27 |
28 |
29 |
30 |
31 |
42 |
43 |
54 |
55 | {progressCount}
56 |
57 |
58 |
59 |
11 |
Ready to use templates
12 |
13 | Explore pre-designed templates to quickly begin building your
14 | application or website.
15 |
16 |
17 |
33 |
7 |
9 |
10 |
Professional website templates
11 |
12 | A collection of professional and beautifully designed website
13 | templates, built on top of React, Next.js with Tailwind CSS.
14 |
15 |
16 |
17 |
18 |
21 |
23 | );
24 |
--------------------------------------------------------------------------------
/components/ui/TemplateCard/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { Templates } from "types/types";
3 |
4 | export default ({ item }: { item: Templates }) => (
5 |
6 |
8 |
13 |
15 |
16 |
17 |
{item.template_name}
18 |
19 | ${item.price}
20 | $0
21 |
22 |
23 |
{item.description}
24 |
25 |
28 | );
29 |
--------------------------------------------------------------------------------
/components/variants.ts:
--------------------------------------------------------------------------------
1 | const buttonNormalize =
2 | "py-2.5 px-4 rounded-full duration-150 font-medium text-center text-sm";
3 | export const buttonVariants = {
4 | default: "bg-zinc-50 hover:bg-zinc-200 " + buttonNormalize,
5 | shiny: "bg-shiny text-zinc-300 " + buttonNormalize,
6 | };
7 |
--------------------------------------------------------------------------------
/content/intro.mdx:
--------------------------------------------------------------------------------
1 | # What is Float UI?
2 |
3 | Float UI is a collection of modern UI components and website templates, built on top of
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 404 Error
20 |
21 |
22 | Page not found
23 |
24 |
25 | Sorry, the page you are looking for could not be found or has been removed.
26 |
27 |
28 | Go back
29 |
30 |
32 |
33 |
34 |
35 |
37 | )
38 | }
39 |
40 |
--------------------------------------------------------------------------------
/previewsComponents/FUI404PageWithLogo.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUI404PageWithLogo() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Page not found
19 |
20 |
21 | Sorry, the page you are looking for could not be found or has been removed.
22 |
23 |
24 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/previewsComponents/FUIAlertDanger.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIAlertDanger() {
10 | return (
11 |
12 |
13 |
14 |
19 |
20 |
21 | Error
22 |
23 |
24 | Sorry something wrong happened, please enter a correct email.
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
34 |
12 |
13 |
14 |
19 |
20 |
21 | Your account is blocked
22 |
23 |
24 |
25 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26 |
27 |
28 |
29 |
30 |
31 |
12 |
13 |
14 |
19 |
20 | There is no account associated with this email address. Sign up?
21 |
22 |
23 |
24 |
12 |
13 |
14 |
19 |
20 | we have just released a new app version with so many features, you can check it out?
21 |
22 |
23 |
24 |
12 |
13 |
14 |
19 |
20 |
21 | Success
22 |
23 |
24 | Team member has been added successfully.
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
34 |
12 |
13 |
14 |
19 |
20 |
21 | Warning
22 |
23 |
24 | Manage your team members permissions from your dashboard
25 |
26 |
27 |
28 |
29 |
12 |
13 |
14 |
19 |
20 |
21 | Bandwidth is up to 300GB
22 |
23 |
24 |
25 | Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. et dolore magna aliqua.
26 |
27 |
28 |
29 |
30 |
31 |
12 |
13 | Amount
14 |
15 |
16 |
17 |
18 | USD
19 | EUR
20 | MRO
21 |
22 |
23 |
28 |
29 |
12 |
13 | Amount
14 |
15 |
16 |
17 | $
18 |
19 |
24 |
25 |
26 | USD
27 | EUR
28 | MRO
29 |
30 |
31 |
32 |
32 | {avatarData.map((item, idx) => {
33 | return (
34 |
38 | {item.name}
40 |
41 | );
42 | })}
43 |
35 | {avatarData.map((item, idx) => {
36 | return (
37 |
41 | {item.name}
46 |
47 | );
48 | })}
49 |
50 | Join 5.000+ users
51 |
52 |
11 | {/* Avatar 1 */}
12 |
13 |
21 | CT
22 |
23 |
34 |
35 | {/* Avatar 2 */}
36 |
37 |
38 |
46 | CT
47 |
48 |
54 |
60 |
61 |
62 |
11 |
12 | CT
17 |
18 |
19 | CT
24 |
25 |
26 | CT
31 |
32 |
33 | CT
38 |
39 |
40 | CT
45 |
46 |
11 | {/* Avatar 1 */}
12 |
13 |
21 | CT
22 |
23 |
24 | Jane Smith
25 |
26 | janesmith@example.com
27 |
28 |
29 |
30 | {/* Avatar 2 */}
31 |
32 |
40 | CT
41 |
42 |
43 | Nikita Andrew
44 |
45 | nikitaandrew@example.com
46 |
47 |
48 |
49 |
12 |
13 |
26 |
27 |
28 |
30 |
31 |
32 |
12 |
13 |
14 | We just launched our new product! you can check out all features now.
15 |
16 |
17 | Learn more
18 |
19 |
20 |
12 |
13 |
14 |
19 |
20 | We just launched a new version of our library.
21 |
22 |
23 |
24 | Learn more
25 |
26 |
27 |
12 |
13 |
14 |
15 | Page not found
16 |
17 |
18 | Sorry, the page you are looking for could not be found or has been removed.
19 |
20 |
21 | Go back
22 |
23 |
25 |
26 |
27 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/previewsComponents/FUIBasicRadioGroup.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIBasicRadioGroup() {
10 | const radios = ["Write and Read", "Read only", "Write only"]
11 |
12 | return (
13 |
14 |
15 |
Select user role
16 |
36 |
37 |
32 |
33 |
34 | {
35 | stats.map((item, idx) => (
36 |
37 | {item.data}
38 | {item.title}
39 |
40 | ))
41 | }
42 |
43 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/previewsComponents/FUIBasicSteps.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIBasicSteps() {
10 |
11 | const [steps, setStep] = React.useState({
12 | stpesCount: [1, 2, 3, 4],
13 | currentStep: 2
14 | })
15 |
16 | return (
17 |
18 |
19 | {steps.stpesCount.map((item, idx) => (
20 |
21 | idx + 1 ? "bg-indigo-600 border-indigo-600" : "" || steps.currentStep == idx + 1 ? "border-indigo-600" : ""}`}>
22 |
23 | {
24 | steps.currentStep > idx + 1 ? (
25 |
26 |
28 | ) : ""
29 | }
30 |
33 | ))}
34 |
35 |
23 |
27 | {tabItems.map((item, idx) => (
28 |
33 |
34 | {item}
35 |
36 |
37 | ))}
38 |
39 | {tabItems.map((item, idx) => (
40 |
41 |
42 | This is {item} Tab
43 |
44 |
45 | ))}
46 |
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/previewsComponents/FUIButtonsWithLowColors.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIButtonsWithLowColors() {
10 | return (
11 |
12 |
15 | Button
16 |
17 |
20 | Button
21 |
22 |
25 | Button
26 |
27 |
30 | Button
31 |
32 |
33 |
36 | Button
37 |
38 |
39 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/previewsComponents/FUIButtonsWithShadow.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIButtonsWithShadow() {
10 | return (
11 |
12 |
15 | Button
16 |
17 |
18 |
21 | Button
22 |
23 |
24 |
27 | Button
28 |
29 |
30 |
33 | Button
34 |
35 |
36 |
39 | Button
40 |
41 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/previewsComponents/FUICentered404PageWithTowLinks.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUICentered404PageWithTowLinks() {
10 | return (
11 |
12 |
13 |
14 |
15 | 404 Error
16 |
17 |
18 | Page not found
19 |
20 |
21 | Sorry, the page you are looking for could not be found or has been removed.
22 |
23 |
31 |
32 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/previewsComponents/FUICentredCta.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUICentredCta() {
10 | return (
11 |
12 |
13 |
14 |
15 | Professional services
16 |
17 |
18 | Build the future with us
19 |
20 |
21 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.
22 |
23 |
24 |
29 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/previewsComponents/FUICentredCtaWithTwoLinks.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUICentredCtaWithTwoLinks() {
10 | return (
11 |
12 |
13 |
14 |
15 | Build the future with us
16 |
17 |
18 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.
19 |
20 |
21 |
29 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/previewsComponents/FUIColorPickerRadioGroup.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIColorPickerRadioGroup() {
10 | const colors = [{ bg: "bg-[#2563EB]", ring: "ring-[#2563EB]" }, { bg: "bg-[#8B5CF6]", ring: "ring-[#8B5CF6]" }, { bg: "bg-[#DB2777]", ring: "ring-[#DB2777]" }, { bg: "bg-[#475569]", ring: "ring-[#475569]" }, { bg: "bg-[#EA580C]", ring: "ring-[#EA580C]" }]
11 |
12 | return (
13 |
14 |
Pick your favorite color
15 |
32 |
12 |
13 |
14 |
15 | Build the future with us
16 |
17 |
18 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.
19 |
20 |
21 |
26 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/previewsComponents/FUICtaWithLinkOnTheSide.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUICtaWithLinkOnTheSide() {
10 | return (
11 |
12 |
13 |
14 |
15 | Build your SaaS solution with help from our experts
16 |
17 |
18 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
19 |
20 |
21 |
26 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/previewsComponents/FUIDarkCta.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIDarkCta() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 | Get Unlimited Access To All Templates
17 |
18 |
19 | Nam erat risus, sodales sit amet lobortis ut, finibus eget metus. Cras aliquam ante ut tortor posuere feugiat. Duis sodales nisi id porta lacinia.
20 |
21 |
22 |
36 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/previewsComponents/FUIDarkCtaWithLinkOnTheSide.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIDarkCtaWithLinkOnTheSide() {
10 | return (
11 |
12 |
13 |
14 |
15 | Build your SaaS solution with help from our experts
16 |
17 |
18 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
19 |
20 |
21 |
26 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/previewsComponents/FUIDarkStatsWithInCards.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIDarkStatsWithInCards() {
10 |
11 | const stats = [
12 | {
13 | data: "35K",
14 | title: "Customers"
15 | },
16 | {
17 | data: "40+",
18 | title: "Countries"
19 | },
20 | {
21 | data: "30M+",
22 | title: "Total revenue"
23 | },
24 | ]
25 |
26 | return (
27 |
28 |
29 |
30 |
31 | Our customers are always happy
32 |
33 |
34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.
35 |
36 |
37 |
38 |
39 | {
40 | stats.map((item, idx) => (
41 |
42 | {item.data}
43 | {item.title}
44 |
45 | ))
46 | }
47 |
48 |
49 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/previewsComponents/FUIDefaultSelectMenu.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIDefaultSelectMenu() {
10 | return (
11 |
12 |
18 |
24 |
25 | Project manager
26 | Software engineer
27 | IT manager
28 | UI / UX designer
29 |
30 |
12 |
15 | Button
16 |
17 |
18 |
21 | Button
22 |
23 |
24 |
27 | Button
28 |
29 |
30 |
33 | Button
34 |
35 |
36 |
39 | Button
40 |
41 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/previewsComponents/FUIEmailInput.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIEmailInput() {
10 | return (
11 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/previewsComponents/FUIHeroSectionWithBottomImage.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIHeroSectionWithBottomImage() {
10 | return (
11 |
12 |
13 |
14 |
15 | Build products for everyone
16 |
17 |
18 | Design your projects faster with the largest figma UI kit
19 |
20 |
21 | Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
22 |
23 |
31 |
32 |
33 |
34 |
35 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/previewsComponents/FUIPhoneNumberInput.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIPhoneNumberInput() {
10 | return (
11 |
12 |
13 | Phone number
14 |
15 |
16 |
17 |
18 | US
19 | ES
20 | MR
21 |
22 |
23 |
28 |
29 |
12 |
15 | Button
16 |
17 |
18 |
19 |
22 | Button
23 |
24 |
25 |
28 | Button
29 |
30 |
31 |
34 | Button
35 |
36 |
37 |
40 | Button
41 |
42 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/previewsComponents/FUIPrimaryCta.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIPrimaryCta() {
10 | return (
11 |
12 |
13 |
14 |
15 | build your websites with high performance
16 |
17 |
18 | Nam erat risus, sodales sit amet lobortis ut, finibus eget metus. Cras aliquam ante ut tortor posuere feugiat. Duis sodales nisi id porta lacinia.
19 |
20 |
21 |
24 | Try it out
25 |
26 |
28 |
29 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/previewsComponents/FUIRoundedButtons.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIRoundedButtons() {
10 | return (
11 |
12 |
13 |
16 | Button
17 |
18 |
19 |
22 | Button
23 |
24 |
25 |
28 | Button
29 |
30 |
31 |
34 | Button
35 |
36 |
37 |
40 | Button
41 |
42 |
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/previewsComponents/FUISearchInput.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUISearchInput() {
10 | return (
11 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/previewsComponents/FUISecondaryButtons.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUISecondaryButtons() {
10 | return (
11 |
12 |
15 | Button
16 |
17 |
18 |
21 | Button
22 |
23 |
24 |
27 | Button
28 |
29 |
30 |
33 | Button
34 |
35 |
36 |
39 | Button
40 |
41 |
42 | )
43 | }
44 |
45 |
--------------------------------------------------------------------------------
/previewsComponents/FUISecondaryCta.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUISecondaryCta() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 | build your websites with high performance
17 |
18 |
19 | Nam erat risus, sodales sit amet lobortis ut, finibus eget metus. Cras aliquam ante ut tortor posuere feugiat. Duis sodales nisi id porta lacinia.
20 |
21 |
24 | Try it out
25 |
26 |
28 |
29 |
30 |
31 |
36 |
37 |
39 | )
40 | }
41 |
42 |
--------------------------------------------------------------------------------
/previewsComponents/FUISecondaryNewsletter.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUISecondaryNewsletter() {
10 | return (
11 |
12 |
13 |
14 | Subscribe to our newsletter
15 |
16 |
17 | Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your email.
18 |
19 |
21 |
35 |
36 | Product updates, announcements, and discounts.
37 | Read our Privacy Policy
38 |
39 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/previewsComponents/FUISectionHeaderWithButtons.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUISectionHeaderWithButtons() {
10 | return (
11 |
12 |
13 |
14 |
15 | Analytics
16 |
17 |
18 |
32 |
33 |
12 |
13 |
14 |
15 | Team members
16 |
17 |
18 | Lorem Ipsum is simply dummy text of the printing and typesetting industry.
19 |
20 |
21 |
29 |
30 |
12 |
13 |
14 |
15 | Team members
16 |
17 |
18 | Lorem Ipsum text of the printing and typesetting industry.
19 |
20 |
21 |
33 |
34 |
32 |
33 |
34 |
35 | We do our best to make customers always happy
36 |
37 |
38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.
39 |
40 |
41 |
42 |
43 | {
44 | stats.map((item, idx) => (
45 |
46 | {item.data}
47 | {item.title}
48 |
49 | ))
50 | }
51 |
52 |
53 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/previewsComponents/FUIStatsWithTitleAndDescription.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIStatsWithTitleAndDescription() {
10 |
11 | const stats = [
12 | {
13 | data: "35K",
14 | title: "Customers"
15 | },
16 | {
17 | data: "10K+",
18 | title: "Downloads"
19 | },
20 | {
21 | data: "40+",
22 | title: "Countries"
23 | },
24 | {
25 | data: "30M+",
26 | title: "Total revenue"
27 | },
28 | ]
29 |
30 | return (
31 |
32 |
33 |
34 |
35 | Our customers are always happy
36 |
37 |
38 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.
39 |
40 |
41 |
42 |
43 | {
44 | stats.map((item, idx) => (
45 |
46 | {item.data}
47 | {item.title}
48 |
49 | ))
50 | }
51 |
52 |
53 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/previewsComponents/FUIStepsWithLine.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIStepsWithLine() {
10 |
11 | const [steps, setStep] = React.useState({
12 | stepsItems: ["Profile", "Contact", "Identity", "Passport"],
13 | currentStep: 2
14 | })
15 |
16 | return (
17 |
18 |
19 | {steps.stepsItems.map((item, idx) => (
20 |
21 |
22 |
idx + 1 ? "bg-indigo-600" : "bg-gray-200"}`}>
23 |
24 |
idx + 1 ? "text-indigo-600" : ""}`}>Step {idx + 1}
25 |
26 | {item}
27 |
28 |
29 |
31 | ))}
32 |
33 |
12 |
13 |
14 |
15 |
16 |
17 | “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et est hendrerit, porta nunc vitae, gravida justo. Nunc fermentum magna lorem, euismod volutpat arcu volutpat et.“
18 |
19 |
20 |
21 |
22 |
23 | Martin escobar
24 | Founder of meta
25 |
26 |
28 |
29 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/previewsComponents/FUITestimonialCenteredWithLogo.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUITestimonialCenteredWithLogo() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et est hendrerit, porta nunc vitae, gravida justo. Nunc fermentum magna lorem, euismod volutpat arcu volutpat et.“
21 |
22 |
23 |
24 |
25 |
26 | Martin escobar
27 | Founder of meta
28 |
29 |
31 |
32 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/previewsComponents/FUITestimonialWithBackgroundColor.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUITestimonialWithBackgroundColor() {
10 | return (
11 |
12 |
13 |
14 |
What people are saying
15 |
16 |
17 |
18 | “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et est hendrerit, porta nunc vitae, gravida justo. Nunc fermentum magna lorem, euismod volutpat arcu volutpat et.“
19 |
20 |
21 |
22 |
23 |
24 | Martin escobar
25 | Founder of meta
26 |
27 |
29 |
30 |
32 |
33 | )
34 | }
35 |
--------------------------------------------------------------------------------
/previewsComponents/FUIUploadFileCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import * as Avatar from "@radix-ui/react-avatar";
3 | import * as ContextMenu from "@radix-ui/react-context-menu";
4 | import * as Dialog from "@radix-ui/react-dialog";
5 | import * as Select from "@radix-ui/react-select";
6 | import * as Tabs from "@radix-ui/react-tabs";
7 | import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
8 |
9 | export default function FUIUploadFileCard() {
10 | return (
11 |
12 |
13 |
14 |
16 | Click to Upload your file or drag and drop your file here
17 |
18 |
19 |
12 |
13 | Username
14 |
15 |
16 |
17 | @
18 |
19 |
25 |
26 |
12 |
13 | Website URL
14 |
15 |
16 |
17 | https://
18 |
19 |
25 |
26 |
16 |
17 |
Previous
18 |
19 | Page {currentPage} of {pages.length}
20 |
21 |
Next
22 |
23 |
2 |
3 |
5 |
6 |
7 |
9 |
10 |
--------------------------------------------------------------------------------
/public/icons/tailwind.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/icons/vuejs.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/images/fb-icon.svg:
--------------------------------------------------------------------------------
1 |
3 |
4 | Group 6
5 | Created with Sketch.
6 |
8 |
9 |
11 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/readme/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MarsX-dev/floatui/70824397a5ca6eca3cff1bee37d8a6972d653860/readme/1.png
--------------------------------------------------------------------------------
/readme/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MarsX-dev/floatui/70824397a5ca6eca3cff1bee37d8a6972d653860/readme/2.png
--------------------------------------------------------------------------------
/readme/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MarsX-dev/floatui/70824397a5ca6eca3cff1bee37d8a6972d653860/readme/3.png
--------------------------------------------------------------------------------
/readme/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MarsX-dev/floatui/70824397a5ca6eca3cff1bee37d8a6972d653860/readme/4.png
--------------------------------------------------------------------------------
/styles/customize.css:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | }
4 |
5 | .max-w-screen {
6 | @apply max-w-screen-xl mx-auto px-4;
7 | }
8 |
9 | .faq-box::after,
10 | .faq-box::before {
11 | position: absolute;
12 | content: "";
13 | background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232563eb' fill-opacity='0.2' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
14 | width: 120px;
15 | height: 140px;
16 | z-index: -1;
17 | }
18 |
19 | .faq-box::before {
20 | top: -1em;
21 | left: -1em;
22 | }
23 |
24 | .faq-box::after {
25 | bottom: -1em;
26 | right: -1em;
27 | }
28 |
29 | .notf-right {
30 | animation: 0.4s notfRight forwards;
31 | }
32 |
33 | @keyframes notfRight {
34 | 0% {
35 | transform: translateX(5em);
36 | }
37 |
38 | 100% {
39 | transform: translateX(0);
40 | }
41 | }
42 |
43 | .notf-brogress {
44 | animation: 14s brogress forwards;
45 | }
46 |
47 | @keyframes brogress {
48 | 0% {
49 | width: 0%;
50 | }
51 |
52 | 100% {
53 | width: 100%;
54 | }
55 | }
56 |
57 | code {
58 | font-size: 15px !important;
59 | }
60 |
61 | pre {
62 | outline: 0 !important;
63 | }
64 |
65 | .remove-scrollbar::-webkit-scrollbar {
66 | -webkit-appearance: none;
67 | -moz-appearance: none;
68 | appearance: none;
69 | height: 0;
70 | }
71 |
--------------------------------------------------------------------------------
/styles/prismjs-theme.css:
--------------------------------------------------------------------------------
1 | code[class*=language-],pre[class*=language-]{color:#c5c8c6;text-shadow:0 1px rgba(0,0,0,.3);font-family:Inconsolata,Monaco,Consolas,'Courier New',Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#1f2937}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6;cursor:help}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | darkMode: "class",
3 | content: [
4 | "./app/**/*.{js,ts,jsx,tsx}",
5 | "./components/**/*.{js,ts,jsx,tsx}",
6 | "./package/**/*.{js,ts,jsx,tsx}",
7 | "./previewsComponents/**/*.{js,ts,jsx,tsx}",
8 | "./examples/**/*.{js,ts,jsx,tsx}",
9 | "./viewport/**/*.{js,ts,jsx,tsx}",
10 | "./componentsDB/**/*.md",
11 | ],
12 | theme: {
13 | extend: {},
14 | },
15 | plugins: [
16 | require("@tailwindcss/typography"),
17 | require("@tailwindcss/forms")({
18 | strategy: "class", // only generate classes
19 | }),
20 | ],
21 | };
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "target": "es5",
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "strict": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "incremental": true,
18 | "plugins": [
19 | {
20 | "name": "next"
21 | }
22 | ]
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
/types/types.ts:
--------------------------------------------------------------------------------
1 | export type ComponentCards = {
2 | id: string;
3 | cover_url: string;
4 | section_name: string;
5 | slug: string;
6 | description: string;
7 | count: number;
8 | isNew: boolean;
9 | };
10 |
11 | export type ComponentDetails = {
12 | id?: string;
13 | title?: string;
14 | slug?: string;
15 | category?: string;
16 | paid?: boolean | null;
17 | isActive?: boolean;
18 | };
19 |
20 | export type CodeBlock = {
21 | label?: string;
22 | code?: string;
23 | };
24 |
25 | export type Component = {
26 | ltr: {
27 | preview: string;
28 | react: {
29 | jsxTail: CodeBlock[];
30 | jsxCss: CodeBlock[];
31 | };
32 | };
33 | rtl: {
34 | preview: string;
35 | react: {
36 | jsxTail: CodeBlock[];
37 | jsxCss: CodeBlock[];
38 | };
39 | };
40 | };
41 |
42 | export type Templates = {
43 | id: string;
44 | banner_url: string;
45 | product_id: number;
46 | template_name: string;
47 | price: number;
48 | slug: string;
49 | templateFile: string;
50 | details: string;
51 | preview_url: string;
52 | description: string;
53 | created_at: string;
54 | };
55 |
56 | export type BlogPost = {
57 | slug: string;
58 | createdAt: string;
59 | headline: string;
60 | metaDescription: string;
61 | };
62 |
63 | export type Dir = "ltr" | "rtl";
64 | export type TechStack = "jsxTail" | "jsxCss";
65 |
--------------------------------------------------------------------------------
/utils/mergeTW.ts:
--------------------------------------------------------------------------------
1 | import { twMerge } from "tailwind-merge";
2 |
3 | export default (classNameValue: string, ...classes: string[]) =>
4 | twMerge(classNameValue, ...classes);
5 |
--------------------------------------------------------------------------------
/utils/seobot.ts:
--------------------------------------------------------------------------------
1 | export async function getPosts(page: number) {
2 | const key = process.env.SEOBOT_API_KEY;
3 | if (!key) throw Error("SEOBOT_API_KEY enviroment variable must be set");
4 |
5 | try {
6 | const res = await fetch(
7 | `https://app.seobotai.com/api/articles?key=${key}&page=${page}&limit=10`
8 | );
9 | const result = await res.json();
10 | return result?.data;
11 | } catch {
12 | return { total: 0, articles: [] };
13 | }
14 | }
15 |
16 | export async function getPost(slug: string) {
17 | const key = process.env.SEOBOT_API_KEY;
18 | if (!key) throw Error("SEOBOT_API_KEY enviroment variable must be set");
19 |
20 | try {
21 | const res = await fetch(
22 | `https://app.seobotai.com/api/article?key=${key}&slug=${slug}`,
23 | { cache: "no-store" }
24 | );
25 | const result = await res.json();
26 | return result?.data?.article;
27 | } catch {
28 | return null;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/viewport/index.tsx:
--------------------------------------------------------------------------------
1 | import Viewport from './components/Viewport';
2 |
3 | export default Viewport
--------------------------------------------------------------------------------
/viewport/template/index.ts:
--------------------------------------------------------------------------------
1 | const template:string = `
2 |
3 |
4 |
5 | Document
13 |
14 |
15 |
16 |
17 |
18 | `
19 |
20 | export default template
--------------------------------------------------------------------------------
3 | 
11 | // 
16 | 
16 | %20-%20Light.png)
34 | 
36 | 
22 |