mirror of
https://github.com/penpot/penpot.git
synced 2026-05-24 09:23:40 +00:00
55 lines
1.5 KiB
Clojure
55 lines
1.5 KiB
Clojure
(ns app.main.ui.debug.icons-preview
|
|
(:require-macros [app.main.style :as stl])
|
|
(:require
|
|
[app.main.ui.cursors :as c]
|
|
[app.main.ui.icons :as i]
|
|
[app.util.timers :as ts]
|
|
[cuerdas.core :as str]
|
|
[rumext.v2 :as mf]))
|
|
|
|
(mf/defc icons-gallery
|
|
{::mf/wrap-props false
|
|
::mf/private true}
|
|
[]
|
|
(let [entries (->> (seq (js/Object.entries i/default))
|
|
(sort-by first))]
|
|
[:section {:class (stl/css :gallery)}
|
|
(for [[key val] entries]
|
|
[:div {:class (stl/css :gallery-item)
|
|
:key key
|
|
:title key}
|
|
val
|
|
[:span key]])]))
|
|
|
|
(mf/defc cursors-gallery
|
|
{::mf/wrap-props false
|
|
::mf/private true}
|
|
[]
|
|
(let [rotation (mf/use-state 0)
|
|
entries (->> (seq (js/Object.entries c/default))
|
|
(sort-by first))]
|
|
|
|
(mf/with-effect []
|
|
(ts/interval 100 #(reset! rotation inc)))
|
|
|
|
[:section {:class (stl/css :gallery)}
|
|
(for [[key value] entries]
|
|
(let [value (if (fn? value) (value @rotation) value)]
|
|
[:div {:key key :class (stl/css :gallery-item)}
|
|
[:div {:class (stl/css :cursor)
|
|
:style {:background-image (-> value (str/replace #"(url\(.*\)).*" "$1"))
|
|
:cursor value}}]
|
|
|
|
[:span (pr-str key)]]))]))
|
|
|
|
|
|
(mf/defc icons-preview
|
|
{::mf/wrap-props false}
|
|
[]
|
|
[:article {:class (stl/css :container)}
|
|
[:h2 {:class (stl/css :title)} "Cursors"]
|
|
[:& cursors-gallery]
|
|
[:h2 {:class (stl/css :title)} "Icons"]
|
|
[:& icons-gallery]])
|
|
|