20 | {children}
21 |
22 |
23 | )
24 | }
25 |
26 | export default SecondaryButton
27 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(landing)/_components/navigation/header.d.ts:
--------------------------------------------------------------------------------
1 | export type ProductCategoryProps = {
2 | name: string
3 | links: Array<{
4 | href: string
5 | external?: boolean
6 | name: string
7 | }>
8 | }
9 |
10 | export type BlogPostProps = {
11 | id: string
12 | imageSrc: string
13 | title: string
14 | description: string
15 | }
16 |
17 | export type AuthLinkProps = {
18 | href: string
19 | Icon: React.ComponentType
18 | 
24 |
26 | )
27 | }
28 |
29 | export default function MarqueeDemo({
30 | reverse = false
31 | }: {
32 | reverse?: boolean
33 | }) {
34 | return (
35 | {text}
25 |
36 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(landing)/_components/powered-by/carousel-brands.ts:
--------------------------------------------------------------------------------
1 | export const carouselbrands = [
2 | {
3 | iconSrc:
4 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd507261f4d64d555c90_Apple%20Icon.webp',
5 | text: 'Apple'
6 | },
7 | {
8 | iconSrc:
9 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd50800bda510d0058d4_Slack%20Icon.webp',
10 | text: 'Slack'
11 | },
12 | {
13 | iconSrc:
14 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd5094b722f62744d5f9_Discord%20Icon.webp',
15 | text: 'Discord'
16 | },
17 | {
18 | iconSrc:
19 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd5089af154f1bcc3356_Klarna%20Icon.webp',
20 | text: 'Klarna'
21 | },
22 | {
23 | iconSrc:
24 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd5035c3344bd742b7c2_Amazon%20Icon.webp',
25 | text: 'Amazon'
26 | },
27 | {
28 | iconSrc:
29 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd5089af154f1bcc3364_Meta%20Icon.webp',
30 | text: 'Meta'
31 | },
32 | {
33 | iconSrc:
34 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd5189af154f1bcc3420_Yelp%20Icon.webp',
35 | text: 'Yelp'
36 | },
37 | {
38 | iconSrc:
39 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd51800bda510d005915_Xing%20Icon.webp',
40 | text: 'Xing'
41 | },
42 | {
43 | iconSrc:
44 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd50fca0ab56c8130f39_Twitch%20Icon.webp',
45 | text: 'Twitch'
46 | },
47 | {
48 | iconSrc:
49 | 'https://cdn.prod.website-files.com/65b8e9cb3c15d9b62f057c9a/65bdfd5096bc5b82059cbe01_Android%20Icon.webp',
50 | text: 'Android'
51 | }
52 | ]
53 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(landing)/_components/powered-by/integration-title.module.scss:
--------------------------------------------------------------------------------
1 | .integrationTitle {
2 | grid-column-gap: 12px;
3 | grid-row-gap: 12px;
4 | text-align: center;
5 | flex-direction: column;
6 | align-items: center;
7 | width: 100%;
8 | max-width: 552px;
9 | margin-bottom: 100px;
10 | margin-left: auto;
11 | margin-right: auto;
12 | display: flex;
13 | transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
14 | rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
15 | opacity: 1;
16 | transform-style: preserve-3d;
17 | }
18 |
19 | .badge {
20 | grid-column-gap: 4px;
21 | grid-row-gap: 4px;
22 | border: 1px solid var(--white--6);
23 | background-color: var(--white--2);
24 | box-shadow: inset 0 -4px 12px 0 var(--white--10);
25 | backdrop-filter: blur(12px);
26 | color: var(--base--white);
27 | border-radius: 99px;
28 | align-items: center;
29 | padding: 4px 10px;
30 | font-size: 12px;
31 | line-height: 1.7;
32 | display: flex;
33 | }
34 |
35 | .integrationTitle h3 {
36 | margin-top: 20px;
37 | margin-bottom: 10px;
38 | color: var(--base--white);
39 | letter-spacing: -0.17px;
40 | font-family: 'Bricolage Grotesque', sans-serif;
41 | font-size: 40px;
42 | font-weight: 500;
43 | line-height: 1.2;
44 | }
45 |
46 | .gradientSpan {
47 | background-image: linear-gradient(
48 | to bottom,
49 | var(--base--white),
50 | var(--white--64)
51 | );
52 | -webkit-text-fill-color: transparent;
53 | background-clip: text;
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(landing)/_components/powered-by/integration-title.tsx:
--------------------------------------------------------------------------------
1 | import styles from './integration-title.module.scss'
2 |
3 | export default function IntegrationTitle() {
4 | return (
5 |
37 |
38 | {' '}
39 |
48 |
49 |
6 |
10 |
11 | You won't get AI pushed
12 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(landing)/_components/text-marquee/MarqueeItems.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { easeInOut, motion } from 'framer-motion'
4 | import HorizontalLine from '../horizontal-line'
5 | import UspMarquee from './usp-marquee'
6 | import styles from './video.module.scss'
7 | type LineDotProps = {
8 | position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'
9 | }
10 |
11 | function LineDot({ position }: LineDotProps) {
12 | return
13 | }
14 |
15 | function LinesGroup() {
16 | return (
17 |
7 |
9 | Application powered by
8 |
10 |
11 | You won't get AI pushed
12 |
down your throat here
13 |
14 |
15 |
18 |
19 |
20 |
25 | )
26 | }
27 |
28 | export default function MarqueeItems() {
29 | return (
30 |
31 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(landing)/layout.tsx:
--------------------------------------------------------------------------------
1 | import HomeLights from './_components/effects/home-lights'
2 | import LandingEffects from './_components/effects/landing-effects'
3 | // import './styles/landing.scss'
4 | import './styles/app.scss'
5 |
6 | export default function DashboardLayout({
7 | children
8 | }: {
9 | children: React.ReactNode
10 | }) {
11 | return (
12 | <>
13 |
33 |
39 |
41 |
49 |
42 |
43 |
44 |
47 |
14 |
20 |
32 | )}
33 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(miscellaneous)/hooks-showcase/geolocation/page.tsx:
--------------------------------------------------------------------------------
1 | import { HooksShowcaseWrapper } from '../_components/hooks-showcase-wrapper'
2 | import GeolocationUI from './_components/geolocation-showcase'
3 |
4 | export default function GeolocationDemo() {
5 | return (
6 |
15 |
18 | {actionButtons.length > 0 && (
19 | {title}
16 |{description}
17 |
21 | {actionButtons.map((button, index) => (
22 |
29 | ))}
30 |
31 |
34 | {children}
35 |
36 |
6 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/(non-dashboard)/(miscellaneous)/layout.tsx:
--------------------------------------------------------------------------------
1 | export default function ShowcaseLayout({
2 | children
3 | }: {
4 | children: React.ReactNode
5 | }) {
6 | return (
7 | <>
8 | Your Activity
7 |
25 |
44 |
26 | Income:
27 |
28 | €{summary.income}
29 |
30 |
31 |
32 | Expenses:
33 |
34 | €{summary.expenses}
35 |
36 |
37 |
38 | Savings:
39 |
40 | €{summary.savings}
41 |
42 |
43 | 7 | CSV Text Modifier 8 |
9 |
6 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/dashboard/profile/get-user-profile.ts:
--------------------------------------------------------------------------------
1 | 'use server'
2 |
3 | import { userProfiles } from '@/core/server/db/schema/auth'
4 | import { UserProfile } from '@/types/types.users'
5 | import { db } from 'db'
6 | import { eq } from 'drizzle-orm'
7 | import { revalidatePath } from 'next/cache'
8 |
9 | export async function getUserProfile(userId: string): Promise7 | Media Recorder 8 |
9 |
13 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/dashboard/text-processor/id-username/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import TextProcessor from '@/components/features/text-processor/text-processor'
4 |
5 | const extractIdAndUsername = (
6 | input: string,
7 | options: Record14 | Task Management 15 |
16 |
38 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/dashboard/text-processor/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import TextProcessor from '@/components/features/text-processor/text-processor'
4 |
5 | const removeNumbers = (input: string): string => {
6 | return input
7 | .split('\n')
8 | .filter(line => !/\d/.test(line))
9 | .join('\n')
10 | }
11 |
12 | export default function IGParserPage() {
13 | return (
14 | 39 | ID and Username Extractor 40 |
41 |
27 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/ThemeProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as React from 'react'
4 | import { ThemeProvider as NextThemesProvider } from 'next-themes'
5 | import { type ThemeProviderProps } from 'next-themes/dist/types'
6 |
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return
28 |
33 | Your banner message here
29 | 32 |
31 |
32 |
33 | {session ? (
34 |
39 |
40 |
42 |
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/_old-landing/Hero/Gradual-spacing.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { cn } from 'cn'
3 | import { AnimatePresence, Variants, motion } from 'framer-motion'
4 | import React from 'react'
5 |
6 | interface GradualSpacingProps {
7 | text: string
8 | duration?: number
9 | delayMultiple?: number
10 | framerProps?: Variants
11 | className?: string
12 | textClassName?: string
13 | visiblity?: boolean
14 | breakAfter?: string
15 | }
16 |
17 | export default function GradualSpacing({
18 | text,
19 | textClassName = 'justify-start items-center',
20 | duration = 0.5,
21 | delayMultiple = 0.04,
22 | framerProps = {
23 | hidden: { opacity: 0, x: -20 },
24 | visible: { opacity: 1, x: 0 }
25 | },
26 | className,
27 | visiblity,
28 | breakAfter
29 | }: GradualSpacingProps) {
30 | const words = text.split(' ')
31 | return (
32 | {session ? 'Authenticated' : 'Not Authenticated'}
41 |
33 |
34 | {words.map((word, i) => {
35 | const shouldBreak =
36 | breakAfter &&
37 | words
38 | .slice(0, i + 1)
39 | .join(' ')
40 | .endsWith(breakAfter)
41 | return (
42 |
43 |
57 | {word}
58 |
59 | {shouldBreak &&
} 60 |
61 | )
62 | })}
63 |
64 |
65 | )
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/_old-landing/Hero/Maq.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from 'cn'
2 | import React from 'react'
3 |
4 | interface MarqueeProps {
5 | className?: string
6 | reverse?: boolean
7 | pauseOnHover?: boolean
8 | children?: React.ReactNode
9 | vertical?: boolean
10 | repeat?: number
11 | [key: string]: any
12 | }
13 |
14 | export default function Marquee({
15 | className,
16 | reverse,
17 | pauseOnHover = false,
18 | children,
19 | vertical = false,
20 | repeat = 4,
21 | ...props
22 | }: MarqueeProps) {
23 | return (
24 | } 60 |
35 | {Array(repeat)
36 | .fill(0)
37 | .map((_, i) => (
38 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/_old-landing/footer.tsx:
--------------------------------------------------------------------------------
1 | import { TextHoverEffect } from '@/components/effects/glow-text-effect'
2 | export function Footer() {
3 | return (
4 |
51 | {children}
52 |
53 | ))}
54 |
5 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/aside/skeleton.sidebbar.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | type SidebarSkeletonLoaderProps = {
4 | width?: string
5 | height?: string
6 | }
7 |
8 | export default function SidebarSkeletonLoader({
9 | width = '250px',
10 | height = '100vh'
11 | }: SidebarSkeletonLoaderProps) {
12 | return (
13 |
22 |
26 |
30 |
34 |
38 |
42 |
46 |
50 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/aside/skeleton.sub-sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from 'ui'
2 | export default function SubSidebarSkeletonLoader() {
3 | return (
4 |
5 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/aside/types.sidear.d.ts:
--------------------------------------------------------------------------------
1 | export type SidebarIconProps = {
2 | item: SidebarItem
3 | isActive: boolean
4 | onClick?: () => void
5 | }
6 |
7 | export type MainSidebarProps = {
8 | isSubSidebarOpen: boolean
9 | toggleSubSidebar: () => void
10 | isCollapsed: boolean
11 | toggleCollapse: () => void
12 | }
13 |
14 | export type SiteSettingsMenuProps = {
15 | isOpen: boolean
16 | onClose: () => void
17 | onSettingChange: (setting: string, value: boolean) => void
18 | }
19 |
20 | export type SubSidebarShellProps = {
21 | isSubSidebarOpen: boolean
22 | // isMainSidebarCollapsed: boolean
23 | }
24 |
25 | export type FolderType = {
26 | id: string
27 | name: string
28 | description: string | null
29 | color: string
30 | parentId?: string | null
31 | isSelectable?: boolean
32 | }
33 |
34 | export type DropdownAction = {
35 | label: string
36 | icon: React.ReactNode
37 | onClick: () => void
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/atoms/Center.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 |
3 | type CenterProps = {
4 | children: ReactNode
5 | method?: 'grid' | 'absolute' | 'flex'
6 | direction?: 'vertical' | 'horizontal' | 'both'
7 | className?: string
8 | }
9 |
10 | export default function Center({
11 | children,
12 | method = 'flex',
13 | direction = 'both',
14 | className = ''
15 | }: CenterProps) {
16 | let centerStyles = ''
17 |
18 | switch (method) {
19 | case 'grid':
20 | centerStyles = 'grid w-screen h-screen place-items-center'
21 | break
22 | case 'absolute':
23 | centerStyles = 'absolute'
24 | if (direction === 'vertical' || direction === 'both') {
25 | centerStyles += ' top-1/2 -translate-y-1/2'
26 | }
27 | if (direction === 'horizontal' || direction === 'both') {
28 | centerStyles += ' left-1/2 -translate-x-1/2'
29 | }
30 | break
31 | case 'flex':
32 | default:
33 | centerStyles = 'flex'
34 | if (direction === 'vertical' || direction === 'both') {
35 | centerStyles += ' items-center'
36 | }
37 | if (direction === 'horizontal' || direction === 'both') {
38 | centerStyles += ' justify-center'
39 | }
40 | break
41 | }
42 |
43 | return
7 |
11 |
12 |
17 |
18 |
20 | {children}
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/atoms/Spacer.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import React from 'react'
3 |
4 | type SpacerProps = {
5 | children: React.ReactNode
6 | spaceX?: string
7 | spaceY?: string
8 | margin?: string
9 | padding?: string
10 | className?: string
11 | as?: keyof JSX.IntrinsicElements
12 | }
13 |
14 | /**
15 | * Spacer component to handle space-x, space-y, margin, and padding utility classes.
16 | *
17 | * @param {React.ReactNode} children - The content to be displayed inside the container.
18 | * @param {string} [spaceX] - Horizontal spacing between children (TailwindCSS space-x-* classes).
19 | * @param {string} [spaceY] - Vertical spacing between children (TailwindCSS space-y-* classes).
20 | * @param {string} [margin] - Custom margin (TailwindCSS margin classes like 'm-4', 'mt-2', etc.).
21 | * @param {string} [padding] - Custom padding (TailwindCSS padding classes like 'p-4', 'pt-2', etc.).
22 | * @param {string} [className=''] - Additional custom class names.
23 | * @param {keyof JSX.IntrinsicElements} [as='div'] - The HTML element to render as.
24 | * @returns {JSX.Element} The rendered Spacer component.
25 | */
26 |
27 | export function Spacer({
28 | children,
29 | spaceX = '0',
30 | spaceY = '0',
31 | margin = '0',
32 | padding = '0',
33 | className = '',
34 | as: Component = 'div',
35 | ...props
36 | }: SpacerProps) {
37 | const classes = clsx(
38 | {
39 | [`space-x-${spaceX}`]: spaceX !== '0',
40 | [`space-y-${spaceY}`]: spaceY !== '0',
41 | [`m-${margin}`]: margin !== '0',
42 | [`p-${padding}`]: padding !== '0'
43 | },
44 | className
45 | )
46 |
47 | return (
48 | -
21 | {activities.map(activity => (
22 |
-
23 | 24 |38 |25 |31 | 37 |
{activity.type}
26 |{activity.description}
27 | 28 | {new Date(activity.createdAt).toLocaleString()} 29 | 30 |
39 | ))}
40 |
14 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/dashboard/features/activity/mock-activity-api.ts:
--------------------------------------------------------------------------------
1 | // mockActivityApi.ts
2 | import { Activity, CreateActivityInput } from './activities.d'
3 |
4 | const STORAGE_KEY = 'activities'
5 |
6 | export const mockActivityApi = {
7 | create: async (activity: CreateActivityInput): Promise
15 |
27 |
28 | {isCreateFormOpen && 16 | Activities 17 |
18 | 26 |
4 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/effects/loaders/loading-dots.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | type LoadingDotsProps = {
4 | size?: 1 | 2 | 3 | 4 | 5
5 | color?: string
6 | opacity?: number
7 | className?: string
8 | } & React.HTMLAttributes
5 |
15 |
16 |
27 | {[0, 1, 2].map(dot => (
28 |
39 | ))}
40 |
53 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/effects/loaders/skeleton-loader.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from 'cn'
2 | import React from 'react'
3 |
4 | export interface SkeletonProps extends React.HTMLAttributes
5 |
6 |
7 |
8 |
9 |
10 | )
11 |
12 | const SVGSkeleton = ({ className }: { className: string }) => (
13 |
14 | )
15 |
16 | export { Skeleton, SVGSkeleton }
17 |
--------------------------------------------------------------------------------
/src/components/effects/number-ticker.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useInView, useMotionValue, useSpring } from 'framer-motion'
4 | import { useEffect, useRef } from 'react'
5 |
6 | import { cn } from 'cn'
7 |
8 | export default function NumberTicker({
9 | value,
10 | direction = 'up',
11 | delay = 0,
12 | className
13 | }: {
14 | value: number
15 | direction?: 'up' | 'down'
16 | className?: string
17 | delay?: number // delay in s
18 | }) {
19 | const ref = useRef9 |
24 | {Array.from({ length: numCircles }, (_, i) => {
25 | const size = mainCircleSize + i * 70
26 | const opacity = mainCircleOpacity - i * 0.03
27 | const animationDelay = `${i * 0.06}s`
28 | const borderStyle = i === numCircles - 1 ? 'dashed' : 'solid'
29 | const borderOpacity = 5 + i * 5
30 |
31 | return (
32 |
50 | )
51 | })}
52 |
53 | )
54 | })
55 |
56 | Ripple.displayName = 'Ripple'
57 |
58 | export default Ripple
59 |
--------------------------------------------------------------------------------
/src/components/effects/show-hide.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useState } from 'react'
4 | import { Button } from 'ui'
5 | import { AnimateHeight } from '../dashboard/features/activity/animate-height'
6 |
7 | type ShowHideProps = {
8 | title: string
9 | children: React.ReactNode
10 | width?: string
11 | className?: string
12 | }
13 |
14 | export default function ShowHide({
15 | title,
16 | children,
17 | width = 'w-full',
18 | className = '',
19 | ...props
20 | }: ShowHideProps) {
21 | const [isExpanded, setIsExpanded] = useState(true)
22 |
23 | return (
24 |
28 |
44 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/elements/crud/add-note-modal.tsx:
--------------------------------------------------------------------------------
1 | import RichTextEditor from '@/components/rich-text-editor'
2 | import { useState } from 'react'
3 | import {
4 | Button,
5 | Dialog,
6 | DialogContent,
7 | DialogHeader,
8 | DialogTitle,
9 | Input
10 | } from 'ui'
11 |
12 | type NewNoteModalProps = {
13 | isOpen: boolean
14 | onClose: () => void
15 | onCreateNote: (title: string, content: string) => void
16 | }
17 |
18 | export default function NewNoteModal({
19 | isOpen,
20 | onClose,
21 | onCreateNote
22 | }: NewNoteModalProps) {
23 | const [newNoteTitle, setNewNoteTitle] = useState('')
24 | const [newNoteContent, setNewNoteContent] = useState('')
25 |
26 | const handleCreateNote = () => {
27 | onCreateNote(newNoteTitle, newNoteContent)
28 | setNewNoteTitle('')
29 | setNewNoteContent('')
30 | }
31 |
32 | return (
33 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/elements/crud/confirmation-modal.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from 'ui'
2 | import React from 'react'
3 |
4 | type ConfirmationModalProps = {
5 | isOpen: boolean
6 | onClose: () => void
7 | onConfirm: () => void
8 | title?: string
9 | message?: string
10 | confirmText?: string
11 | cancelText?: string
12 | icon?: React.ReactNode
13 | }
14 |
15 | export default function ConfirmationModal({
16 | isOpen,
17 | onClose,
18 | onConfirm,
19 | title = 'Confirm Action',
20 | message = 'Are you sure you want to perform this action?',
21 | confirmText = 'Confirm',
22 | cancelText = 'Cancel',
23 | icon
24 | }: ConfirmationModalProps) {
25 | return (
26 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/elements/display-code/code-highlight/CodeContent.tsx:
--------------------------------------------------------------------------------
1 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
2 | import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
3 |
4 | interface CodeContentProps {
5 | children: string
6 | language: string
7 | }
8 |
9 | const CodeContent: React.FC
29 |
43 | 30 | {title} 31 |
32 | 42 |
45 | {children}
46 |
47 |
24 |
45 | )
46 | }
47 |
48 | export default FileHeader
49 |
--------------------------------------------------------------------------------
/src/components/elements/display-code/code-highlight/types.code-highlight.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react'
2 |
3 | export type CodeContentProps = {
4 | children: ReactNode
5 | language?:
6 | | 'language'
7 | | 'jsx'
8 | | 'tsx'
9 | | 'javascript'
10 | | 'typescript'
11 | | 'json'
12 | | 'bash'
13 | | 'shell'
14 | | 'python'
15 | | 'java'
16 | | 'csharp'
17 | | 'cpp'
18 | | 'css'
19 | | 'scss'
20 | | 'sass'
21 | }
22 |
23 | export type CodeHighlightProps = {
24 | title: string
25 | fileIcon?: string
26 | avatarSrc?: string
27 | language?: string
28 | children?: React.ReactNode
29 | disableMinWidth?: boolean
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/elements/index.ts:
--------------------------------------------------------------------------------
1 | export * from './display-code/code-highlight/code-highlight'
2 | export * from './custom-dropdown'
3 | export * from './notice-box'
4 |
--------------------------------------------------------------------------------
/src/components/features/record-peripherals/peripherals-recorder.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useState } from 'react'
4 | import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
5 | import AudioRecorder from './audio-recorder'
6 | import WebcamRecorder from './display-webcam'
7 |
8 | export default function MediaRecorder() {
9 | const [activeTab, setActiveTab] = useState('Audio')
10 |
11 | return (
12 |
25 | {title}
26 | {showModal && modalTrigger}
27 |
28 |
29 |
35 | {allowCollapse && (
36 |
42 | )}
43 |
44 |
23 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/ui/animations.ts:
--------------------------------------------------------------------------------
1 | export const containerVariants = {
2 | hidden: { opacity: 0 },
3 | visible: {
4 | opacity: 1,
5 | transition: {
6 | staggerChildren: 0.1,
7 | delayChildren: 0.2
8 | }
9 | }
10 | }
11 |
12 | export const itemVariants = {
13 | hidden: { y: 20, opacity: 0 },
14 | visible: (custom: number) => ({
15 | y: 0,
16 | opacity: 1,
17 | transition: {
18 | type: 'spring',
19 | stiffness: 100,
20 | delay: custom * 0.1
21 | }
22 | })
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as AvatarPrimitive from '@radix-ui/react-avatar'
4 | import * as React from 'react'
5 |
6 | import { cn } from 'cn'
7 | ;('')
8 | const Avatar = React.forwardRef<
9 | React.ElementRef
14 | {icon &&
25 | )
26 | }
27 | )
28 | Input.displayName = 'Input'
29 |
30 | export { Input }
31 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as LabelPrimitive from '@radix-ui/react-label'
4 | import { cva, type VariantProps } from 'class-variance-authority'
5 | import * as React from 'react'
6 |
7 | import { cn } from 'cn'
8 | ;('')
9 | const labelVariants = cva(
10 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef{icon}
}
15 |
24 |
34 | {Array(repeat)
35 | .fill(0)
36 | .map((_, i) => (
37 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as PopoverPrimitive from '@radix-ui/react-popover'
4 | import * as React from 'react'
5 |
6 | import { cn } from 'cn'
7 | ;('')
8 | const Popover = PopoverPrimitive.Root
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef
47 | {children}
48 |
49 | ))}
50 |