Skip to content

Commit

Permalink
update components
Browse files Browse the repository at this point in the history
  • Loading branch information
tisnamuliarta committed Mar 15, 2024
1 parent 597c022 commit dfb6599
Show file tree
Hide file tree
Showing 75 changed files with 17,543 additions and 2,420 deletions.
9,852 changes: 7,595 additions & 2,257 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"type": "module",
"scripts": {
"dev": "vite",
"dev-mail": "email dev",
"build": "vite build"
},
"devDependencies": {
Expand Down Expand Up @@ -33,6 +34,8 @@
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-context-menu": "^2.1.5",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
Expand All @@ -47,7 +50,9 @@
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"@react-email/components": "0.0.15",
"@remixicon/react": "^4.2.0",
"@tanstack/react-table": "^8.13.2",
"@tremor/react": "^3.14.1",
Expand All @@ -57,11 +62,14 @@
"cmdk": "^1.0.0",
"date-fns": "^3.3.1",
"input-otp": "^1.0.1",
"jotai": "^2.7.1",
"lodash": "^4.17.21",
"lucide-react": "^0.358.0",
"next-themes": "^0.3.0",
"react": "^18.2.0",
"react-day-picker": "^8.10.0",
"react-dom": "^18.2.0",
"react-email": "2.1.0",
"react-hook-form": "^7.51.0",
"react-resizable-panels": "^2.0.12",
"sonner": "^1.4.3",
Expand Down
56 changes: 47 additions & 9 deletions resources/js/Components/AuthenticationCard.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,56 @@
import React, { PropsWithChildren } from 'react';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo';
import { Link } from '@inertiajs/react';
import React, { PropsWithChildren, ReactNode } from 'react';
import AuthenticationCardLogo from './AuthenticationCardLogo';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';

interface GuestLayoutProps {
header?: string | null;
description?: string | ReactNode | null;
}

export default function AuthenticationCard({
header = null,
description = null,
children,
}: PropsWithChildren<Record<string, unknown>>) {
}: PropsWithChildren<GuestLayoutProps>) {


return (
<div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
<div>
<AuthenticationCardLogo />
</div>
<div className='flex min-h-screen flex-col items-center pt-6 sm:justify-center sm:pt-0'>
<Link href={route('dashboard')}>
<AuthenticationCardLogo className='mx-auto h-16 w-16 fill-foreground' />
</Link>

<div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
{children}
<div className='mt-10 w-full max-w-lg'>
<Card className='rounded-none border-l-transparent border-r-transparent shadow-none sm:rounded-lg sm:border-l-border sm:border-r-border sm:shadow-sm lg:rounded-xl '>
<CardHeader className='flex-row justify-between'>
<div>
<CardTitle>{header}</CardTitle>
<CardDescription className='mt-2'>{description}</CardDescription>
</div>
</CardHeader>
<CardContent>{children}</CardContent>
</Card>
</div>
</div>
// <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
// {/* <div>
// <AuthenticationCardLogo />
// </div>

// <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
// {children}
// </div> */}
// <Card>
// <CardHeader>
// <div className='flex'>
// <AuthenticationCardLogo />
// </div>
// </CardHeader>
// <CardContent>
// {children}
// </CardContent>
// </Card>
// </div>
);
}
5 changes: 3 additions & 2 deletions resources/js/Components/AuthenticationCardLogo.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import React from 'react';

export default function AuthenticationCardLogo() {
export default function AuthenticationCardLogo({ className }: { className?: string }) {
return (
<Link href="/">
<svg
className="w-16 h-16"
className={cn(className, 'w-16 h-16')}
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand Down
11 changes: 5 additions & 6 deletions resources/js/Components/ConfirmsPassword.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import axios from 'axios';
import classNames from 'classnames';
import React, { PropsWithChildren, useRef, useState } from 'react';
import useRoute from '@/Hooks/useRoute';
import DialogModal from '@/Components/DialogModal';
import InputError from '@/Components/InputError';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import SecondaryButton from '@/Components/SecondaryButton';
import TextInput from '@/Components/TextInput';
import axios from 'axios';
import classNames from 'classnames';
import React, { PropsWithChildren, useRef, useState } from 'react';

interface Props {
title?: string;
Expand All @@ -22,7 +21,7 @@ export default function ConfirmsPassword({
onConfirm,
children,
}: PropsWithChildren<Props>) {
const route = useRoute();

const [confirmingPassword, setConfirmingPassword] = useState(false);
const [form, setForm] = useState({
password: '',
Expand Down
20 changes: 20 additions & 0 deletions resources/js/Components/Container.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import clsx from 'clsx';
import React, { ReactNode } from 'react';

export default function Container({
withNoHorizontalPadding = false,
children,
}: {
withNoHorizontalPadding?: boolean;
children: ReactNode;
}) {
return (
<div
className={clsx(
'mx-auto max-w-7xl py-4 sm:px-6 sm:py-10 lg:px-8',
withNoHorizontalPadding ? null : 'px-4 sm:px-0'
)}>
{children}
</div>
);
}
67 changes: 67 additions & 0 deletions resources/js/Components/ThemeProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React, { createContext, useContext, useEffect, useState } from 'react';
type Theme = 'dark' | 'light' | 'system';

type ThemeProviderProps = {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};

type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};

const initialState: ThemeProviderState = {
theme: 'system',
setTheme: () => null,
};

const ThemeProviderContext = createContext<ThemeProviderState>(initialState);

export function ThemeProvider({
children,
defaultTheme = 'system',
storageKey = 'vite-ui-theme',
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);

useEffect(() => {
const root = window.document.documentElement;

root.classList.remove('light', 'dark');

if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

root.classList.add(systemTheme);
return;
}

root.classList.add(theme);
}, [theme]);

const value = {
theme,
window: (window as any).route,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
};

return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}

export const useTheme = () => {
const context = useContext(ThemeProviderContext);

if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');

return context;
};
Loading

0 comments on commit dfb6599

Please sign in to comment.