import React from 'react'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

const BasicCardCode = () => {
  return (
    <>
      <Card className='w-full'>
        <CardHeader className='flex flex-row justify-between w-full items-center'>
          <div>
            <CardTitle>Basic Card</CardTitle>
            <CardDescription>Subtitle</CardDescription>
          </div>
        </CardHeader>
        <CardContent>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </CardContent>
        <CardFooter>
          <p>Card Footer</p>
        </CardFooter>
      </Card>
    </>
  )
}

export default BasicCardCode

import React from 'react'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const FormCardCode = () => {
  return (
    <>
      <Card className='w-full'>
        <CardHeader className='flex flex-row justify-between w-full items-center'>
          <CardTitle>Form Card</CardTitle>
        </CardHeader>
        <CardContent>
          <form>
            <div className='grid w-full items-center gap-4'>
              <div className='flex flex-col space-y-1.5'>
                <Label htmlFor='name'>Name</Label>
                <Input id='name' placeholder='Name of your project' />
              </div>
              <div className='flex flex-col space-y-1.5'>
                <Label htmlFor='framework'>Framework</Label>
                <Select>
                  <SelectTrigger id='framework'>
                    <SelectValue placeholder='Select' />
                  </SelectTrigger>
                  <SelectContent position='popper'>
                    <SelectItem value='next'>Next.js</SelectItem>
                    <SelectItem value='sveltekit'>SvelteKit</SelectItem>
                    <SelectItem value='astro'>Astro</SelectItem>
                    <SelectItem value='nuxt'>Nuxt.js</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </form>
        </CardContent>
        <CardFooter className='flex justify-between'>
          <Button variant='outline'>Cancel</Button>
          <Button variant='default'>Deploy</Button>
        </CardFooter>
      </Card>
    </>
  )
}

export default FormCardCode

'use client'

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
import { BellRing, Check } from 'lucide-react'

const notifications = [
  {
    title: 'Your call has been confirmed.',
    description: '1 hour ago',
  },
  {
    title: 'You have a new message!',
    description: '1 hour ago',
  },
  {
    title: 'Your subscription is expiring soon!',
    description: '2 hours ago',
  },
]

const NotificationCardCode = () => {
  return (
    <>
      <Card className='w-full'>
        <CardHeader className='flex flex-row justify-between w-full items-center'>
          <CardTitle>Notification Card</CardTitle>
        </CardHeader>
        <CardContent className='flex flex-col gap-3'>
          <div className=' flex items-center space-x-4 rounded-md border border-ld dark:border-gray-600 p-4'>
            <BellRing />
            <div className='flex-1 space-y-1'>
              <p className='text-15 font-semibold text-ld leading-none'>
                Push Notifications
              </p>
              <p className='text-sm'>Send notifications to device.</p>
            </div>
            <Switch />
          </div>
          <div>
            {notifications.map((notification, index) => (
              <div
                key={index}
                className='mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0'>
                <span className='flex h-2 w-2 translate-y-1 rounded-full bg-secondary' />
                <div className='space-y-1'>
                  <p className='text-15 font-semibold text-ld leading-none'>
                    {notification.title}
                  </p>
                  <p className='text-sm'>{notification.description}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
        <CardFooter>
          <Button className='w-full'>
            <Check /> Mark all as read
          </Button>
        </CardFooter>
      </Card>
    </>
  )
}

export default NotificationCardCode

'use client'

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import dynamic from 'next/dynamic'
import { IconGridDots } from '@tabler/icons-react'
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })

const ChartCardCode = () => {
  const ChartData: any = {
    series: [
      {
        name: 'Footware',
        data: [2.5, 3.7, 3.2, 2.6, 1.9, 2.5],
      },
      {
        name: 'Fashionware',
        data: [-2.8, -1.1, -3.2, -1.5, -1.9, -2.8],
      },
    ],
    chart: {
      height: 290,
      type: 'bar',
      fontFamily: 'inherit',
      foreColor: '#adb0bb',
      toolbar: {
        show: false,
      },
      offsetX: -20,
      stacked: true,
    },
    colors: ['var(--color-primary)', 'var(--color-secondary)'],
    plotOptions: {
      bar: {
        horizontal: false,
        barHeight: '60%',
        columnWidth: '20%',
        borderRadius: [5],
        borderRadiusApplication: 'end',
        borderRadiusWhenStacked: 'all',
      },
    },

    stroke: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: false,
    },
    grid: {
      show: false,
    },
    yaxis: {
      min: -5,
      max: 5,
      tickAmount: 4,
    },
    xaxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    tooltip: {
      theme: 'dark',
    },
  }
  return (
    <>
      <Card className='w-full'>
        <CardHeader>
          <CardTitle>Chart Card</CardTitle>
          <CardDescription>Overview of Profit</CardDescription>
        </CardHeader>
        <CardContent>
          <div className='-me-6'>
            <Chart
              options={ChartData}
              series={ChartData.series}
              type='bar'
              height='290px'
              width='100%'
            />
          </div>
        </CardContent>
        <CardFooter className='flex justify-between'>
          <div className='flex gap-3 items-center'>
            <div className='bg-lightprimary dark:bg-lightprimary h-10 w-10 flex justify-center items-center rounded-md'>
              <IconGridDots size={20} className='text-primary' />
            </div>
            <div>
              <h6 className='text-base'>$23,450</h6>
              <p className=' text-sm'>Salary</p>
            </div>
          </div>
          <div className='flex gap-3 items-center'>
            <div className='bg-lightsecondary dark:bg-lightsecondary h-10 w-10 flex justify-center items-center rounded-md'>
              <IconGridDots size={20} className='text-secondary' />
            </div>
            <div>
              <h6 className='text-base'>$23,450</h6>
              <p className=' text-sm'>Expance</p>
            </div>
          </div>
        </CardFooter>
      </Card>
    </>
  )
}

export default ChartCardCode