23 |
24 | 
29 |
30 |
31 |
50 |
51 |
52 |
70 |
6 |
7 |
14 |
8 |
13 |
9 |
10 |
11 |
12 | {error}
} 75 | 76 | {!loading && !error && !components.length && ( 77 |
78 |
88 | )}
89 |
90 | We didn't find any component that matches your search
79 |Why don't you create it?
80 | 81 | 85 | Go to editor 86 | 87 |
7 |
18 |
19 | TailwindHub
8 |9 | Free, open-source platform to share Tailwind components 10 |
11 | 15 | Go to editor 16 | 17 |
20 | 
27 | 
34 | 
41 | 
48 |
49 |
27 |
34 |
41 |
48 |
13 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/(with-header)/components/shared/Login.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useSupabase } from "@/hooks/useSupabase";
4 | import { useEffect, useState } from "react";
5 | import { Button } from "@/app/(with-header)/components/shared/Button";
6 | import { AuthSession } from "@supabase/supabase-js";
7 | import { IconLogout } from "@tabler/icons-react";
8 |
9 | export function Login() {
10 | const { supabase } = useSupabase();
11 | const [error, setError] = useState
13 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/(with-header)/u/[username]/[component]/components/ComponentPage.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentItem } from "@/types";
2 | import { getRelativeTime } from "@/utils/get-relative-time";
3 | import {
4 | IconCalendarEvent,
5 | IconCode,
6 | IconEye,
7 | IconHeart,
8 | } from "@tabler/icons-react";
9 | import { ComponentCode } from "./ComponentCode";
10 | import { ComponentPreview } from "./ComponentPreview";
11 | import { Tabs } from "@/app/components/shared/Tabs";
12 | import { encode } from "@/utils/encode-decode-url";
13 | import { CopyToClipboardButton } from "@/app/components/shared/CopyToClipboardButton";
14 |
15 | type ComponentPageProps = ComponentItem;
16 |
17 | export function ComponentPage({
18 | author_avatar_url,
19 | author_username,
20 | created_at,
21 | html_code,
22 | likes,
23 | tags,
24 | title,
25 | }: ComponentPageProps) {
26 | return (
27 | {code}
14 |
29 |
82 | Preview
114 | {title}
30 | 31 |
32 |
76 |
77 |
33 |
37 |
44 | {author_username}
45 |
46 |
49 |
53 |
54 |
66 | {tags?.map((tag) => (
67 |
71 | {tag}
72 |
73 | ))}
74 |
75 |
87 |
92 | ),
93 | id: 1,
94 | },
95 | {
96 | label: (
97 |
98 | Code
88 |
90 |
103 |
108 | ),
109 | id: 2,
110 | },
111 | ]}
112 | />
113 |
104 |
106 |
12 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/(with-header)/u/[username]/[component]/layout.tsx:
--------------------------------------------------------------------------------
1 | export default function ComponentPageLayout({
2 | children,
3 | }: {
4 | children: React.ReactNode;
5 | }) {
6 | return (
7 |
8 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/(with-header)/u/[username]/[component]/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 | return (
3 | <>
4 | {children}
9 |
5 |
6 |
20 |
21 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/(with-header)/u/[username]/[component]/not-found.tsx:
--------------------------------------------------------------------------------
1 | export default function ComponentNotFound() {
2 | return component not found
; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/(with-header)/u/[username]/[component]/page.tsx: -------------------------------------------------------------------------------- 1 | import { createServerComponentSupabaseClient } from "@supabase/auth-helpers-nextjs"; 2 | import { cookies, headers } from "next/headers"; 3 | import { type Database } from "@/types/db"; 4 | import { type ComponentItem as TComponentItem } from "@/types"; 5 | import { unsluglify } from "@/utils/url-formatting"; 6 | import { ComponentPage } from "./components/ComponentPage"; 7 | import { Metadata } from "next"; 8 | import { BASE_URL } from "@/constants"; 9 | import { notFound } from "next/navigation"; 10 | 11 | type PageProps = { 12 | params: { username: string; component: string }; 13 | }; 14 | 15 | export default async function Page({ params }: PageProps) { 16 | const supabase = createServerComponentSupabaseClient
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 | {Array(10)
23 | .fill(null)
24 | .map((_, index) => (
25 |
28 |
29 | user not found
; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/(with-header)/u/[username]/page.tsx: -------------------------------------------------------------------------------- 1 | import { type Metadata } from "next"; 2 | import { BASE_URL } from "@/constants"; 3 | import { Icon3dCubeSphere, IconHeart } from "@tabler/icons-react"; 4 | import { createClient } from "@supabase/supabase-js"; 5 | import ENV from "@/constants/env"; 6 | import { notFound } from "next/navigation"; 7 | import { ComponentsList } from "@/app/(with-header)/components/ComponentsList/ComponentsList"; 8 | import { ComponentItem } from "@/types"; 9 | import { UserMetadata } from "@/types/user"; 10 | 11 | type PageProps = { 12 | params: { username: string }; 13 | }; 14 | 15 | export async function generateMetadata({ 16 | params, 17 | }: PageProps): Promise
99 |
100 | 
107 |
108 |
111 |
112 |
124 |
125 | {userData.name}
109 |@{userData.user_name}
110 |
128 | {Array.isArray(data) && data && (
129 |
135 | {name}
14 |{user_name}
15 |
62 | 
69 |
70 | ) : (
71 |
72 | 
79 |
86 | )}
87 |
80 |
85 | 81 | {username} 82 |
83 | tailwindhub.dev/u/{username} 84 |
17 | {isLoginModalOpen ? (
18 |
19 |
24 | ) : null}
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/components/shared/CopyToClipboardButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { IconCheck, IconCopy } from "@tabler/icons-react";
4 | import { useEffect, useState } from "react";
5 |
6 | interface Props
7 | extends React.DetailedHTMLProps<
8 | React.ButtonHTMLAttributes20 | Login via GitHub 21 |
22 |
42 | {items.map(({ element, id }) => (
43 |
44 | {element}
45 |
46 | ))}
47 |
48 |
45 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/app/editor/components/CodeEditor.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from "react";
2 | import MonacoEditor, { Monaco } from "@monaco-editor/react";
3 | import { HTML_CODE_SEARCH_PARAM, LOCAL_STORAGE_KEYS } from "@/constants";
4 | import { emmetHTML } from "emmet-monaco-es";
5 | import BlackboardTheme from "@/themes/Blackboard.json";
6 | import { registerTailwindCSSWorker } from "@/utils/register-tailwindcss-worker";
7 | import { CodeEditorRef, CodePreviewRef } from "@/app/editor/types";
8 | import { Preview } from "@/app/editor/components/Preview/Preview";
9 | import { EditorLayout } from "@/types";
10 | import { HomeLink } from "@/app/components/shared/HomeLink";
11 | import { EditorLayoutSelector } from "./EditorLayoutSelector";
12 | import { ResizableSection } from "./ResizableSection";
13 | import { debounce } from "@/utils/debounce";
14 | import { EditorActionsMenu } from "./EditorActionsMenu";
15 |
16 | const DEFAULT_LAYOUT: EditorLayout = "preview-and-editor-columns";
17 |
18 | type Props = {
19 | // eslint-disable-next-line react/no-unused-prop-types
20 | codePreviewRef: CodePreviewRef;
21 | codeEditorRef: CodeEditorRef;
22 | initialCode: string;
23 | };
24 |
25 | export function CodeEditor({
26 | codeEditorRef,
27 | codePreviewRef,
28 | initialCode,
29 | }: Props) {
30 | const [code, setCode] = useState(initialCode);
31 | const [wordWrap, setWordWrap] = useState(true);
32 | const [hasUnsavedProgress, setHasUnsavedProgress] = useState(false);
33 | const [layout, setLayout] = useState(DEFAULT_LAYOUT);
34 | const [isResizable, setIsResizable] = useState(false);
35 | const [isSavingCode, setIsSavingCode] = useState(false);
36 |
37 | const handleLayoutChange = (layout: EditorLayout) => {
38 | setLayout(layout);
39 | };
40 |
41 | const handleFormatCode = useCallback(() => {
42 | codeEditorRef.current?.getAction?.("editor.action.formatDocument")?.run?.();
43 | }, [codeEditorRef]);
44 |
45 | const handleSaveCode = useCallback(() => {
46 | if (!hasUnsavedProgress) return;
47 | setIsSavingCode(true);
48 | handleFormatCode();
49 |
50 | setTimeout(() => {
51 | const codeToSave = codeEditorRef.current?.getValue();
52 |
53 | if (codeToSave != null) {
54 | localStorage.setItem(
55 | LOCAL_STORAGE_KEYS.HTML_CODE,
56 | JSON.stringify({ html_code: codeToSave })
57 | );
58 | setHasUnsavedProgress(false);
59 | }
60 | setIsSavingCode(false);
61 | }, 800);
62 | }, [codeEditorRef, handleFormatCode, hasUnsavedProgress]);
63 |
64 | const handleConfigureIntellisense = useCallback(async (monaco: Monaco) => {
65 | const { cssDefaults } = monaco.languages.css;
66 |
67 | if (cssDefaults.options.data?.dataProviders?.tailwindcssData) return;
68 |
69 | const { configureMonacoTailwindcss, tailwindcssData } = await import(
70 | "monaco-tailwindcss"
71 | );
72 |
73 | cssDefaults.setOptions({
74 | data: {
75 | dataProviders: {
76 | tailwindcssData,
77 | },
78 | },
79 | });
80 | configureMonacoTailwindcss(monaco, {});
81 | }, []);
82 |
83 | useEffect(() => {
84 | const listenKeyboard = (e: KeyboardEvent) => {
85 | if (e.altKey && e.key === "z") {
86 | setWordWrap((currentWordWrap) => !currentWordWrap);
87 | }
88 | if (e.ctrlKey && e.key === "s") {
89 | e.preventDefault();
90 |
91 | handleSaveCode();
92 | }
93 | };
94 |
95 | document.addEventListener("keydown", listenKeyboard);
96 |
97 | return () => document.removeEventListener("keydown", listenKeyboard);
98 | }, [codeEditorRef, handleSaveCode]);
99 |
100 | useEffect(() => {
101 | const checkForUnsavedProgress = (e: BeforeUnloadEvent) => {
102 | if (hasUnsavedProgress) {
103 | e.preventDefault();
104 | e.returnValue = "";
105 | }
106 | };
107 |
108 | window.addEventListener("beforeunload", checkForUnsavedProgress);
109 |
110 | return () => {
111 | window.removeEventListener("beforeunload", checkForUnsavedProgress);
112 | };
113 | }, [hasUnsavedProgress]);
114 |
115 | useEffect(() => {
116 | registerTailwindCSSWorker();
117 |
118 | const isThereCodeInURL =
119 | new URLSearchParams(window.location.search).get(HTML_CODE_SEARCH_PARAM) !=
120 | null;
121 |
122 | if (isThereCodeInURL) return;
123 |
124 | const { html_code: INITIAL_CODE_EDITOR_VALUE } = JSON.parse(
125 | localStorage.getItem(LOCAL_STORAGE_KEYS.HTML_CODE) ?? "{}"
126 | );
127 |
128 | if (INITIAL_CODE_EDITOR_VALUE != null) setCode(INITIAL_CODE_EDITOR_VALUE);
129 | }, []);
130 |
131 | // eslint-disable-next-line react-hooks/exhaustive-deps
132 | const debouncedHandleChange = useCallback(
133 | debounce(
134 | (code?: string) => {
135 | setCode(code ?? "");
136 | setHasUnsavedProgress(true);
137 | },
138 | 500,
139 | false
140 | ),
141 | [setCode, setHasUnsavedProgress]
142 | );
143 |
144 | const toggleIsResizable = () => setIsResizable(true);
145 |
146 | const Editor = (
147 |
46 | {currentBreakpoint.width}
47 | {" "}×{" "}
48 | {currentBreakpoint.height}
49 |
50 |
51 |
67 | loading editor...
} 163 | options={{ 164 | minimap: { enabled: false }, 165 | wordWrap: wordWrap ? "on" : "off", 166 | }} 167 | /> 168 | ); 169 | 170 | return ( 171 | <> 172 |
175 |
298 | );
299 | }
300 |
--------------------------------------------------------------------------------
/src/app/editor/components/EditorActionsMenu.tsx:
--------------------------------------------------------------------------------
1 | import { SpinnerLoader } from "@/app/components/shared/SpinnerLoader";
2 | import { HTML_CODE_SEARCH_PARAM } from "@/constants";
3 | import { encode } from "@/utils/encode-decode-url";
4 | import { IconCheck, IconDeviceFloppy, IconShare } from "@tabler/icons-react";
5 | import { useState } from "react";
6 | import { CodeEditorForm } from "@/app/editor/components/CodeEditorForm";
7 | import { CodeEditorRef, CodePreviewRef } from "../types";
8 | import { Button } from "@/app/(with-header)/components/shared/Button";
9 |
10 | type Props = {
11 | handleSaveCode: () => void;
12 | isSavingCode: boolean;
13 | hasUnsavedProgress: boolean;
14 | code: string;
15 | codeEditorRef: CodeEditorRef;
16 | codePreviewRef: CodePreviewRef;
17 | };
18 |
19 | export function EditorActionsMenu({
20 | handleSaveCode,
21 | hasUnsavedProgress,
22 | code,
23 | isSavingCode,
24 | codeEditorRef,
25 | codePreviewRef,
26 | }: Props) {
27 | const [shared, setShared] = useState(false);
28 |
29 | const handleShareLink = () => {
30 | navigator.clipboard
31 | .writeText(
32 | `https://tailwindhub.dev/editor?${HTML_CODE_SEARCH_PARAM}=${encode(
33 | code
34 | )}`
35 | )
36 | .then(() => {
37 | setShared(true);
38 | setTimeout(() => {
39 | setShared(false);
40 | }, 3000);
41 | });
42 | };
43 |
44 | return (
45 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/app/editor/components/EditorLayoutSelector.tsx:
--------------------------------------------------------------------------------
1 | import { EditorLayout } from "@/types";
2 | import {
3 | IconCode,
4 | IconEye,
5 | IconLayoutColumns,
6 | IconLayoutRows,
7 | IconTextResize,
8 | } from "@tabler/icons-react";
9 |
10 | const LAYOUT_OPTIONS: Array<{
11 | layoutName: EditorLayout;
12 | icon: React.ReactElement;
13 | }> = [
14 | {
15 | layoutName: "preview-and-editor-columns",
16 | icon:
184 |
291 |
292 |
189 | {imageToCrop && (
190 |
205 |
289 |
290 |
191 |
196 | )}
197 |
198 | {isCloningCodePreview && (
199 |
200 |
202 | )}
203 |
204 | Cloning code preview...
{" "} 201 |
206 | {isGeneratingCodePreview ? (
207 |
232 |
288 |
210 | 
215 |
216 |
223 |
224 | ) : (
225 |
226 |
227 | There was an error generating the preview of your component
228 |
229 |
230 | )}
231 |
293 |
294 | Publish
296 |
297 |
98 | setCrop(percentCrop)}
101 | onComplete={(c) => setCompletedCrop(c)}
102 | aspect={aspect}
103 | className="w-full"
104 | >
105 | 
112 |
113 |
114 | )}
115 | {completedCrop && (
116 |